大きなサイズの SNS ボタンを設置できる WordPress プラグイン 『Tweet, Like, Google +1 and Share』

WordPress サイトにソーシャルネットワークへのシェアボタンを設置するプラグインは幾つもありますが、今日はその中でも「大きなサイズの SNS ボタン」を簡単に設置出来る WordPress プラグイン『Tweet, Like, Google +1 and Share』をご紹介します。

また、本プラグインを利用して『はてなブックマークボタン』を表示する場合の方法についても説明しています。

プラグインダウンロード

WordPress › Tweet, Like, Google +1 and Share « WordPress Plugins

『Tweet, Like, Google +1 and Share』 の利用イメージ

『Tweet, Like, Google +1 and Share』を利用して SNS ボタンを設置したイメージは、上記のスクリーンショットの様になります。それぞれの SNS ボタンのデザインが目にも面白いですね。綺麗に並んでるし、なんとなく可愛らしいです。

スクリーンショットはサンプルなので全ての数字がゼロですが、勿論この数字はリアルタイムで実際の数が反映されていきます。この数字が増えていくのも、ブログを書いている人にとっては楽しみの一つではないでしょうか。

『Tweet, Like, Google +1 and Share』 の設定

『Tweet, Like, Google +1 and Share』は設定項目が多く用意されているタイプのプラグインです。その上、設定項目は全て英語表記となっているため、少し分かりにくい部分もあるかも知れません。
本記事ではプラグイン利用に際しての基本的な項目のみを解説しています。もし不明な点があればコメントや Twitter でお気軽に質問して下さい。

表示するボタンを選ぶ

“Select Icons to display” という項目で表示する SNS ボタンを選択する事が出来ます。また、ボタンの並び順もここで設定する事になります。

特にここで設定しておきたいポイントは以下の三項目になります。

  • “Display Twitter” には自分 Twitter ID を入力
  • 後述するはてブや Pocket を表示する場合は、”6, Display Custom Buttons” にチェックを入れておく
  • “Display order” にて表示する SNS ボタンの並び順を変更できる

最低限 Twitter ID さえ入力しておけば、特にデフォルト設定のままでも問題ないでしょう。

ボタンを表示するレイアウトを選ぶ

“Alignment” という項目で SNS ボタンを「右寄せ」で表示するか「左寄せ」で表示するかを選択する事が出来ます。寄せ方に関しては “Align” か “Float” かを選択する事も可能です。

また、”Vertical Scrolling Sharebar” にチェックを入れる事で、画面に追従するたて型の SNS ボタンも設置されます。記事本文だけではなく、常に見える場所に SNS ボタンを置いておきたい場合はチェックを入れておくと良いでしょう。

余談になりますが、私はこの「たて型追従 SNS ボタン」がめちゃくちゃ嫌いです。

ボタンを表示する場所を選ぶ

“Where to Display” ではボタンを表示する場所を選びます。
表示させたいページの種類を選んで、その上で上部と下部のどちらか（または両方）にボタンを表示するか選択します。

  • Display on Posts（記事で表示する）
  • Display on Pages（固定ページで表示する）
  • Display on Home Page（トップページで表示する）
  • Display on Archive Pages(アーカイブで表示する)

例えば、「記事には表示させたいけど、トップページでは非表示したい」という場合は “Display on Posts” にチェックを入れて、”Display on Home Page” のチェックを外して下さい。

また、ボタン表示箇所は以下の通りになります。

  • Display Above Content（ページ上部）
  • DDisplay Below Content（ページ下部）

両方にチェックを入れる事で、ページの上下どちらにも SNS ボタンを設置する事が可能です。

特定の条件で非表示にする

『Tweet, Like, Google +1 and Share』では特定の状況下で SNS ボタンの表示を OFF にする事も出来るようになっています。

モバイル上、特定の記事やページ、特定のカテゴリーなど状況に応じて SNS ボタン非表示設定を行いましょう。

OGP タグについての注意

基本的な設定項目として、最後に設定画面最下部の “Other options” を見てみましょう。

その中で “Do not add Facebook OG META tags” という項目があります。これは Facebook などで使われる Open Graph タグを記述するか否かに関しての設定になりますので、ご自身で OGP タグを設定している場合や、他のプラグインを利用して OGP タグを管理している場合はチェックを入れて OFF にしておきましょう。

はてなブックマークを追加する

このプラグイン、海外産だけあって日本ユーザーにとっては馴染み深い『はてなブックマークボタン』が用意されていません。しかし、非常に簡単に『はてブボタン』を追加する事が出来るので、そのやり方をご紹介します。

手順は以下の通りです。

  1. “Select Icons to display” 項目の “6, Display Custom Buttons” にチェックを入れる
  2. 下記のコードをコピーして “Add your own Custom Buttons” に貼り付ける 

    1

    <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>

これでだけで簡単にはてブボタンが追加出来ます。尚、次に説明する人気のあとで読むサービス『Pocket』もコードが変わるだけで方法は同じです。

Pocket を追加する

前項でご説明した『はてブ』ボタン追加方法に加えて、最近ニーズが増えてきた『Pocket』の追加方法もご紹介します。尚、『はてブ』と『Pocket』を両方追加した場合は、前述のはてブ追加コードに続けて Pocket のコードを記述して下さい。

1
2

<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>

おまけ

上記でご紹介した『はてブ』と『Pocket』のコードはそれぞれ大きなアイコン表示のコードになりますが、小さなアイコン表示コードを入力する事でこんなデザインにする事も出来ます。

ややダサイ可能性も無きにしもあらずですが、遊び心としてコードを載せておきます。

1
2
3
4
5

<!-- 「はてブ」ボタンコード  -->
<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>
<!-- 「Pocket」ボタンコード  -->
<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>

まとめ

以上、大きなサイズの SNS ボタンを設置できる WordPress プラグイン『Tweet, Like, Google +1 and Share』のご紹介でした。SNS ボタン設置の WordPress プラグインと言えば『WP Social Bookmarking Light』が有名ですが、大きなサイズの SNS ボタンを設置したい場合に断然オススメ出来るのは、この『Tweet, Like, Google +1 and Share』です。

この記事が何かの参考になれば幸いです。

大きなサイズの SNS ボタンを設置できる WordPress プラグイン 『Tweet, Like, Google +1 and Share』 is a post from: Room 402