How to add Facebook Comment Box in Blogger

Aug 20, 2013, by admin

Hi all today we are going to see How to add Facebook Comment Box in Blogger hope this will help for you

1.Go  to Facebook Developer’s website

2. Submit Your blog name and blog URL. Keep Site name as your “Blog Title” and Site URL as your “blog address”.

3. Now click on “Create App”.

4- After click on create app, Facebook will ask you to enter Security word “captcha”, just do it and click on “Submit”.

5- After submitting the security check code, you will see this page.

6- Copy the App ID and save it in a notepad.

7- Now go to Blogger Account > Dashboard > Template > Edit HTML > Proceed

8- Backup your template and check “Expand Widget Templates” and then search for this code.

<data:post.body/>
or
<div class=’post-header-line-1’/>

9- Paste the code below <data:post.body/>  or  <div class=’post-header-line-1’/>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<p align=’left’><img alt=” class=’icon-action’ src=’http://1.bp.blogspot.com/_ubwIhqPcR6M/S_bFnzvtkDI/AAAAAAAAA5A/ta5IbGqJZYU/s1600/cmds.png’/></p>
<div id=’fb-root’/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;Your_APP_ID&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
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>
<fb:comments/>
</b:if>

10- Now save Template.

Note: You need to hide default blogger commenting system.

11- So now go to Settings > Comments and select hide and save settings