【記録】アメブロにFacebookコメントアプリを設置する方法(CSS編集用デザイン版)
先日、このブログのバージョンアップを行った際にFacebookのコメントアプリを導入しました。
その勢いで、アメブロの方にも設置しようとしたところ、巷の情報でうまくいかない点があったので、「こうやったら出来ました」という情報を公開したいと思います。
恐らくFacebook側の機能更新スピードが早いため、すぐに情報が古くなってしまうのかもしれません。
また今回はアメブロ側の更新が原因と思われる症状(最新のテンプレに対応できない)もありましたので、その対応も実施しています。
【初めに把握しておくべき情報】
アメブロへのFacebookコメントアプリの実装については、非常に有益な情報が既にありました。
売れる!ホームページの作り方
アメブロ(ブログ)記事から直接facebookでコメントしてもらう方法(その3)
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】&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点を解消する必要があります。
1.タグが変わってしまっているところはどうやって対応するか
HTMLとしてはタグの構造自体の変化はないので気にする必要はありません。
参考サイトの【埋め込み用コードA】と【埋め込み用コードB】は以下のように分けることができます。
<埋め込み用コードA>
<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>
<埋め込み用コードB>
<div id="fb-comments"><div id="fb-root"></div><fb:comments href="%%current_uri%%" num_posts="3" width="420"></fb:comments><!-- /[#fb-comments] --></div>
これで、タグの違いからくる問題は解消されました。
2.アプリ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つ目の問題も解消されました。
3.サイドバーに表示されてしまう現象はどうやって解消するか
本当なら以上の流れで表示されるのですが、テンプレートの種類によってはうまくいかない場合があるようです。
私は「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>
<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>
<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ソーシャルプラグインを利用しましたので、万が一間違いなどがあれば訂正いたします。
お気づきの点があれば、それもコメントいただければ幸いです。
※このブログでは、モデレータービューが表示されるのですが、アメブロでは表示されていないので、もしかしたら「正しく」はうまく言っていないのかもしれません。
コメント
TM
上記アメブロの運営等のお手伝いをしています。
Facebookコメントアプリを設置したく、ネット検索でこちらの情報を見つけ、参考にさせていただいています。
早速ですが、<CSS編集用デザイン対応版>は、アメブロの「ブログデザインCSS」のにどこに貼り付けるのでしょうか?
教えていただけると助かります。よろしくお願いいたします。
マス風
>TMさん
コメントありがとうございます。
ブログを拝見させていただきました。
適用中のデザインは「CSS編集用デザイン」になっているでしょうか?
拝見させていただいたところ「CSS編集用デザイン」ではなく、
別のテンプレートを使用されている気がします。
その場合は、この記事の内容を使用してもうまく行かないはずですので、
別の方法を取ることをオススメいたします。
この記事でも紹介させていただいた白鳥さんの記事が従来のデザインを前提に説明されていますので使えると思いますよ^^
http://ameblo.jp/wisdomdesign/entry-10820140613.html
ちなみに<CSS編集用デザイン対応版>は、CSSに貼付けるのではなく、「サイドバーの設定」の「フリープラグイン」の中に記述します。
松田俊輔
はじめまして、ネット検索で伺いました。
お言葉に甘えて、質問させていただきます。
サイドバーに表示させるところまではうまくいったのですが、そこから先がつまずいています。
http://ameblo.jp/kata39/entry-11479705582.html
よろしくお願いいたします。
マス風
松田さん
コメントありがとうございます。
少し拝見させていただいたところ、
現在使用されているアメブロのデザインが「CSS編集用デザイン」ではないような気がします。
上記の参考ソースは、CSS編集用デザイン用に作り替えて修正しています。
上でコメントいただいた方と同様の状態だと思います。
この記事でも紹介させていただいた白鳥さんの記事が
従来のデザインを前提に説明されていますので使えると思います!
http://ameblo.jp/wisdomdesign/entry-10820140613.html
ご参考になれば幸いです。
マス風
松田さん
コメントありがとうございます。
少し拝見させていただいたところ、
現在使用されているアメブロのデザインが「CSS編集用デザイン」ではないような気がします。
上記の参考ソースは、CSS編集用デザイン用に作り替えて修正しています。
上でコメントいただいた方と同様の状態だと思います。
この記事でも紹介させていただいた白鳥さんの記事が
従来のデザインを前提に説明されていますので使えると思います!
http://ameblo.jp/wisdomdesign/entry-10820140613.html
ご参考になれば幸いです。
松田俊輔からマス風への返信
コメントありがとうございます!
返信遅くなってしまいましたm(__)m
白鳥さんの記事を読んでうまくいかずに、こちらにたどり着きました。
「CSS編集用デザイン」を使っていますが、CSSをカスタマイズしているのが原因ですかね?