Easy Way to add Facebook comment Box on Your Blogger Blog

Facebook comment Box plays an important role in the blogging world. When we visited a Blog and find something really valuable for us then we like to leave a comment on that Blog or for the particular post that we visited. In such sense Facebook comment Box is very valuable and helpful for the readers. The Facebook comment Box is perfect rather than custom blog commenting system. If you are doing blogging on Blogspot blog then you need to add this system manually because this comment box is not available by default. So, in this post i am going to tell you how to add facebook and enable Facebook comment Box for your Blog. In this below paragraph i add some command line and follow this as it is. This is the latest method to add facebook comment section into your Blog.

Create a New Facebook App


First of all you need to create a Facebook App ID for your blog. You can create a Facebook app by visiting to the facebook developers official webpage. Here is the step by step process to create a new Facebook Page for your blog.

Step1: Visit Facebook for Developers Page.

Step2: Create a New app by clicking on the Add a New App green button.

Step3: Select the WWW website version to create your New App for your Blog. If you already have app created on then you can use that or skip that and make a New App id. Once you successfully create an App then you will get access to the app dashboard.

Step4: Now you will able to see your App ID and App secret.  Copy the app iD and save it into your notepad.

Step5:  Go to the settings where you can add your Website name and the link.

By following the above steps you can create a new facebook app id for your Blog. Now here we comes to the most tricky part. so, follow the below steps very carefully.

How to Add Facebook Comment Box to Blogger


Here is the Process to add your Comment box into your Blogger Blog. First of all you need to do some modification on your Blog templates. So, you need to follow the below steps to embedded the the comment box into the below blogger posts.

Step1: First of all make a backup copy of your Blogger template.

Step2: Go to the blogger template and Expand your Widget Templates box. Just Like below Blogger> Design> Edit HTML

Step3: Now search for <html and then press the space bar once and then add the following code.

xmlns:fb='http://www.facebook.com/2008/fbml'

Step4: Next search for the following body tag

<body>

In some cases you may able to see the below code instead of the above one, which is look like this.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Step5: Now you need to copy the below code and paste it after the above codes.

<div id='fb-root'/> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
      appId  : &#39;YOUR-APP-ID&#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>

Put your app ID insted of YOUR-APP-ID, which you created on your facebook app pages. Here is the image how i add the above command line for my blog.

Step6: Now paste the below code just above the </head> tag

<meta expr:content='data:blog.pageTitle' property='og:title'/> 
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='Techmux' property='og:site_name'/> 
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/> 
<meta content='YOUR_APP_ID ' property='fb:app_id'/> 
<meta content='http://www.facebook.com/techmux' property='fb:admins'/> 
<meta content='article' property='og:type'/>

In this code section you can add your own Blog title, your Blog logo and image link, your facebook app id and your facebook page link.

Step7:  Now search for the following command line

<b:includable id='comment-form' var='post'>

Step8: Now paste the below code just after the above line.

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div style='padding:0px 0px 0px 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='650'/></div> 
</div> 
</b:if>

Now save the Template to enable the facebook comment system. Hope this article was helpful for you please leave your comment below.

1 Comment

Click here to post a comment

Your email address will not be published. Required fields are marked *