Add facebook comment Box in Blogger Blog

How to add Facebook comment Box in your Blog instead your default blogger comment Box. s a sample view check out my comment box at the bottom of this Post.You can feel the difference.You can Reply to friends Comments.Moderation is not available .

Create a Facebook Application 
  • You should have a Facebook app.
          To create new Facebook app, go to Facebook Developers 
  1. Fill Up the Site Name with your Blog Name, Site URL with your Blog URL .
  2. Now Solve te Security Check.
  3. Now Copy the App ID





 Adding Facebook Code into Blogger

Adding xmnls Attribute 
  •           Now,  Go Back to Blogger Dashboard
Go to Design >>EDIT HTML . where you are able to edit your Blog template and change  design.So better back Up your HTML Code.
  1. Now Search For, 
<html
         Mostly <html present in TOP 5 Lines of HTML code.
2. Paste the Below Code after to <html
xmlns:fb='http://www.facebook.com/2008/fbml'


  • Now Adding SDK code into HML code.
  1. Search For Below Code.
  2. <body>
  3. Copy the Below Code and pate after to <body>
  4. <div id="fb-root"></div> <script>     window.fbAsyncInit = function() {     FB.init({       appId  : '190533384332333',       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('script');       e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';     e.async = true;       document.getElementById('fb-root').appendChild(e);     }()); </script>
  5. You must Replace the RED color App ID with your App ID from the above code.
  • Add Open Graph Protocol
  1. Copy the Below Code and Paste it Before </HEAD>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta   expr:content='data:blog.pageTitle' property='og:title'/>
    <meta   expr:content='data:blog.url' property='og:url'/>
    <b:else/>
    <meta   expr:content='data:blog.title' property='og:title'/>
    <meta   expr:content='data:blog.homepageUrl' property='og:url'/>
    </b:if>
    <meta   content='Blogknol' property='og:site_name'/>
    <meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
    <meta content='190533384332333'   property='fb:app_id'/>
    <meta content='http://www.facebook.com/profile.php?id=100002283984118'   property='fb:admins'/>
    <meta content='article'   property='og:type'/>
    3.You Must Replace the Red font in the above code with your Site Name,App ID and Profile ID.

    Adding Comment Box into Blog
    1. Search For,
    2. <data:post.body>
    3. Post the Following Code after to it.
    4. <b:if cond='data:blog.pageType == &quot;item&quot;'> <p align='left'><img alt='' class='icon-action' src='http://b.dryicons.com/images/icon_sets/blue_extended_icons_set/png/64x64/user_comment.png'/></p> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url'   expr:xid='data:post.id'/></div> <div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://1.bp.blogspot.com/_ubwIhqPcR6M/SxWsyifHBII/AAAAAAAAATs/BvNXdrGju4E/s1600/email.png' width='16'/> <b><a href='http://www.blogknol.blogspot.com/' target='_blank' title='blogger templates'>Facebook comment Box </a>  brought to you by <a href='http://www.blogknol.blogspot.com/' target='_blank' title='blogger tips and tricks'>Blogknol.blogspot.com</a></b></div> </b:if>

    By : Sooji
    Category:

    4 comments:

    1. Thanks, i will try to add facebook comment in my blog.

      can i see Demo site for this tutorial?

      ReplyDelete
    2. Thank you very much!! great tutorial, very helpful!! all the best :)

      ReplyDelete
    3. Thanks very much, i'm glad, it works successfully in my blog @
      www.freebrowsingtime.blogspot.com

      ReplyDelete

    Type your Comment Here...!