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, 
         Mostly <html present in TOP 5 Lines of HTML code.
2. Paste the Below Code after to <html

  • 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 +   '//';     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'/>
    <meta   expr:content='data:blog.title' property='og:title'/>
    <meta   expr:content='data:blog.homepageUrl' property='og:url'/>
    <meta   content='Blogknol' property='og:site_name'/>
    <meta   content=''   property='og:image'/>
    <meta content='190533384332333'   property='fb:app_id'/>
    <meta content=''   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=''/></p> <script src=''/> <div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url'   expr:xid=''/></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='' width='16'/> <b><a href='' target='_blank' title='blogger templates'>Facebook comment Box </a>  brought to you by <a href='' target='_blank' title='blogger tips and tricks'></a></b></div> </b:if>

    By : Sooji


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

      can i see Demo site for this tutorial?

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

    3. Thanks very much, i'm glad, it works successfully in my blog @


    Type your Comment Here...!