HOME(Lifelog&Notes)>Notes

WordPressのGoogle+1ボタンとOGP対応

Tweetボタンをはじめとした各種ソーシャルメディアへの投稿ボタンをブログに付けるのは、この1年くらいであっという間に一般的になりましたね。
最近では、ボタンの設置のほかに「OGP対応」というのも注目されてきています。

というわけで、Wordpressへのソーシャルメディア対応2011年夏版、ソーシャルメディア関連ボタンの設置とOGPについて、このおーぷんlog2のテーマを作る時にやったことを書きます。

ソーシャルメディア関連ボタンの設置

プラグインや無料サービスでお手軽設置。ただしGoogle+1はまだない

ソーシャルブックマークサービスやSNSの種類が多いアメリカ発のサービスでは、Add Thisという、300種類以上のボタンが一気にバーン!と表示できちゃうものもあったりしますが、日本人向けのブログだったら、まあこんなにいらないなぁ…。

というわけで、日本で喜ばれそうなボタンを手軽に付けられる方法として、わたしはこのjQueryプラグインを利用させてもらってます。(このサイトではヘッダ部分に表示しているのがそれ)
Twitter/facebookいいね/facebook Share/mixiチェック/mixiイイネ/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ | アイトランス株式会社

あと、このおーぷんlog2ではzenbackも試してみることにしました。
自分のブログのURLを登録すると生成されるJavaScriptのコードを、ブログのテンプレートの記事の表示部分の下に貼り付けるだけで、簡単にボタンの設置と関連リンクを表示できるサービスです。

以上、とっても簡単です。

でも、最近話題のGoogle+1ボタンはこれらにはない。
Google+1が流行れば、そのうち対応してくれるかもですが、流行るかどうかわからないけど今ちょっと付けてみたいな、ってことで、Google+1ボタンだけ別で追加しました。

Google+1ボタンの設置

これもとっても簡単です。
解説記事もたくさん書かれていますが、Googleさん本家のプラスワン ボタンページに行ってコードを生成するのが速いと思いますよ。
上のページでボタンサイズや言語の選択欄の下にある「詳細オプション」をクリックすると、ボタンを押された回数(カウンター)の表示有無や、ボタンが押された対象として指定するURLの設定もできます。

コードが取得できたら、Wordpressのテンプレートの表示したい箇所に貼り付けます。
私は、あたかもzenbackで表示しているボタンかのように、他のボタンと並ぶようにCSSを調整してみました。

OGP対応

OGPとは何か?についてはこちらが分かりやすいです。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

OGP対応というのは要するに、Webページのhtmlのheader要素に、そのページがどんなページであるかをSNSのエンジンが理解できる形式で記述することになります。
Wordpressであれば一般的には、header.phpにそのためのmetaタグを入れればいいわけです。
ただ、トップページ、アーカイブページ、個別記事のページとそれぞれで適切な記述になるように、条件分岐タグを使ったりしなければいけません。

しかし、今どきこういうのも簡単にできるプラグインがあるんですね。
私はWP-OGPというのを使いました。
Facebookのアカウントを持っている場合は、これをWordpressの管理画面からインストール、有効化すると、管理画面の「設定」メニューに「WP-OGP」が表示されるので、そこで自分のIDをfb:adminsの値として設定することができます。

これで自分のブログを表示してソースを見たときに、header要素内に<meta property=”og:〜というのが何行もずらずらっと出ていれば成功です。

***2011.7.17追記***

Google+ボタンですが、今のところInternetExplorer7以下とiOSのSafariでは表示されません。
+1ボタンなんて 表示されてないじゃん、と思った方、ごめんなさい。
IEはこのまま対応されないような気がしますが、iPhone、iPadでは表示されるように、Googleさん直してくれないかな…、と他力本願中。

また、Zenbackも今のところブラウザによって表示のされ方が違います。
「関連リンク」「関連キーワード」はブラウザによって表示されたりされなかったり。
そして一番表示して欲しい 「関連記事」については、どのブラウザでも一向に表示されない…、
と思って今念のため確認したら、MacのOperaではいくつか表示されるようになってる!
ChromeやFirefoxで表示される日は来るのか?
もう少し様子見ます。