【記録】アメブロにFacebookコメントアプリを設置する方法（CSS編集用デザイン版）

【初めに把握しておくべき情報】

アメブロへのFacebookコメントアプリの実装については、非常に有益な情報が既にありました。

売れる！ホームページの作り方
アメブロ（ブログ）記事から直接facebookでコメントしてもらう方法（その３）
http://ameblo.jp/wisdomdesign/entry-10820140613.html
（以下、「参考サイト」と表記します）

まずはここに掲載してある情報を確認し、実際に実装を試みてみましょう。

※しかし、更新日現在では、一筋縄ではいかない点がいくつか出てきます。

【現在の仕様にあわせた実装方法】

まず、Facebookコメントのタグが以前と変わってしまっています。
以下を比較してみてください。

＜既存＞
<div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=【アプリID】&amp;xfbml=1"></script><fb:comments href="example.com" num_posts="2" width="420"></fb:comments>

＜更新日現在＞
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="example.com" data-num-posts="2" data-width="500"></div>

HTMLとかJavaScriptを触ったことがある方でしたら大丈夫だと思いますが、多くの方は全然違うのでびっくりしてしまうところだと思います。

そして、アプリIDを記載する場所が標準ではなくなってしまっています。

まずは、この2点を解消する必要があります。

１．タグが変わってしまっているところはどうやって対応するか

HTMLとしてはタグの構造自体の変化はないので気にする必要はありません。

参考サイトの【埋め込み用コードＡ】と【埋め込み用コードＢ】は以下のように分けることができます。

＜埋め込み用コードＡ＞
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

＜埋め込み用コードＢ＞
<div id="fb-comments"><div id="fb-root"></div><fb:comments href="%%current_uri%%" num_posts="3" width="420"></fb:comments><!-- /[#fb-comments] --></div>

これで、タグの違いからくる問題は解消されました。

２．アプリIDはどこに記載するか

次に、現状ではなくなってしまったアプリIDをどこに記載するかという問題です。

無理やりタグの中にアプリIDを実装したところ、私の環境ではうまくいきませんでした。

そこで、このブログで実装した方法を取り入れることにしました。

以下のタグを、参考サイトで紹介されているタグの内部に追加します。（追加位置は後ほどご紹介します）

<div id="fb-root"></div>
<script src="//connect.facebook.net/ja_JP/all.js"></script>
<script>
FB.init({
appId : '【アプリID】',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // enables OAuth 2.0
});
</script>
（参考：http://iphone-lab.net/archives/133118）

タグ内の【アプリID】の部分に、本来記述するはずだったアプリIDを埋め込みます。

これで2つ目の問題も解消されました。

３．サイドバーに表示されてしまう現象はどうやって解消するか

本当なら以上の流れで表示されるのですが、テンプレートの種類によってはうまくいかない場合があるようです。

私は「CSS編集用デザイン」というアメブロのテンプレートを利用しているのですが、この場合、参考サイトのタグでは何度やってもサイドバーにFacebookコメントが表示されてしまいました。

参考サイトのタグは、本来サイドバーにあるタグを「出力先」を指定して、プログラムによって吐き出しているのですが、その「出力先」が無い場合はそのままサイドバーに表示されてしまいます。

つまり、テンプレートによっては、参考サイトで指定されている「出力先」が無いわけなのです。

私が出力先を「CSS編集用デザイン」用に対応した全タグをご紹介します。

＜CSS編集用デザイン対応版＞
<script type="text/javascript">
/**
facebookのお知らせ から移動してきた時は、
クエリ文字列なしのURLへリダイレクト
*/
var current_uri = window.location.href;
var fb_notif = current_uri.indexOf("fb_comment_id=");
if (fb_notif != -1) {
var url = current_uri.substring(0, fb_notif);
window.location.replace(url);
}
</script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
var html = '<div id="fb-comments"><div id="fb-root"></div><fb:comments href="%%current_uri%%" num_posts="3" width="420"></fb:comments><!-- /[#fb-comments] --></div>';
html = html.replace('%%current_uri%%', window.location.href);
document.write(html);
$(document).ready(function(){
uri = window.location.href;
_uri = encodeURI(window.location.href);

// 記事単独ページのとき
if (_uri.indexOf('/entry-') != -1) {
$(".articleLinkArea").after($("#fb-comments"));
} else {
$("#fb-comments").hide();
}
});
</script>

以上です。

基本的には、以上のタグをアプリIDだけ入れ替えれば動くはずです。

「サイドバーには表示できたけど、それからうまくいかない」という方の質問であればある程度応えられると思います。

どれだけサポートできるか分かりませんが、同じような状況がおられましたらコメントにて質問を受け付けています。

また、私は今回初めてFacebookソーシャルプラグインを利用しましたので、万が一間違いなどがあれば訂正いたします。
お気づきの点があれば、それもコメントいただければ幸いです。

※このブログでは、モデレータービューが表示されるのですが、アメブロでは表示されていないので、もしかしたら「正しく」はうまく言っていないのかもしれません。