http://developers.facebook.com/docs/reference/plugins/like/
Likeボタンを設置すると、ユーザはサイトのコンテンツをFacebook上の友達と共有できるようになります。ユーザがlikeボタンをクリックすると、ユーザの友達のNews Feed上にサイトへのリンクが現れます。
あなたのウェブページが現実世界の物、たとえば映画やスポーツチーム、セレブやレストランの公式サイト／ページである場合は、Open Graphプロトコルを使ってその旨を明記してください。Open Graphタグがウェブページに含まれていれば、あなたのページはFacebookページと同じように扱われます。つまり、ユーザがLikeボタンをクリックすると、ページとユーザとの間に"繋がり"が確立されると言うことです。ユーザプロフィールのLikes and Interests欄にはページ情報が現れ、更新情報をユーザへ知らせる事ができるようになります。そのページは、例えばFacebook内の検索のように、Facebookページが対象として出てくる場所であれば同じ扱いで出てきます。あなたのコンテンツを気に入った人々をターゲットとして広告を出す事さえ可能です。
Likeボタンを設置すると、ユーザはサイトのコンテンツをFacebook上の友達と共有できるようになります。ユーザがlikeボタンをクリックすると、ユーザの友達のNews Feed上にサイトへのリンクが現れます。
あなたのウェブページが現実世界の物、たとえば映画やスポーツチーム、セレブやレストランの公式サイト／ページである場合は、Open Graphプロトコルを使ってその旨を明記してください。Open Graphタグがウェブページに含まれていれば、あなたのページはFacebookページと同じように扱われます。つまり、ユーザがLikeボタンをクリックすると、ページとユーザとの間に"繋がり"が確立されると言うことです。ユーザプロフィールのLikes and Interests欄にはページ情報が現れ、更新情報をユーザへ知らせる事ができるようになります。そのページは、例えばFacebook内の検索のように、Facebookページが対象として出てくる場所であれば同じ扱いで出てきます。あなたのコンテンツを気に入った人々をターゲットとして広告を出す事さえ可能です。
Likeボタンの実装には、XFBMLとiframeの２種類があります。
XBML版の方が用途の幅が広いですが、JavaScript SDKの利用が必須となります。XFBMLは、表示すべきプロフィール画像の有無によってダイナミックに高さを調整します。また、JavaScriptラ イブラリを通じてlikeイベントを取得できるので、ユーザがLikeボタンを押したことがリアルタイムで分かります。ユーザがlikeするとき、任意で コメントを入力することも可能です。ユーザがコメントを足した場合はFacebook上に書き出され、likeだけの場合よりも目立つように扱われます。
使い始めるには、以下の入力欄を使ってコードを生成してください。
Open Graphタグは以下のような見た目です。
ページを管理する場合のOpen Graphタグの詳細はOpen Graphプロトコルのドキュメントをご覧ください。
先述の通り、Likeボタンにrefパラメータを指定してください。
例：
最 新の情報であることを保証するため、24時間に１回スクレイピングします。それ以外にも、Open Graphページの管理者がLikeボタンをクリックした時と、Facebook URL LinterにURLが入力された時にもスクレイピングされます。Facebookは、あなたのサイトのcacheヘッダを見ます。（Expiresや Cache-Controlを見ます）ただし、先の時期を指定してあったとしても、24時間に１度はスクレイピングします。
スクレイパーのuser agentは facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php です。
Likeボタンを使用すると、こちらの規約に同意したものとみなされます。また、このページで提供されているオプション以外の方法でLikeボタンを変更しないことにも同意したとみなされます。
XBML版の方が用途の幅が広いですが、JavaScript SDKの利用が必須となります。XFBMLは、表示すべきプロフィール画像の有無によってダイナミックに高さを調整します。また、JavaScriptラ イブラリを通じてlikeイベントを取得できるので、ユーザがLikeボタンを押したことがリアルタイムで分かります。ユーザがlikeするとき、任意で コメントを入力することも可能です。ユーザがコメントを足した場合はFacebook上に書き出され、likeだけの場合よりも目立つように扱われます。
使い始めるには、以下の入力欄を使ってコードを生成してください。
Step 1 - Get Like Button Code
（注：入力欄は http://developers.facebook.com/docs/reference/plugins/like/ の上記見出しの部分にあります）Attributes
- href likeする対象のURLです。XFBML版でのデフォルトは表示中のページURLです。
- layout 3つのオプションがあります
- standard ソーシャルテキストが右側に表示され、友達のプロフィール画像が下に表示されます。
- button_count ボタンの右側にlikeカウントの総数が表示されます。ミニマムの表示サイズは横90px、デフォルトは横90px、高さは20pxです。
- box_count ボタンの上にlikeの総数が表示されます。ミニマムの表示サイズは横55px、デフォルトは横55px、高さ65pxです。
- show_faces ボタンの下にプロフィール画像を表示するか指定します。（standardを選んだ場合のみ指定できます）
- width likeボタンの横幅です
- action ボタンに表示される文言です。likeとrecommendの二種類から選択します
- font ボタンに使われるフォントの指定です 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'から選択します
- colorscheme likeボタンの色指定です。lightとdarkの二種類です。
- ref 参照元の追跡用ラベルです。50文字以下で数字／アルファベット／いくつかの記号(今のところ+/=-.:_のみ)で指定します。ここを指定すると、News Feedなどからlikeアクションを辿ってくる場合のURLに２つのパラメータが足されます。
- fb_ref 上記で説明したrefパラメータです。
- fb_source リンク元のタイプです。クリックされたストリームのタイプ（home/profile/search/other）と、likeストーリーのタイプ(online/multiline)がアンダーバースコアで連結されたものです。
Step 2 - Get Open Graph Tags
（注：生成するには、http://developers.facebook.com/docs/reference/plugins/like/ の同名の項目を参照してください。）Open Graph Tags
Open Graphタグは、あなたのサイトの<head>タグに追加する<meta>タグで、そのページが何の公式ページであるかを説明します。例えばバンドやレストラン、ブログや他の何かです。Open Graphタグは以下のような見た目です。
<meta property="og:tag name" content="tag value"/>Open Graphタグを使う場合、以下の６つが必須です。
- og:title コンテンツのタイトル
- og:type コンテンツのタイプ。Open Graphタイプの中から選択しなくてはなりません。
- og:image コンテンツを象徴する画像のURL。最低でも50px X 50pxのサイズが必要です。一番良いのは正方形の画像ですが、高さの３倍の横幅を持つ画像までは利用できます。
- og:url コンテンツの固定URL。Open Graphタグを使っている場合には、Likeボタンに指定されているURLの代わりにog:urlが使われます。
- og:site_name サイトのタイトルです。IMDbなど。
- fb:admins or fb:app_id ページ管理者のFacebook IDもしくはアプリIDをカンマ区切りで繋いだものです。最低限、自身のFacebook IDを入れてください。
ページを管理する場合のOpen Graphタグの詳細はOpen Graphプロトコルのドキュメントをご覧ください。
FAQ
Likeボタンが押されたのは、どうすれば分かりますか？
XFBML版を使っている場合は、FB.Event.subscribeのedge.createをサブスクライブすると分かります。likeにコメントを足すオプションは、どの段階で出ますか？
XFBML 版の場合は、常にコメント表示のオプションが与えられます。iframe版の場合は、高さ400px以上の指定でstandard layoutを使っている場合に与えられます。コメントもたした場合には、より目立つ形でFacebookのニュースフィードに書き込まれます。likeボタンに関して、どんな統計情報が提供されますか？
facebook.com/insightsにアクセスして自分のドメインを登録すると、毎日のlike数やlikeしたユーザの層を見ることができます。自分のFacebookページに対するLikeボタンを設置することもできますか？
はい。単純に、likeボタンのhrefパラメータにFacebookページのURLを指定するだけです。どのページのlikeボタンからのトラフィックが多いかを把握するにはどうすれば良いですか？
Add the 'ref' parameter to the plugin (see "Attributes" above).先述の通り、Likeボタンにrefパラメータを指定してください。
例：
<fb:like ref="top_left"></fb:like>あなたのウェブサイトへのバックリンクがクリックされると、リファラURLにfb_refパラメータとfb_sourceパラメータが含まれます。
<iframe src="...&ref=top_left"></iframe>
http://www.facebook.com/l.php?fb_ref=top_left&fb_source=profile_oneline上記のようになります。
Facebookは、どのタイミングでページをスクレイピングするのですか？
Facebookサイト内での表示の為にスクレイピングする必要があります最 新の情報であることを保証するため、24時間に１回スクレイピングします。それ以外にも、Open Graphページの管理者がLikeボタンをクリックした時と、Facebook URL LinterにURLが入力された時にもスクレイピングされます。Facebookは、あなたのサイトのcacheヘッダを見ます。（Expiresや Cache-Controlを見ます）ただし、先の時期を指定してあったとしても、24時間に１度はスクレイピングします。
スクレイパーのuser agentは facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php です。
異なる言語でlikeボタンを表示するにはどうすれば良いですか？
XFBML版なら、読み込むライブラリのパスのen_USを目的のlocale codeに置き換えます。'//connect.facebook.net/en_US/all.js';iframe版をつかている場合、以下のようにsrcのURLにlocaleパラメータを追加します。
src="http://www.facebook.com/widgets/like.php?locale=fr_FR&..."言語を変えた場合、横幅を最適なように調節する必要があるかもしれません。
Likeボタンがad unitやFlashの表示を妨げていますが、どうしたらいいですか？
JavaScriptライブラリを初期化する時にチャンネルURLを指定してください。詳細はこちらに書かれています。Likeボタンを使用すると、こちらの規約に同意したものとみなされます。また、このページで提供されているオプション以外の方法でLikeボタンを変更しないことにも同意したとみなされます。
