道はなくても進むのだ。: Facebookのいいね！ボタンを自分のブログやウェブサイトに設置する方法

現在大活躍中のいいね！ボタン。これを自分のブログやウェブサイトに設置する方法をまとめておこうと思います。

Facebook上での動きですが、いいね！されたページはNews Feedに表示されますので、友達の目にも止まり易くなります。

コード取得用のページ英語版しかないですが、簡単なフォームにURLを入力するだけです。

Facebook Developersのこのページにアクセスすると下のような画面が表示されるので「URL to Like」欄にボタンを設置したいページのURLを入力して「Get Code」を押すだけ。

Layout Style	ボタンの表示レイアウト
Show faces	ボタンの下にLikeを押した人のプロフィール画像を表示
width	ボタンと文字を含めた幅の指定
Verb to display:	Likeを選択でいいね！になる
Font	フォント種類
Color Scheme	ボタンの色

表示される２種類のコードのうちお好みのほうをコピーしてブログやウェブサイトに貼り付ければ設置完了です。

XFBMLの場合、パラメーターを指定してもコードに反映されないので、以下のパラメーターを自分でつける必要があります。

<fb:like href="http://dummy.jp" layout="button_count" width="130"></fb:like>

iFrameの場合はlocale="ja_JP"のように指定します。en_US, en_ES, fr_FRなどがあります。

XFBMLの場合、scriptのsrcに含まれる言語部分「/en_US/」を「/ja_JP/」のように書き換えることで言語の指定が可能です。

ヘッダーには以下の設定が必要です。

<html　xmlns:og="http://opengraphprotocol.org/schema/"
       xmlns:fb="http://www.facebook.com/2008/fbml">

Facebookに表示されるサイトの情報を指定します。以下の項目を設定する必要があります。

<meta property="og:type" content="website" />

og:title	タイトル
og:type	いいね！を表示するページの種類。（設定できる値の詳細はこちら）
og:image	画像ファイルのURL。50ピクセルの正方形を推奨。あまり大きいと表示されない。
og:url	ページのURL（<fb:like>のhrefにも、こちらにもしっかり設定した方がいいです。）
og:site_name	サイト名
fb:app_id (もしくはfb:admins_id)	アプリケーションのID。個人のIDの場合はadmins_idとする。カンマで区切って複数指定可能。
og:description	説明文

メタタグの設定を確認するツールがFacebookから提供されていますので、設定後このツールを使って確認できます。

2011年7月20日水曜日