FacebookやGREEの「いいね！」ボタンを設置する場合はmetaタグに注意

2010/10/25 20:55

(どうもこの記事のLikeボタンが押せなくなっているようで・・・。原因不明でよくわかりません＞＜)

「いいね！」ボタン押してますか？

うちのブログにもmixiチェックやGREEの「いいね！」ボタン、Facebookの「いいね！」ボタンを設置しています。ところがどうもFacebookの「いいね！」ボタンだけが長らくうまく機能していなかったようなのです。(@sscr さん報告ありがとうございます！)

実際に試してみると、確かにFacebookの「いいね！」を押しても、しばらくするとボタンが元の押してない状態に戻ってしまいます。

Firefoxのエラーコンソールには何もエラーメッセージが表示されないのでJavaScriptのエラーではない模様。そこでFirebugで「いいね！」ボタンが押された時のリクエストとレスポンスを見てみたところ、レスポンスにエラーメッセージが。

UnicodeでエンコードされていたのでJavaScriptで表示させてみたところ、

有効な管理人リストが提供されていません。「fb:app_id」メタタグまたは「fb:admins」メタタグを使って、コンマ区切りのリストとして管理人リストを指定する必要があります。

というメッセージに。。意味がわからなかったのですが「Like Button – Facebook開発者」を見て謎が解けました。

If you use Open Graph tags, the following six are required:

fb:app_id や fb:admins は Open Graph の meta タグを利用する場合の必須項目。どうもこのあたりが怪しい。

ただ、Facebookのいいね！ボタンを設置する場合にはOpen Graphのmetaタグは必須ではないはずなので特に書いてなかったはず・・・と思ったのですが、GREEの「いいね！」ボタンを設置する時に同じmetaタグを使っていました。おぅ。。

» Social Feedback – GREE Developer Center（グリーデベロッパーセンター）

GREEの場合は「og:title」のみ必須とされているので、とりあえず「og:title」と「og:type」をmetaタグで設置していたのです。

が、Facebookの場合は「og:title」「og:type」「og:image」「og:url」「og:site_name」「fb:admins or fb:app_id」が必須(required)とされています。Facebookの仕様的にはmetaタグが足りなかったということでエラーになっていたのでしょう。

ただ実際には全部必須というわけではないようで、ひとまず「og:url」と「og:site_name」を設置してみると、Facebookの「いいね！」ボタンは正常に動くようになりました。

「Open Graph protocol – Facebook開発者」を見てみると仕様の上では「og:image」も必須みたいですが、なくても動作します。

自分でサイトに自力で「いいね！」ボタンを設置する場合は、Open Graphのmetaタグをしっかり記述しておいたほうがよさそうですね。。時間のある時にもう少し調べておこうと思います。