アメブロ記事から直接facebookでコメントしてもらう方法

投稿日時：2011/01/18 22:01

この記事は約 8 分で読めます。

大丈夫、あなたなら出来る！　
ソーシャル・マーケティング協会代表理事の白鳥友康です。

アメブロに「いいね！」ボタンを設置しようと
いろいろ調べていたらコメントが投稿できるプラグインを発見。
試しに設置してみました。

2011/01/29追記
コメントして頂いたものが、各記事ごとのコメントとして扱われず、
サイト全体へのコメントとなってしまうので、一旦削除いたしました。

2011/02/06追記
不具合を修正したものを改めて作成しました。こちらの記事をご覧ください。「アメブロ（ブログ）記事から直接facebookでコメントしてもらう方法（バグfix版）」

アメブロの記事URL（単独記事ページ）を表示しているときに、
「なうで紹介」「mixiチェック」「ツイートする」ボタンの下に

こんな感じのコメント入力欄を表示します。

ここからコメントをすると、
コメントしてくれたユーザのウォールに投稿されます。

ちなみに「いいね！」ボタンも一緒に表示されるので、
かなり便利だと思います！

以下のスクリプトをフリープラグインに入力します。
<div id="fb-root"></div> <div id="fb-comments"><fb:comments xid="APP_ID" numposts="5" width="420" publish_feed="true"></fb:comments></div>


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
/* facebook init { */
window.fbAsyncInit = function() {
	FB.init({appId: 'APP_ID', status: true, cookie: true, xfbml: true});
};
$(function() {
	var e = document.createElement('script');
	e.type = 'text/javascript';
	e.src = document.location.protocol +
		'//connect.facebook.net/ja_JP/all.js';
	e.async = true;
	document.getElementById('fb-root').appendChild(e);
}());
/* } facebook init */
$(document).ready(function(){
	uri = window.location.href;
	_uri = encodeURI(window.location.href);
	// 記事単独ページのとき
	if (_uri.indexOf('/entry-') != -1) {
		$("#fb-comments").insertAfter("#exLinkBtn");
	// ホームページのとき
	} else if (	(uri.indexOf('http://ameblo.jp/[アメブロID]') != -1) || 
							(uri.indexOf('http://ameblo.jp/[アメブロID]/') != -1)) {
		$("#fb-comments").hide();
	}
});
</script>

<script src="http://connect.facebook.net/ja_JP/all.js#appId=APP_ID&amp;xfbml=1"></script>
「APP_ID」はプラグインを設置する際に
facebookで申請して取得する数字の羅列です。

「アメブロID」は、URLの最初のディレクトリにある文字列。

詳細説明

<div id="fb-root"></div> <div id="fb-comments"><fb:comments xid="APP_ID" numposts="5" width="420" publish_feed="true"></fb:comments></div>
これはfacebookで取得したコード
<div id="fb-comments">にコメント欄を表示させたいので、
この部分は追加しました。

<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script>
後でjQueryを使うのでGoogle様から借りてきます。

<script type="text/javascript"> /* facebook init { */ window.fbAsyncInit = function() { FB.init({appId: 'APP_ID', status: true, cookie: true, xfbml: true}); }; $(function() { var e = document.createElement('script'); e.type = 'text/javascript'; e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); /* } facebook init */ </script>
初期設定開始。
facebookソーシャルプラグインを使うときに必要になる初期設定

<script type="text/javascript"> $(document).ready(function(){


	uri = window.location.href;
	_uri = encodeURI(window.location.href);
	// 記事単独ページのとき
	if (_uri.indexOf('/entry-') != -1) {
		$("#fb-comments").insertAfter("#exLinkBtn");
	// トップページのとき
	} else if (	(uri.indexOf('http://ameblo.jp/[アメブロID]') != -1) || 
							(uri.indexOf('http://ameblo.jp/[アメブロID]/') != -1)) {
		$("#fb-comments").hide();
	} else {
		$("#fb-comments").hide();
	}

}); </script>
そのままでは、フリープラグインの欄に入力しているので、
サイドバーに表示されている状態です。

これを記事本文の下に移動します。

それ以外のページの時は非表示に。

トップページには後で別のものを出したいので、
if文だけ指定してありますが、これは無くてもOK。

<script src="http://connect.facebook.net/ja_JP/all.js#appId=APP_ID&amp;xfbml=1"></script>
facebookコメント欄を表示する外部JavaScriptファイルを呼び出します。
これはfacebookでコードを取得できます。