Sep 20, 2011

Label: , ,

Add Facebook Comments Box to Blogger

Comments are an integral method of interacting with visitors in a meaningful way. They are an opportunity to engage in productive conversations and build new relationships. You want to be accessible, but the ever present problem of comment spammers must be dealt with. In order to avoid Anonymous spammers, setting your blog to Registered users is helpful. Unfortunately, a good number of visitors may not have the required account.

The Facebook comments box is a convenient way to expand comment accessibility. Facebook has the largest base of users in the world and their reach continues to grow. Chances are readers have either a Facebook account or one Blogger accepts. In this article, I'll show you how to add Facebook comments along side Bloggers built in system.




To install apps facebook comment box on your blog. You can visit the facebook plugin to get a code.

If you already get the code. Login to you Blogger dashboard and navigate to Layout > Edit HTML and check on Expand Widget Templates. Search for the code <data:post.body/>  and paste the code below <data:post.body/>  and save the template.

If you want the comment box appear in the post / page only, add the code: <b:if cond='data:blog.pageType == &quot;item&quot;'> ......</b:if>.

The code look like this :

<b:if cond="data:blog.pageType == &quot;item&quot;">
<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="http://your.blogspot.com" data-num-posts="2" data-width="500"></div>
</b:if>

Note: If you want to comment each page is different, replace the code: data-href="http://your.blogspot.com" with expr:data-href="data:post.url".

To moderate, you need to list yourself as an admin. To do this, simply include open graph meta tags on the URL specified as the href parameter of the plugin.

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>
Put that code  below <head>.

Live Demo


Source: http://bungtutor.blogspot.com/2011/09/how-to-add-facebook-comments-box-to.html

Related Posts





No comments:

Post a Comment