sharebar_plugin_wordpress_001

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

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


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

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

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

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

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

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

sharebar_plugin_wordpress_002

Sharebar(シェアバー)のプラグインのインストール

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

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

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

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

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

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

sharebar_plugin_wordpress_003

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

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

sharebar_plugin_wordpress_004

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

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

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から取得します。

sharebar_plugin_wordpress_005

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

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

  • [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ボタンは最初に追加されていますが、そのままでは使えないです。

次のように設定します。

sharebar_plugin_wordpress_006

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

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

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

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

sharebar_plugin_wordpress_007

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

<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 ボタンを新規追加

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

 sharebar_plugin_wordpress_008

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

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

ShareBar自体を設定する。

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

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

 

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

sharebar_plugin_wordpress_009

①は、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で次のようなことをしています。

  • Sharebarの角を少し丸くして、柔らかい印象にした。
  • 背景にシャドウ(影)を入れて、立体感を出した。
  • ボタンの上部と下部に空きを与えて、見やすくした。

ShareBar設置後に発生した問題と解決方法

ShareBarを設置したあとに、いくつか問題が発生したので解決方法を記載します。

問題:Facebookでシェアしたときに記事の説明分に「ツィート!」という文字が表示される。2013年8月18日追記。

 sharebar_plugin_wordpress_010

HTMLソースを見てみると、なぜか、Facebookの説明文と、メタディスクリプションに文字が挿入されている。

sharebar_plugin_wordpress_011

僕のように記事本文を説明文として利用している場合に問題が起こる。ShareBarのコードは記事本文(<body></body>)の最初に挿入されるので、ShareBarで文字を出力すると、本文の最初に追加されたように表示される。

解決方法は、Twitterの設定で、「ツィート!」の文字を記載しているので削除します。

sharebar_plugin_wordpress_012

ShareBarは使い勝手も、デザイン性もよい。

設定は複雑だが、ShareBarはデザイン性もよく、機動性もある。速攻でシェアできてしまうところが魅力だ。

参考にさせて頂いた、記事をまとめました。

Facebookのいいねボタン(Like Button)を設置する方法。【MT&WordPress対応】 和洋風KAI

WordPressにソーシャルメディアボタンを設置できるプラグインSharebarを入れた UnToris

WordPressプラグイン15選!最高の集客効率と機能性を出す組み合わせ バズ部