FacebookのOGPをBloggerに対応させる方法
前回の記事『自分の指定した任意の場所でJavascriptを実行させる Tipsまとめ』の中で、Javascriptを活用したSNSシェアボタンの設置を紹介しました。簡単でスピーディな情報拡散ツールとしてのSNSの利用を考えるのであれば、Facebookのいいね！ボタンもアクセス数を伸ばす一つの要素になっています。
但し、そのままボタンを設置しただけでは殆ど意味は無く、OGPを設定してあげることで本来の機能を引き出すことが出来るようになります。今回は現状での最善策と考えられる、BloggerをFacebookのOGPに対応させる方法を紹介致します。
OGP (Open Graph Protocol) とは何か
基本的な内容は下記Linkページにて詳しく解説されており、分かりやすく参考になります。
簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。
ブログで「いいね！」ボタンを押した時、どういう挙動をするのか、知っていますか？自分のプロフィールのウォールにアクティビティとして表示される “だけ” なんですよ。 ニュースフィードには表示されません！
つまりOGPを設定していないと「いいね！」ボタンが押されたとしても、Facebook上での扱いは押したユーザーのプロフィールページにのみしか表示されず、記事のtitleや概要（Description）などの情報がきちんと反映されないということになります。
OGPが設定されていない場合の表示
そこでOGPを設定してあげることによって、「いいね！」ボタンが押された時に最適化した表示でウォール上へ投稿され、簡単に友達へ記事を共有することができるようになります。「シェアボタン」と同じような働きをするということですね。
ツイッターで例えると、Linkがツイートされた時に、そのユーザーのフォロワーへ情報が共有されるのと同じようなものと考えて頂ければ分かりやすいかと思います。
BloggerにFacebookのOGPを設定する
http://developers.facebook.com/apps
「新しいアプリケーションを作成」でアプリを作り、App ID/API Keyを取得します。
2．Bloggerのデザイン＞HTMLの編集を開き、HTMLタグに以下の属性を追加
xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'このようになります。
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='ja' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'>mixi/GreeもOGPの設定があるので合わせて追加しました。
xmlns:mixi='http://mixi-platform.com/ns#'3．Bloggerのデザイン＞HTMLの編集で以下の「meta」タグを「head」タグ内へ追加
xmlns:gr='http://gree.jp/ns'
こちらのzerippeさんが作成された、WEBアプリケーションを利用させて頂きます。
BloggerをOGPに対応させるときのog:imageをなんとかする : とある変人の超備忘録
記事のRSSから画像ファイルが使用されているかをチェックし、使用されていれば一番最初に見つかった画像にリダイレクトするWEBアプリケーションを作ってみました。
<!-- OGP -->[ブログの固定画像URLを指定]は、自分の好きな画像を選択。
<!-- 記事 -->
<b:if cond='data:blog.pageType == "item"'>
<meta property='og:type' content='article'/>
<meta property='og:title' expr:content='data:blog.pageName + " | " + data:blog.title'/>
<meta property='og:image' expr:content='"http://bloggerspice.appspot.com/postimage/" + data:blog.url'/>
</b:if>
<!-- ホーム -->
<b:if cond='data:blog.pageType == "index"'>
<meta property='og:type' content='blog'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta property='og:image' content='[ブログの固定画像URLを指定]'/>
</b:if>
<!-- アーカイブ -->
<b:if cond='data:blog.pageType == "archive"'>
<meta property='og:type' content='article'/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:image' content='[ブログの固定画像URLを指定]'/>
</b:if>
<!-- 全てに適用 -->
<meta property='og:url' expr:content='data:blog.url'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='fb:app_id' content='[作成したアプリのApp ID/API Key]'/>
<meta property='og:locale' content='ja_JP'/>
<!-- /OGP -->
[作成したアプリのApp ID/API Key]は、『Facebook開発者』のページから確認できる。
ポイント
「og:description」は、敢えて設定しません。Facebookの仕様で、記事の始めの「p」タグで囲ってある部分が概要として認識されるので、記事を書く時は先頭のDescriptionにしたい部分を「p」タグで囲みます。
また下手に設定してしまうと、Google+で共有させた場合に「og:description」の部分を読み込んでしまうため、記事の概要として相応しくないものとなってしまう為です。
参考記事：Google+とOpen Graph Protocol おまけ | モバイルSEOの勧め
4．Facebookいいね！ボタンを押したときコメントが表示されるようにする
以下のCodeを</head>と<body>の間に入力
<div id='fb-root'></div>[作成したアプリのApp ID/API Key]を忘れずに入力する
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<script>
// <![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: '[作成したアプリのApp ID/API Key]',
status: true,
cookie: true,
xfbml: true});
FB.api('/me', function(response) {
console.log(response.name);
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
}());
// ]]>
</script>
5．Facebookいいね！ボタンの設置
XFBMLのプラグインコードを使用して、任意の場所に設置
<span style='vertical-align: 4px;'>「layout」でボタンの種類、「send」で送るボタンの有無、「show_faces」でボタンを押したユーザーアイコン表示の有無、「width」で幅を設定する。
<fb:like expr:href='data:post.url' layout='button_count' send='false' show_faces='false' width='100'/>
</span>
実際の表示はこちらで確認：Like Button – Facebook開発者
XFBMLで設置した場合、コメントを出すことができるようにするためか縦方向に位置がズレます。
そのため、vertical-alignで調整しています。
OGP設定の確認とまとめ
最後に自分が設定したものが正しく機能しているか確認します。下記2つのLinkでホーム、アーカイブ、個別ページのURLを入力してエラーが出なければ成功です。
Input URL or Access Token
Enter a URL to see some helpful feedback about your page markup. Enter an access token to see its expiry and user. …
2012/02/05 追記：
現在、FacebookのURLリンターの仕様が変更され、<p>タグで囲んだ部分がog:descriptionとして認識されることで「metaではない違うタグで指定されていますよ」と注意が表示されますが、動作上は問題ないのでご安心下さい。
上手く設定できていれば、自分のBlog（いいね！ボタン）のアクセス解析ができます。
http://www.facebook.com/insights/
こちらのページで自分のサイトを登録するとFacebookからのトラフィックを確認できます。
- どのくらいの人が「いいね！ボタン」を押しているのか
- 誰が「いいね！ボタン」を押しているのかなど