2011年7月20日水曜日

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ボタンの色

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










フォームで指定できるパラメーターについて

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の場合、scriptsrcに含まれる言語部分「/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から提供されていますので、設定後このツールを使って確認できます。



Related Posts Plugin for WordPress, Blogger...