Facebook いいね！ボタンの設置方法

前回は、Twitter のツイートボタンの設置方法について説明した。

今回は、Facebook いいね！ボタンの設置方法について説明する。

Facebook いいね！ボタンは、Twitter のツイートボタン同様に、http://www.facebook.com/ より公式のものが提供されている。

http://developers.facebook.com/ にアクセスする。

[サイトにFacebookを統合] -> [Social Plugins] -> [Like Button]　へ移動する。

いいね！ボタンの英名が "Like Button" にあたる。

Twitter のツイートボタン同様に Web から、パラメーターを入力し、[Get Code] をクリックすると、コードが表示される。

いいね！ボタンのプレビューは、"Like" と英語表記されるが、コードをサイトに埋め込めば "いいね！" と日本語表記される。

コードは、iframe 版と XFBML 版が選択可能だが、"Open Graph Tags" に詳しくなければ、iframe 版のコードをコピーし、自分のサイトにペーストする。

いいね！ボタンを各記事毎に動的にレンダリングする場合は、以下のプロパティを記事に対応させる。
(ツイートボタンとはことなり、URL の GET パラメータに値を設定する。)

• http://www.facebook.com/plugins/like.php?href=: 記事のURL (=permalink) を設定する。URL は、urlencode する。

その他のプロパティの詳細は、http://developers.facebook.com/docs/reference/plugins/like で説明されているので、そちらを参照のこと。

また、XFBML 版を使うと、記事の XHTML に "Open Graph Tags" をに埋め込む必要がある。この方法は、手間はかかるが、記事に対応する画像を設定できるなど、きめ細やかな設定が可能。

mixi でも "Open Graph Tags" がサポートされている。

以上