ソーシャルボタンSharebar（シェアバー）の使い方と設置方法。WordPressプラグイン。 - IAO

※WordPressとSharebarのバージョンアップに伴い、記事を2013年8月に刷新しました。

Sharebar（シェアバー）はブログの左で浮いたようなシェアボタンを作ってくれる。スクロールしても、Sharebarがついてきてくれ、SNSで伝えたいときにシェアできるので非常に便利。

この記事は、次の人たちのために書きました。

Sharebar（シェアバー）を使いたいが、設定の仕方がわからない。
拡散効果の高い、ソーシャルボタンの設置方法が知りたい。

このSharebarだが、外国産ということもあってそのままでは使いづらい・・・。

色々とググってみて、それなりに使えるように設定方法をまとめてみた。

この記事で紹介している設定が終わると、次のような感じのSharebarになる。非常にクールなボタンだ(@^^)/~~~。

Sharebar（シェアバー）のプラグインのインストール

プラグインの検索で、「Sharebar」を検索すれば最初に表示されるので、そのままインストールする。このあたりは、難しくないので大丈夫だと思う。

最初にある、不要なボタンを削除する。

「設定」→「Sharebar」で、使えるボタンがリストされている。

ほとんどが日本では使わないソーシャルボタンなので、Twitterの「ツィート」とFacebookの「いいね！」だけを残して削除する。

はてなブックマークのボタンを設置する。

ShareBarの設定画面から、「Add New Button」を押して新規にボタンを追加します。

ボタンを追加する画面の説明。

ボタンを追加していく作業で、画面の理解が必要なのでここでまとめて解説しますね。

①は、非常に重要な説明です(@^^)/~~~

次のように書かれています。

You can use HTML, Javascript or inline CSS for the button code. Additionally, the following variables are automatically extracted from the post and can be used in your code: [url], [title], and [author].

訳すると、

「あなたは、ボタンのコードのHTML、JavaScriptやインラインCSSを使用することができます。次の変数が自動的にpostから抽出されており、ユーザーコード内で使用することができます：[URL]、[title（タイトル）]と[author（著者）]」

ここで覚えておいて欲しいのは、ボタンを設定する際には、HTML、CSS、JavaScriptが使えるということと、記事のパーマリンク（URL）が必要なときは、[URL]を指定すると、Sharebarが記事のURLに置き換えてくれるということ。同じく、記事のタイトルが必要なときは、[title]を指定することで、Sharebarが表示されたときに記事タイトルに置き換えてくれます。

②は、ボタンの名前です。英語圏のプラグインなので、英語表記でよいと思います。

③は、ボタンが上から表示される順番です。僕は、SNSボタンの中で、はてなブックマークがもっとも力が強いと思っているので、最初に表示されるようにします。

④は、大きいボタンです。ShareBarでは大きいボタンしか使わないです。

⑤は、小さいボタンです。使わないです。

はてなブックマークボタンのボタンコードを取得

はてなブックマークボタンを、http://b.hatena.ne.jp/guide/bbuttonから取得します。

「ブックマーク数」を「表示（バーティカル）」にすることで、大きいサイズのボタンが取得できます。

取得したコードを次のように変更しています。

[url]を指定する。
[title]を挿入する。
スクリプト（<script></script>）は削除。（※既に、記事の上部と下部で「はてぶボタン」を使っており、そこでスクリプトがあるため、ここでは削除しました。）

次が変更後のコードです、コピペでそのまま使えると思います。

<a href="http://b.hatena.ne.jp/entry/[url]" data-hatena-bookmark-title="[title]" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

はてなブックマークの設定は以上です。しばらくすると、ボタンが表示されるようになると思います。

Twitterの「ツィート」ボタンを整える。

Twitterボタンは最初に追加されていますが、そのままでは使えないです。

次のように設定します。

ボタンのコードは、次のコードをコピペしてもらえると使えます。

<a href="https://twitter.com/share" data-url="[url]" data-lang="ja" data-related="anywhereTheJavascriptAPI" data-count="vertical">ツイート！</a>

Facebookの「いいね！」ボタンを整える。

Facebookも同様で、そのままでは使えないのでカスタマイズします。

次のコードをコピペしてもらえると使えます。

<div data-send="false" data-layout="box_count" data-href="[url]" data-width="500" data-show-faces="false" data-colorscheme="light" data-action="like"></div>

Google Plus One ボタンを新規追加

ボタンが最初にないので、新規に追加します。次のように追加します。

Googleプラスワンボタンのコードです、コピペして使えます。

<div data-size="tall" data-href="[url]"></div>

ShareBar自体を設定する。

ShareBar自体の幅が狭いので、はてぶのボタンがきれいに表示されません。設定画面で、調整します。

「Settings」から、ShareBarの設定画面に移動。

設定する箇所は以下の場所です。

①は、ShareBarの表示位置です。このブログのように、サイドバーが右にある方は、「Left」にする必要があります。

②は、ShareBarを左に配置した場合に、記事からどれぐらい離すかです。20pxぐらい離して配置するのがよいです。①で、「Left」にした場合にのみ有効な値です。

③は、②と逆で、右に配置した場合です。①で、「Right」にした場合にのみ有効。

④は、ShareBar全体の横幅（width）です。「110」が丁度良いです。

⑤は、Twitterのときのアカウント名です。最初は、開発者のアカウントが入っています。削除しておきます。

あとは、「Update Setting」をクリックして保存します。

CSSでデザインを仕上げる。

ここまでで、十分に動きます。ですが、少し窮屈な感じがするのと、立体感がほしいのでCSSで微調整します。

CSSは、sytle.cssに追記します。僕は、子テーマを使っているので子テーマのstyle.cssに追記します。

次のCSSコードをコピペしてもらえるとよいと思います。

sharebar プラグイン用の追加CSS

*/ #sharebar { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:3px 3px 3px rgba(0,0,0,0.4); padding-top:10px !important; padding-bottom:20px !important; } #sharebar li{ padding-top:10px !important; }

追記したCSSで次のようなことをしています。