Sharebar

Sharebarは、スクロールするソーシャルメディアのシェアボタン(共有ボタン)を表示できるプラグインです。記事の横にスクロール追尾する共有ボタンを配置できます。

このプラグインを利用すれば、投稿と固定ページの画面の目立つ位置(左右どちらか)に表示できるので、記事がソーシャルメディアで共有されやすくなる効果があります。

初期設定では、英語圏のソーシャルメディアの共有ボタンが登録されていますが、共有ボタンがカスタマイズ可能になっており、自分でボタンを追加すれば、結構使えるプラグインです。自分のWebサイトでよく利用されるソーシャルメディアの共有ボタンを追加して利用しましょう。

はじめに

このプラグインが優れている点

  1. ソーシャルメディア(SNS)のスクロール追尾するシェアボタン(共有ボタン)を記事の横に配置できる。
  2. 画面の目立つ位置に共有ボタンを表示できるので、記事がソーシャルメディアで共有されやすくなる。
  3. ソーシャルメディアの共有ボタンは自分でカスタマイズできる。
  4. PHPで記述すると、小さい共有ボタンも表示できる。

共有ボタンの例(見本画像)

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Sharebar」で検索
  2. WordPress.org からダウンロード

プラグインの設定

管理画面の場所

プラグインの管理画面は、下記の場所にあります。

WordPress管理画面 > 設定 > Sharebar

共有ボタン一覧(Home)

プラグインをインストールした初期状態では、英語圏のソーシャルメディアの共有ボタンが中心に登録されています。しかし、共有ボタンがカスタマイズ可能になっており、自分で共有ボタンを追加できます。自分のWebサイトでよく利用されるソーシャルメディアの共有ボタンを追加しましょう。

インストール直後の初期状態

日本で利用されているソーシャルメディアを追加した状態

共有ボタンの編集画面(Custom Sharebar)

共有ボタン一覧の「Edit」をクリックすると、共有ボタンのHTMLコードを登録できます。「Enabled」には、必ずチェックを入れて下さい。チェックを入れないと有効化されないのでご注意下さい。

シェアバーの設定(Settings)

表示位置やサイズの微調整は、この画面で設定できます。

日本のソーシャルメディアの共有ボタン

日本語

参考までに、日本でよく利用されるソーシャルメディアの共有ボタンのHTMLコードを紹介します。縦表示の大きい共有ボタンのHTMLコードです。このHTMLコードは、共有ボタン一覧画面の「Edit」をクリックすると、登録画面が表示されます。そこにコピペして使用して下さい。

はてなブックマーク

<a href="http://b.hatena.ne.jp/entry/[url]" class="hatena-bookmark-button" 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><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/[url]" class="hatena-bookmark-button" data-hatena-bookmark-title="[title]" data-hatena-bookmark-layout="standard-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><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

注意点

公式サイトの注意書きにもありますが、ページ内に複数の共有ボタンを設置する場合は、「script」の部分は一回のみ記述します。複数記述すると、正しく表示されなかったり、表示が遅くなるようです。

公式サイト

はてなブックマークボタン

Twitter ツイートボタン

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="[twitter]">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="[twitter]">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
公式サイト

Twitter ツイートボタン

Facebook いいねボタン

<iframe src="http://www.facebook.com/plugins/like.php?href=[url]&layout=box_count&show_faces=false&width=70&action=like&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:65px;" allowTransparency="true"></iframe>
<iframe src="http://www.facebook.com/plugins/like.php?href=[url]&layout=button_count&show_faces=false&width=85&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:21px;" allowTransparency="true"></iframe>

※ アクセス制限がかかっているWordPress管理画面では、Facebookの共有ボタンは正しく表示されませんが、公開すると正しく表示されます。

公式サイト

Facebook Like Button

Google +1ボタン

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
公式サイト

Google +1ボタン

Poket

Poketは、記事を後で読めるように登録しておくサービスです。

<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
公式サイト

Pocket Button

共有ボタンを個別に表示する方法

共有ボタンを個別に表示する場合は、表示する場所にPHPで記述します。登録した名前とサイズを指定します。サイズは「small」「big」で指定します。

<?php sharebar_button('名前','サイズ'); ?>
<?php sharebar_button('twitter','small'); ?>

TCD010のテーマの場合

Sharebarを「BrogPress(TCD010)」のテーマで利用する場合は、初期状態では、リストの背景画像が表示されてしまうので、CSSの設定で非表示にしましょう。

ul#sharebar li{ background:none; }

まとめ

Sharebarは、スクロールするソーシャルメディアのシェアボタンを表示できるプラグインです。記事の横にスクロール追尾する共有ボタンを配置できます。

このプラグインを利用すると、投稿と固定ページの画面横の目立つ位置に共有ボタンを表示できるので、記事がソーシャルメディアで共有されやすくなる効果があります。

カスタマイズすることで、日本でもよく利用されているソーシャルメディアの共有ボタンに変更することができます。Twitter、Facebook、はてなブックマーク等は特に利用者が多いので、あなたのWebサイトにも共有ボタンを用意しておきましょう。

スポンサーリンク