WordPressにSNSボタンを設置

仕事でクライアントのサイトにSNSのボタンを設置する機会があり、せっかく覚えたので自分のブログにも設置してみました。設置したボタンは、Twitter、はてな、mixi、Facebook、Googleプラスワンのボタンです。WordPressには、SNSのボタンを簡単に実装できるプラグインもあるようですが、今回はプラグインを使用せずに直接テンプレートを編集して実装しました。

TwitterのTweetボタン

まずは、TwitterのTweetボタンです。Twitterのツイートボタンページでコードを生成してくれるのでとても簡単です。コードを生成する際、URLにはとりあえずトップページのURLを入れておくと、後でWordPressのテンプレートで書き換えやすくなります。

他をお好みで設定したら、右下のコードをコピーして、WordPressのテンプレートの挿入したい位置にペーストします。私の場合は、single.phpの<?php the_content(); ?>の下に入れました。最後に<a>タグのdata-url属性の値を<?php the_permalink(); ?>に書き換えます。

WordPressテンプレート

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-count="none" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

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

次は、はてなブックマークボタンです。こちらもはてなブックマークボタンページで簡単にコードを生成できます。URLとタイトルの欄には、後で編集しやすくするため、とりあえずトップページのものを入れておきます。

タイプを選択したら、右のコードをコピーして、WordPressのテンプレートにペーストします。ペーストしたら、<a>タグのhref属性のhttp://b.hatena.ne.jp/entry/以降を<?php the_permalink(); ?>に、data-hatena-bookmark-title属性の値を<?php the_title(); ?>に書き換えます。

WordPressテンプレート

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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>

mixiチェックボタン

mixiチェックボタンの場合は、事前にmixi Developer Centerでデベロッパー登録しておく必要があります。登録には個人の場合、携帯メールアドレスが必要になります。登録したら、mixi Pluginで新規サービス追加で識別キーをゲットします。

mixiチェックボタンに関しては、コードの生成ツールを見つけられなかったので、mixiチェック技術仕様ページで調べながら記述しました。<a>タグのdata-key属性の値に識別キーを入力し、data-url属性の値を<?php the_permalink(); ?>に書き換えます。

WordPressテンプレート

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="識別キー" data-url="<?php the_permalink(); ?>">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

また、仕事で実装しようとした際、mixiチェックボタンに関してハマったのでメモしておきます。最初、mixiイイネ!ボタンをタグ生成ツールで問題なく実装した後で、mixiイイネ!ボタンのhrefのURL部分をmixiチェックボタンのdata-urlに記述していたのですが、何度やっても「データがありません」とエラーになりました。

技術仕様を見て解決したのですが、data-urlは日本語等のマルチバイト文字を含む場合はUTF-8でURLエンコードしなければならないようですが、逆を言えば日本語を含まない場合は、普通にURLを指定すれば良いようです。データがありませんとエラーが出た場合は、この点をチェックしてみるといいかもです。

Facebookのいいね!(Like)ボタン

Facebookのいいね!(Like)ボタンは、Facebook Like Buttonページでコードを生成できるので簡単です。

設定でデザイン等を選んだら、下部のGet Codeボタンをクリックして、表示されたポップアップのiframeのコードをコピーして、WordPressのテンプレートにペーストし、<iframe>タグのsrc属性内のhrefパラメータの値を<?php the_permalink(); ?>にします。

WordPressテンプレート

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=200&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>

以上でボタンは動作するようになりますが、これだけだと、Facebookのいいね!ボタンがクリックされた時、Facebook側で表示されるサムネイルでとんでもない位置の画像が使われたりします。

これは、metaタグでOGP(Open Graph Protocol)の記述を追加すると指定できるようになります。私は、WP-OGPというプラグインを使用しました。WP-OGPに関しては、WordPressにFacebookのOGP(Open Graph Protocol)を簡単に設定できる「WP-OGP」プラグイン: 小粋空間で詳しく解説されています。

設定が終わったら、WordPressのpluginsディレクトリのwp-ogp内のdefault.jpgを指定したい画像で上書きします。ちなみにmixiもOGPに対応しているので、WP-OGPで設定すると、mixiでもその値が使われるようになります。

Googleプラスワンボタン

GoogleプラスワンボタンもGoogleのプラスワン ボタンページでコードを生成できるので、基本的には簡単です。

ボタンのサイズや言語、カウンターの表示/非表示を選ぶと下に表示されるコードが更新されます。これまでと違い<script>タグと<g:plusone>タグは、別々の場所に記述するので、それぞれ個別にコピペします。まず、<script>タグの方を</head>の直前か</body>の直前にペーストします。どちらでもいいようですが、私はfooter.phpの</body>の直前に記述しました。

WordPressテンプレート

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

</body>

次に<g:plusone>タグをボタンを表示させたい場所に記述しますが、xhtmlとhtml5で記述が異なるようです。まずxhtmlの場合は、そのまま<g:plusone>タグをペーストします。

WordPressテンプレート

<g:plusone size="medium" count="false"></g:plusone>

html5の場合は、<div>タグで記述する必要があります。これについては、Googleの+1 button APIで詳しく解説されています。

WordPressテンプレート

<div class="g-plusone" data-size="medium" data-count="false"></div>

以上でGoogleプラスワンボタンが表示されるようになりますが、現時点で私が確認した限り、Googleプラスワンボタンは、IE6, IE7で表示されないようです。これに関しては、Googleの対応を待つしかなさそうです。