アメブロにfacebookコメントを付ける


内藤です

アメブロの記事にfacebookのコメントボックスを付けるやり方です。

コメントをもらうと、くださった方のfacebook上でも表示されますので、facebook上で記事を広げてくれることにもなります

まず、facebookのアプリIDを作っておきます。

facebookのアプリIDの作り方

次に、アメブロのフリープラグインに以下を入れます

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></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&appId=アプリID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<script type="text/javascript">
$(document).ready(function(){
var page_url = location.href;
var entries=$(".skinArticleHeader h1 a");
for(i=0;i<entries.length;i++){
var url=entries[i];
title = entries.eq(i).text();
$("div.skinArticleFooter").eq(i).append('<div class="fb-comments" data-href="'+url+'" data-num-posts="5" data-width="410"></div>');
}});
</script >

※アプリIDの箇所を最初に作ったfacebookアプリIDにして、フリープラグインに追加します。

これで表示されるようになります。

(新デザインのアメブロのやり方になります)