Facebookのいいね！ボタンをページにつける

January 5th, 2011

流行のいいね！ボタンをページにつけましたよ。
やり方がいろいろあるんですねえ。

Facebookにコードを作ってもらう方法

Like Button – Facebook開発者のページで、必要な情報を入力して[Get Code]ボタンをクリックすると、iframe版とXFBML版のコードが表示されますので、それをページの好きなところに設置します。

デフォルトだと英語の[Like]ボタンですが、コード中の「en_US」部分を「jp_JA」に変更すると日本語の「いいね」ボタンになります。

英語版：
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="gfds" show_faces="true" width="450"></fb:like>
日本語版：
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:like href="gfds" show_faces="true" width="450"></fb:like>
ちなみに「fr_FR」にするとフランス語版の[J’aime]ボタンになりますね。

iframe版とXFBML版の違い

iframe版

○低スペックのブラウザ、端末に対応している
×機能が限定されている
×高さを手動で設定する必要がある
　→文字サイズを大きくしすぎるとスクロールバーが出る

XFBML版

×JavaScriptの動く端末に限られる
○高機能。できることの幅が広い
○高さが自動で設定される

手動で追加情報を入れる方法

1. AppIDを指定して基本のJSを読み込む

下記のコードをページのどこかに書くことで、ボタンをAppIdと紐づけます。
AppIdはCreate an App – Facebook開発者のページで、いいねボタンを表示させたいサイトのURLを入力して取得します。
下の「### YOUR APP ID ###」の部分を、ここで取得したIDに置き換えて入れます。

<div id="fb-root"></div>
<script>
	window.fbAsyncInit = function() { 
		FB.init({
			appId: '### YOUR APP ID ###',
			status: true,
			cookie: true,
			xfbml: true
		});
	};
	(function() {
		var e = document.createElement('script');
		e.async = true;
		e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
		document.getElementById('fb-root').appendChild(e);
	}());
</script>

2. ボタンを表示させたい場所に所定のタグを入れる

下記のコードを入れた場所に、いいねボタンが表示されますよ。
「### URL ###」に、いいね！したいページのURLに変更します。
<fb:like href="### URL ###" show_faces="true" width="450"></fb:like>
WordPressの場合は下のように書けば自動的にURLが入りますね。
<fb:like href="<?php the_permalink() ?>" show_faces="true" width="450"></fb:like>

3. その他の付加情報をmetaタグで指定する

Open Graph Tagsというmeta情報をheadタグ内に記述します。

コンテンツのタイトルを指定する例：
<meta property="fb:title" content="鍋パーティー＠うつみさんち" />
他にも以下の情報が使えるみたいです。たぶん

og:title: コンテンツのタイトル
og:type: コンテンツの種類。Object typesから選ぶ
og:image: コンテンツをよく表現している画像
og:url: ボタンのほうで指定したのと別のURLを指定する。canonical URLみたいな使い方
og:site_name: サイトの名前
fb:admins: 管理者のFacebook ID。複数指定するときはカンマで区切る
fb:app_id: 上記の管理者IDを使わない場合は、AppIdを入れておくのですね
og:description: ページの簡単な説明

他にもいろいろできそうなんで、ちょっと使ってみて、また書きますね。

へんなウェブ