自分のサイトにFacebookのコメント欄を表示する(fb:comments)

お久しぶりです。あけよろです。
そんなわけで、最近はFacebookにはまっています。

で、いろいろ作ったりして、いつか実装したいな・・・と思っていた機能がありました。
Facebook 開発者のドキュメントの下のほうにあるディスカッション。
これって、ソーシャルプラグインにならないのかなぁ・・・と。

あれこれ悩みながら、ドキュメントを見たりしていて・・・・ふと、fb:commentsをいじっていたら・・・

できました。(笑)

<fb:comments href="http://xn--cbkalj9885c9m4a.net/" />

fb:like-boxのように、hrefにすることでサイト指定が可能・・・というだけでなく、別のプラグインになります!
なんなんだ!?fb:comments!!

しかも、コメント管理画面から管理者が校閲できるし!
しかもしかも!そこの設定次第でfacebookだけじゃなく・・・twitterなどの他のアカウントからもコメントができる!!

現在、1日だけなぜか公開されていたドキュメントが消えちゃっているので、これがいつまで可能かわかりませんが・・・
できれば、このまま・・・もうちょっとパフォーマンスをよくして、正式リリースしてほしい!!
ううん、正式じゃなくてもいい。・・・消えなければ。(笑)

ちなみに、これはそのコメント対象のページのOpen Graph Protocolの情報を見るみたいなので、今後はけっこう重要になってきますよ!OGP!!
・・・たぶん。

そんなわけで、ちょっとした発見だったので勢いで書いてしまいましたが、
今年もよろしくお願いします。

追記 2011-01-19

ちなみに、これはそのコメント対象のページのOpen Graph Protocolの情報を見るみたいなので、今後はけっこう重要になってきますよ!OGP!!

と、書いたのですが・・・どうやら、hrefのfb:commentsはURLは見てくれないようです。
hrefのURLをそのまま使うため、そのままペタッと貼り付けるだけでは不要なパラメーターまで持ってきてしまううえに、同じ記事なのに違うページとみなされて、コメントが全部見れなかったりします。

これはいけない!!

なので、これを回避するために・・・URL Lintを使いましょう。
jQueryで書くと、こんな感じです。

// URL Lintで正規化されたURLを持ってくる
var targetUrl = "http://xn--cbkalj9885c9m4a.net/?aaa=bbb&ccc=ddd";
$.ajax({
	url: "http://developers.facebook.com/tools/lint/?format=json&url=" + encodeURIComponent(targetUrl),
	type: "GET",
	dataType: "jsonp",
	success: function(res){
		var url = "";
		for(var infoIdx in res.info){
			var data = res.info[infoIdx];
			log("type:" + data.type + ",message:" + data.message);
			if(data.type == "URL"){
				url = data.message;
				break;
			}
		}
		
		var fb_comments = ['<fb:comments href="', url , '" />"].join(""); 
		$("#fb-comments").html(iframe);
		FB.XFBML.parse(document.getElementById("fb-comments"));
	},
	error: function(err){
		alert("エラーでした。");
	}
});

ちょっとめんどくさいなぁ・・・。。。