How to Install Facebook Responsive Comments on Blogger

How to Install Facebook Responsive Comments on Blogger
How to Install Facebook Responsive Comments on Blogger - Still discussing about comments, Arlina Design's second tutorial today will share how to post responsive Facebook comments on blogs. The benefit of posting a Facebook comment on this blogger allows visitors to comment directly on the article he read using a Facebook account.

For those who want to try it, please follow the steps below

How to Install Facebook Responsive Comments on Blogger


1. Add the facebook meta tag below in the template just below the <head>
<meta content='Kode ID Facebook admin' property='fb:admins'/>
<meta content='Kode ID Aplikasi Facebook' property='fb:app_id'/>
Note: If you have implemented the steps above, please skip to the next step

2. Add the code below before </ head>

<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
var url = location.protocol+'//'+location.host+location.pathname;
var containercm_width = $('#container-commentfb').width();
$('#container-commentfb').html('<div class="fb-comments" ' +
'data-href="'+url+'"' +
' width="' + containercm_width + '" data-num-posts="10"></div>');
FB.XFBML.parse( );
});
//]]>
</script>
3. Then add the code below just below the <data: post.body /> code on the post page
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>
4. Save the template.

To display the Facebook comment count in the index and post pages, please add the code below in the post meta markup or post info according to the template used:
<a expr:href='data:post.url + &quot;#fb-comment&quot;'><span class="fb-comments-count" expr:data-href='data:post.url'></span> facebook comments</a>

So the tutorial on How to Install Facebook Responsive Comments on Blogger, hopefully useful.

Post a Comment

Previous Post Next Post