現在、このブログはWordPressの標準テーマのtwenty elevenをカスタマイズして表示しているのですが、ソーシャルボタンがもともと付いてなかったので、自分で付けることにしました。
ソーシャルボタンはWordPressのプラグインやAddThisなんかを使用すると、非常に簡単に設置できます。
WordPress › WP Social Bookmarking Light « WordPress Plugins
AddThis – Share Button, Social Bookmark, Sharing Plugins and Analytics
ただ、今回はgrow!ボタンを設置したり、スタイルを調整したりしたかったので自分で付けてみました。そこで、設置の仕方のポイントをまとめておきます。
どんな感じ？
スクリーンショットはこちら。記事を最後まで読んでいただけると見られますけどね（笑）
参考ページ
参考にしたのは以下のページです。
Twitter / Twitterボタン
Tweet Button | Twitter Developers
Like Button – Facebook開発者
はてなブックマークボタンの作成・設置について
+1 ボタン
+1 Button – Google+ Platform — Google Developers
Setting – Grow!（要ログイン）
使い方（ボタン設置者） | Grow! Blog
2012-08-22 追記）Grow!ボタンはサービスリニューアルのため機能が終了しました。
【Grow!からの大切なお知らせ】サービスリニューアルについてを参照のこと。
付け方
ボタンを表示させたい場所に参考ページにて生成されたコードを貼り付けるだけで基本的にはOKです。
ただ、そのままだと各ソーシャルサイトでの紹介のされ方が自分の意図するところと異なる場合があります。その場合は以下に続く作業を行いましょう。
OGPの設定
OGPとはOpen Graph Protocolというもので、すごく簡単に言うと、FacebookなどにWebページを共有するときにページの情報（タイトルや概要など）を詳細に設定することができるものです。概念や仕様はこちらを参照してください。
The Open Graph protocol
これだけは知っておきたいOGP （Open Graph Protocol） | FacebookApps JAPAN｜Facebookプロモーションの現場から
このOGPはFacebookのいいね！ボタンとGoogle+1ボタン*1で使われます。WordPressで動的に値を設定するために以下のコードを書きました。これで基本的な情報はOGPに渡されるはずです。
それぞれのボタンを押すとそれぞれのサイトでこのように表示されます。
・Facebook
・Google+
はてなブックマークの設定
はてなブックマークボタンを各記事に設置する場合、共有するURLと記事タイトルの設定を修正します。記事のURLはthe_permalink()、記事のタイトルはthe_title()で取得できます。
さいごに
これで基本の設定+αは終了です。まだサムネイル画像なんかは設定できていませんが、のちのち設定してみようと思います。
*1: Google +1ボタンはSchema.orgを使用することを推奨しています。OGPが反映される優先度はSchema.orgの次になっています。詳しくはこちらを参照のこと。
+1 Button – Google+ Platform — Google Developers
