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

スポンサーリンク

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

 

スポンサーリンク

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にしています。

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

▼Facebookの例。widthの値を80にしています。

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

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

 

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

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

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

 

まとめ

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

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

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