How to add Facebook Comment Box in Blogger 2013

8:13 PM Mr. Alex
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'/>

Paste the code after <div class='post-header-line-1'/>


<div class="fb-comments" data-href="http://example.blogspot.com/" data-width="470"></div>


http://example.blogspot.com/ with you blog

9- Paste the code before </body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
Note: Change YOUR_APP_ID with your APP ID which provided from Facebook.
WWW.YOUR_DOMAIN.COM  with your blog.
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 like this:

It has been completed. Enjoy!

Popular Posts