How to add Facebook Comment Box to Blogspot Blog

Facebook is such a platform that has been designed as a multiple web API. You can find lots of Facebook API at “www.developer.facebook.com” The basic usage of these APIs is Embedded Comment Box, Like button for Website and apps, Share button, Embedded Post and Embedded Messanger for websites. In this article, we will learn How to Embed or Add Facebook Comment Box to Blogger Based site.

Advantage of Facebook Comment Box

Embedding Facebook Comment Box is very effective for build a strong communication with your blog reader and you(Blog Admin). Because 80% of people use Facebook who is connected to the internet. So that they can easily comment on your blog without any extra login or signup for commenting on your blog.
On the other hand, The built-in the comment box for blogger is not like a professional comment box and the user must have a blogger account or live journal account or some other account to comment on your blog. So that, most of the reader avoid commenting who don’t have the blogger or live journal account already.
Facebook comment box always feedback a good user experience for any website or blog. And if you install or embed the comment box then you can get a good reader interaction.

Steps to Embed Comment Box

Follow the simple and easy step given below for embedding the facebook comment box on your based website or Blog.

Step1: Create a Facebook Apps from the Facebook Developer Site

Go to www.developer.facebook.com then login into your Facebook account if you are not logged in already. Click on create a new Apps button. A popup window will appear.Adding Facebook Comment Box in BloggerEnter your Apps name I used here Test Apps as a Demo. Give the Apps name by your own. Basically, give the website name in which you want to embed. Then Click on The App Review tab from the left menu list. Then toggle on the button “Make apps Public” in order to public access to your apps for commenting. In this case, you will be asked the website category. Select as your own and then click continue. You are now ready to go to the 2nd step.

Step2: Adding FB Apps info in Blogger

Log in to your Blogger Dashboard. Click on the Template tab and then edit HTML. Now press Ctrl+F button on the keyboard. Search for <html this generally located at the first of the template code. Copy and paste xmlns:og='http://ogp.me/ns#' after <html. The HTML code will look like;

<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

Now search for <body> or <body and then paste the code given below after body tag:

 <div id='fb-root'/> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
      appId  : &#39;YourAppIdHere&#39;, 
      status : true, // check login status 
        cookie : true, // enable cookies to allow the server to access the   session 
      xfbml  : true  // parse XFBML 
    }); 
  };
    (function() { 
    var e = document.createElement(&#39;script&#39;); 
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;; 
    e.async = true; 
      document.getElementById(&#39;fb-root&#39;).appendChild(e); 
    }()); 
</script>

Now go back to facebook app dashboard that you just created now. You will notice an app id. Copy this and replace with YourAppIdHere with the above code in line number 5. 

Search for </head> then copy and paste the meta tags above the </head> tag given below.

<meta expr:content='data:blog.pageTitle' property='og:title'/> 
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='AppIdhere ' property='fb:app_id'/> 
<meta content='progracoding' property='og:site_name'/> 
<meta content='http://www.facebook.com/rakepoint' property='fb:admins'/> 
<meta content='article' property='og:type'/>

Now replace your App ID with AppIdhere on line 3, as well as Replace your Blog or website name with Progracoding on line 4. 

Step3: Adding Comment Box (Final Step)

In this final step you have to put the comment box code below your post. To do this again search for <div class='post-footer-line post-footer-line-1'> then paste the code given below;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div style='padding:2px 3px 2px 3px; margin:2px 3px 2px 3px;'><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='100%'/>
    </div>
  </div>
</b:if>
<div style="position:fixed; bottom:0px; left:0px; color:#898989; font-size:12px;"><a href="https:www.progracoding.com">Get Widget</a></div>

Congratulations! You have successfully added facebook Comment box to your Website.