WordPressサイトにソーシャルネットワークへのシェアボタンを設置するプラグインは幾つもありますが、今日はその中でも「大きなサイズのSNSボタン」を簡単に設置出来るWordPressプラグイン『Tweet, Like, Google +1 and Share』をご紹介します。
また、本プラグインを利用して『はてなブックマークボタン』を表示する場合の方法についても説明しています。
プラグインダウンロード
WordPress › Tweet, Like, Google +1 and Share « WordPress Plugins
A very simple social share plugin with just 5 social icons.
『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ボタン」がめちゃくちゃ嫌いです。邪魔だYO!!ダサイYO!!
ボタンを表示する場所を選ぶ
“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にしておきましょう。
はてなブックマークを追加する
このプラグイン、海外産だけあって日本ユーザーにとっては馴染み深い『はてなブックマークボタン』が用意されていません。しかし、非常に簡単に『はてブボタン』を追加する事が出来るので、そのやり方をご紹介します。
手順は以下の通りです。
- “Select Icons to display”項目の”6, Display Custom Buttons”にチェックを入れる
- 下記のコードをコピーして”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: room402