【WordPress】Pocketボタンを設置するために「Sharebar」プラグインを導入してみた

10 2 4

WordPress

201304_0001[17]

とあるネット記事に、後で読むサービス「Pocket」を利用している人の数は、無視できないくらい多いですよーいう内容が書かれていました。そこで、私もブログにPocketのボタンを設置したいと思い、Sharebarというプラグインを導入してみました。

 

SPONSORED LINK

Pocketへ送っている人ははてブする人より多いかも

▼気になったのはこの記事です。
[browser-shot width=”200″ url=”http://number333.org/2013/04/25/pocket-button/”]「pocket」のWordPressブログへのボタン設置方法。そしてわかった衝撃の事実。これは無視できない。 | iPhone・Macの情報発信ブログ〜Number333~

これはPocketボタン設置するべきだな!と思い、少し調べてみました。

 

「WP Social Bookmarking Light」プラグインにはPocketボタンがない

一番最初に思いついたのは、現在使用している「WP Social Bookmarking Light」プラグインにPocketボタンが対応していればその設定変えるだけだな!と思いました。が、残念ながら対応していませんでした。

なので、別の方法を考えます。

 

スクロールに追随する「Sharebar」プラグインを導入

いろいろ調べた結果、自分でSNSボタンを設定できる「Sharabar」プラグインを導入することにしました。が、自分で設定できる=自分でSNSボタンのコードを探してくる必要があるということです。とりあえず、私が設定した際に参考にしたサイトをご紹介します。

 

TwitterとFacebook

もともと設定されていたので、コード探しはしていません。

 

はてぶ

[browser-shot width=”200″ url=”http://b.hatena.ne.jp/guide/bbutton”]はてなブックマークボタンの作成・設置について

このページで手順に沿って作業すれば、コードが生成されます。

 

Google+

[browser-shot width=”200″ url=”https://developers.google.com/+/web/+1button/”]+1 Button – Google+ Platform — Google Developers

これも手順に沿って選択すれば、コードが生成されます。

 

Evernote

[browser-shot width=”200″ url=”http://c-brains.jp/blog/wsg/11/11/22-100034.php”]引き続き、ソーシャルボタン設置のソースコードサンプルあれこれ。 | バシャログ。

ここのEvernote用コードをお借りしています。が、ちょっと他のボタンとテイストが違うので、できれば揃えたいのですが、いったんこのままで。

 

Pocket

[browser-shot width=”200″ url=”http://getpocket.com/publisher/button”]Pocket for Publishers: Pocket Button

ここでコードを入手しましょう。

 

Sharebar設定時の注意点

SNSボタンの種類によってサイズにばらつきがあるため、少し大きめのサイズを指定しておく必要があります。

 

サイズ変更の方法

▼プラグインの設定から、「Settings」を選択したところ。「Sharebar Width」の値を適当な値に調節しましょう。私は90にしています。
201304_0001[18]

同様に、各SNSボタンの幅も必要に応じて設定しましょう。

▼Facebookの例。widthの値を80にしています。
201304_0002[4]

また、Editした後に反映されないことが時々あります。そんなときは、以下の作業を。

▼「All」で全てのSNSボタンにチェックを入れた後、「Enable」を選択して「Update」ボタンを押下しましょう。
201304_0001[19]

 

WPTouch適用済みのスマホには対応されていない

あと、私は「WPTouch」というプラグインでスマホ対応していますが、その場合はこのSharebarプラグインでの表示には対応していないみたいです。なので、引き続き「WP Social Bookmarking Light」プラグインも併用しています。

▼これで、こんな感じにスクロールしても追随するSNSボタン設置ができました!
201304_0001[20]

 

まとめ

見ている方に便利に使ってもらうために今回の設定をやってみました。皆さんも興味があればどうぞ。

WordPressプラグインについては以下の記事も参考に。

[catlist search=”WordPress プラグイン” numberposts=5 id=-210]

SPONSORED LINK

WordPress

  • メールアドレスを記入して購読すれば、更新をメールで受信できます。現在、36 人が購読中です!
    ※メールアドレスは管理人には知られません

  • ラブグアバが更新されたらプッシュ通知でお知らせします。

  • おっさん管理人グアバが執筆しています。ミスチル好き。
    私が気になったこと(主にスマホ/Webサービス/生活/ミスチル/たまにトイレ)について書いています。2016年7月時点で月間36万PV。
    詳細はコチラ

    フォローはこちらから!