How To Add Facebook Comments Box To Blogger

Facebook is most popular social media site according to Alexa rankings and it stands on second rank among most visited sites around the globe. Integrating different social plugins to your blog and website increases success rate of your online business. We have already discussed integrating Facebook in a website. Now we will be moving forward to explain the method of adding Facebook comments to blogger. In our previous few updates, we also learned to install Disqus and Google Plus commenting systems to blogger. Facebook comments system is another popular social plugin to integrate in website.

Lets have a look on advantages and disadvantages of Facebook comments.

Advantages Of Facebook Comments:

There are multiple advantages of using this plugin to your blog because it is from most trusted and popular social media platform. We are listing some of major benefits of Facebook comments box.

1. Increased Social Interaction:

Facebook is most popular social media platform which is used by billion of people so it might increase people interaction to your blog. Meanwhile more people can comment on your blog.

2. Comments Notifications:

Another important advantage is that whenever a user comments on a post, he receives notifications for that comment until he turns off notifications. It helps to increase page views of your blog improving your SEO score.

3. Comment Moderation:

Comment moderation is most useful tool in any commenting system. Fortunately, comments moderation is possible with Facebook comments box.

They have multiple options to moderate comments. Either you can moderate all comments or moderate comments with restricted words only. There are standard restricted words by Facebook and you can also set custom restrictions. So it provides most advantageous moderator applications.

4. Comments Using Other Services:

Comments can be posted by logging in to other services instead of Facebook. Facebook comments support Yahoo, Aol and Hotmail accounts to comment on.

5. Threaded System:

Discussions are made easier by threaded system. People can also mention other commenters in their comments.

6. Elegant And Responsive Design:

It consists of an elegant and responsive design which is suitable for any device. Thus all users can easily comment on blog from anywhere.

7. Complete Admin Control:

Facebook admin is not just mere a dummy admin but has complete authority and control on his blog. He can control each and every aspect of comments made on his blog including marking comments as spam, deleting spam comments, blocking spammers and much more.

Disadvantage Of Facebook Comments:

This system has no major disadvantage. The only thing which can be taken as disadvantage is only its control from third party servers. Availability of comments box is directly related to stability in Facebook servers which means if Facebook servers are down, your comments box won't load. Well, Facebook is an established company so there are minimum chances of happening this thus we are not declaring it as disadvantage.

Now we proceed towards the method of installing Facebook Comments to blogger.

Add Facebook Comments Box To Blogger:

Below is the step by step method of integrating the discussed system to blogger.

1. First of all get Facebook App ID by creating a Facebook app. We have already created a tutorial on getting Facebook app ID for website.

2. Keep your app ID in front of you.

3. Login to your Blogger dashborard. Go to Template > Edit HTML. Your blog's  XMLtemplate editor will be opened.

4. Click anywhere inside the template window and press CTRL+F. Search for the following piece of code. Normally it is present in first few lines of coding.

xmlns:expr=’http://www.google.com/2005/gml/expr’

5. Just next to this code, paste following code after giving a single space.

xmlns:og=’http://ogp.me/ns#’

6. Now search for </body> tag and just above this tag, paste following script.

<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'FB_APP_ID',
      xfbml      : true,
      version    : 'v2.2';
    });
  };

  (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 = &quot;//connect.facebook.net/en_US/sdk.js&quot;;
     fjs.parentNode.insertBefore(js, fjs);
   }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

Replace FB_APP_ID with your own app ID.

7. After it, search for </head> tag and just above it, paste following code with replacingYour_FB_APP_ID with your own app ID.

<meta content='Your_FB_APP_ID' property='fb:app_id'/>

8. Now find <b:includable id=’comment-form’ var=’post’>  in your blogger template & just below it paste the following code. If you are unable to find <b:includable id=’comment-form’ var=’post’> then search for <div class=’post-footer-line post-footer-line-1′></div> & paste the following code just below it.

<b:if cond='data:blog.pageType==“item”'>
<div style=’padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;’> 
<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1′/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='550'/>
</div>
</div>
</b:if >

9. Click on Save template to save changes in template.

Now you should see Facebook comments on post pages in your blog. If there is still any confusion and something is getting wrong, feel free to ask us in comments. We will try our best to help you out. Stay in touch with HelpITx to get more from us.