feeds2011/06/20カテゴリー:WordPressWordPressにSNSボタンを設置Tweet仕事でクライアントのサイトにSNSのボタンを設置する機会があり、せっかく覚えたので自分のブログにも設置してみました。設置したボタンは、Twitter、はてな、mixi、Facebook、Googleプラスワンのボタンです。WordPressには、SNSのボタンを簡単に実装できるプラグインもあるようですが、今回はプラグインを使用せずに直接テンプレートを編集して実装しました。目次TwitterのTweetボタンはてなブックマークボタンmixiチェックボタンFacebookのいいね!(Like)ボタンGoogleプラスワンボタンTwitterのTweetボタンまずは、TwitterのTweetボタンです。Twitterのツイートボタンページでコードを生成してくれるのでとても簡単です。コードを生成する際、URLにはとりあえずトップページのURLを入れておくと、後でWordPressのテンプレートで書き換えやすくなります。他をお好みで設定したら、右下のコードをコピーして、WordPressのテンプレートの挿入したい位置にペーストします。?>の下に入れました。src=&quot;http://platform.twitter.com/widgets.js&quot;&gt;&lt;/script&gt;はてなブックマークボタン次は、はてなブックマークボタンです。こちらもはてなブックマークボタンページで簡単にコードを生成できます。URLとタイトルの欄には、後で編集しやすくするため、とりあえずトップページのものを入れておきます。タイプを選択したら、右のコードをコピーして、WordPressのテンプレートにペーストします。Centerでデベロッパー登録しておく必要があります。登録には個人の場合、携帯メールアドレスが必要になります。Pluginで新規サービス追加で識別キーをゲットします。mixiチェックボタンに関しては、コードの生成ツールを見つけられなかったので、mixiチェック技術仕様ページで調べながら記述しました。src=&quot;http://static.mixi.jp/js/share.js&quot;&gt;&lt;/script&gt;また、仕事で実装しようとした際、mixiチェックボタンに関してハマったのでメモしておきます。最初、mixiイイネ!ボタンをタグ生成ツールで問題なく実装した後で、mixiイイネ!ボタンのhrefのURL部分をmixiチェックボタンのdata-urlに記述していたのですが、何度やっても「データがありません」とエラーになりました。技術仕様を見て解決したのですが、data-urlは日本語等のマルチバイト文字を含む場合はUTF-8でURLエンコードしなければならないようですが、逆を言えば日本語を含まない場合は、普通にURLを指定すれば良いようです。データがありませんとエラーが出た場合は、この点をチェックしてみるといいかもです。Buttonページでコードを生成できるので簡単です。allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;以上でボタンは動作するようになりますが、これだけだと、Facebookのいいね!ボタンがクリックされた時、Facebook側で表示されるサムネイルでとんでもない位置の画像が使われたりします。Protocol)の記述を追加すると指定できるようになります。私は、WP-OGPというプラグインを使用しました。小粋空間で詳しく解説されています。設定が終わったら、WordPressのpluginsディレクトリのwp-ogp内のdefault.jpgを指定したい画像で上書きします。ちなみにmixiもOGPに対応しているので、WP-OGPで設定すると、mixiでもその値が使われるようになります。ボタンページでコードを生成できるので、基本的には簡単です。ボタンのサイズや言語、カウンターの表示/非表示を選ぶと下に表示されるコードが更新されます。これまでと違い<script>タグと<g:plusone>タグは、別々の場所に記述するので、それぞれ個別にコピペします。<script>タグの方を</head>の直前か</body>の直前にペーストします。どちらでもいいようですが、私はfooter.phpの</body>の直前に記述しました。'ja'}&lt;/script&gt;&lt;/body&gt;次に<g:plusone>タグをボタンを表示させたい場所に記述しますが、xhtmlとhtml5で記述が異なるようです。xhtmlの場合は、そのまま<g:plusone>タグをペーストします。count=&quot;false&quot;&gt;&lt;/g:plusone&gt;html5の場合は、<div>タグで記述する必要があります。APIで詳しく解説されています。IE7で表示されないようです。これに関しては、Googleの対応を待つしかなさそうです。