ソーシャルボタン(共有ボタン)を設置する4つの方法

WordPressを使うとき、意外と四苦八苦するのがソーシャルボタンの設置です。

どこのサイトでも設置してあるので簡単と思いきや、なかなか簡単ではありません。このサイトでもいろいろと使ってきましたが、参考にしたサイトを紹介したいと思います。

目次　( 各項目までジャンプできます)

1.WP Social Bookmarking Lightを使う
2.Jetpackを使う
3.忍者おまとめボタンを使う
4.プラグインなしで設置する

1.WP Social Bookmarking Lightを使う

一番簡単なのは、WP Social Bookmarking Lightを使うことです。このプラグインは、記事の上か下かどちらかしかボタンを表示できないという弱点がありますが、以下のサイトでそれを解消する方法が説明されていました。(※後に両方表示できるようになりました)

WordPress トリック WP Social Bookmarking Light を記事上下に表示 | アルケミスタの住人

はじめのころはこれでよかったのですが、WP Social Bookmarking Lightの真の弱点はボタンのデザインが中途半端なことです。小さくて見づらいデザインしかありません。デザインを気にしないなら、最も手っ取り早い方法なのでおすすめです。

2.Jetpackを使う

本来、サーバーを借りるほうでないWordPress用のJetpackですが、プラグインとして活用することができます。万能プラグインの一角で、これを入れておけば、アクセス解析から便利機能の追加までさまざまなことができます。スパム対策定番のAkismetと一緒にインストールしておけばとても役立ちます。

詳しくは以下のサイトが参考になりました。

WordPress.com の便利機能をインストール版に！ Jetpack を導入してみた | 8bitodyssey.com

現在では、以下のように、「共有」というところから、ソーシャルボタンを配置する設定ができるようになっています。あまり自由度がないのが残念ですが、Jetpackそのものは入れておいて損はありません。

3.忍者おまとめボタンを使う

次に行きついたのが、以下のサイトで紹介されてた方法です。

ソーシャルボタンをプラグインを使って簡単に設置する方法 | Punksteady

忍者おまとめボタンというサービスを使えば、さまざまなデザインのソーシャルボタンの中から、好みのものを選んで並べ変えることができます。すばらしい自由度です。

そしてPostPostというプラグインを使えば、記事の前後に簡単に配置できます。今回取り上げる4つのうちでは最もお勧めする、とても魅力的な方法です。

ただ、忍者おまとめボタンの仕様(?)で、記事とボタンの間に少しスペースが生じること、また、いいねボタンがiframe方式であることが気になったので、4番目の方法にすることにしました。

4.プラグインなしで設置する

今使っているのは手動で設置する方法ですが、手間がかかるので、最もお勧めしない方法でもあります。知識がないので、説明してくださっているサイトの内容だけが頼りでした。

■　1.各ボタンの公式ページから、好みのスタイルのボタンのコードを取得する
具体的には以下の記事を参考にさせていただきました。

【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） [C!]

［み］WordPressで、プラグインなしでソーシャルボタンを設置する方法 | みはら.com

手動で設置する場合は、iframeではなく、HTML5のいいねボタンを設置できます。iframeのいいねボタンは単にいいねを押すだけの仕組みなのに対し、HTML5のほうは、いいねを押すとコメント入力画面が開きます。

HTML5の利点と、その場合に生じるコメント欄の端が途切れる現象への対策は、以下のサイトを参考にさせていただきました。

より効果的な「いいね！」ボタンの設置と切れてしまうコメント欄の修正方法 | ハヤクユケ

いいね！を押した後のコメント欄切れを解消する | wordpressの使い方　初心者さんのwordpressの使い方支援

それぞれのソーシャルボタンは、Like Button - Facebook開発者、+1 ボタン - Google+ Platform — Google Developers、Twitter / Twitterボタン、はてなブックマークボタンの作成・設置についてなどのサイトから取得します。

■　2. サイトのアドレスを入れた部分を書き換える
それぞれのボタンを取得するとき、サイトのURLを入力する欄があります。しかしWordPressの場合、コードをコピーしてから、ブログのテンプレートに貼り付ける際、サイトのURLの部分を　<?php the_permalink(); ?>　に書き換える必要があります。これによって、たとえばFacebookのいいねボタンをブログ全体ではなく、個別記事に対応させることができます。

■　3.テーマの該当箇所に貼り付ける
コピーしたコードは2箇所に分けて貼り付けます。スクリプトに関するコードは、twenty Elevenであれば、header.phpの<body <?php body_class(); ?>>の直後に貼り付けます。

もう一つのコードは、content-single.phpの表示させたい部分に貼り付けます。記事の前か後に貼るだけなら、前述のPostPostというプラグインを使うほうが便利です。

■　4.体裁を整えて並べる
ボタンを設置したら、各ボタン間のズレなど、今度は体裁をととのえます。以下のサイトを参考にさせていただき、さらにGoogle+とPocketを追加しました。

はてブ/Twitter/いいねなどソーシャルボタンをキレイに並べる - 酒と泪とRubyとRailsと