Sunday, December 23, 2012

9 Customized Facebook Comment Box for Blogger

        2009 was a big year for Facebook Developers as they introduced their best social plugin to the Largest Community, to the World. They were succeeded in that attempt and you will see now in most websites there are Facebook Comment box apart from normal comment box. Adding an fb comment box will also boost your traffic that flows from the fb to your Site. So Are you ready for little Blog Customization ?


Step 1: Disable Default Comments

Let's start with disabling blogger default comments because you might not want to have 2 comments forms. Now to do this, 

  1. Log into Blogger account and go to settings > posts and comments

Next choose  Hide "Show Comments" field  and hit Save Settings

Step 2. Generate your Facebook App ID

To get a facebook comments box in your blogger blog you should generate your own Facebook APP ID/API KEY,

Log into your Facebook and go to
Then click + Create New App at the top right corner of the page.

Enter an application name, check "I agree to the Facebook Terms"  and click "Continue".

After passing a capcha you will get a new form

Fill the following info:

App Namespace: Enter anything but if you use more than one word use "-" as a seperator not space.

App Domain: You must type but if your using blogger custom domain you should enter your domain name.

In the end select "Website" to integrate with facebook. and enter your Blog URL and hit Save Changes.

On the next page Facebook will give you the App ID

Copy Down your App Id from Summary

Step 3. Codes To Add To Your Template

You must add the following codes to your blogger template to ensure that the comments box will work for your blog in the right way.
  • xmlns attribute 

  • Javascript SDK 

  • Open Graph Protocol tags

 Adding the xmlns attribute:

Now go to your Blogger account once again and navigate to, 

  • Template > Edit HTML, hit Proceed and check Expand Widget Templates

  • Using Ctrl+F Search for <html> tag, and before the tag's ">"  greater than mark you should put this below  code to inside it.


Adding the Javascript SDK Code:

  • Search for <body> tag and below/after it paste the following code

<div id="fb-root"></div>
window.fbAsyncInit = function() {
FB.init({  appId  : 'YOUR APP ID',
status : true, 
cookie : true, 
xfbml  : true 
(function() {
var e = document.createElement('script');
e.src = document.location.protocol +
e.async = true;

Change the area highlighted in Green Your App ID  with your App Id found in Second Step

Adding the Open Graph protocol tags: 

Copy the Following code and paste it just before or above </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='YOUR-BLOG-NAME' property='og:site_name'/> 
<meta content='LOGO-URL' property='og:image'/> 
<meta content='YOUR-APP-ID' property='fb:app_id'/> 
<meta content='FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>

Change your Blog name with the Highlighted Maroon Part

Change your blog Logo Url with the highlighted Purple Part

Change your App Id with the Green Part

Change your FB Profile Id with the Blue Part

Step 4. Adding the Comments Box to your Blogger template

Search for the <data : post . body> in your Template, 
when you do that remember to Expand your Widgets by ticking the top-left Corner box.

 If you’re using a magazine style template, you’re likely to have more than one occurrence of this. Using the wrong one won’t make the comment show up. If you’re not sure about which one to use, search for this instead:

<div class='post-footer-line post-footer-line-1'>

Paste the below code just after/below it


<b:if cond='data:blog.pageType == &quot;item&quot;'>
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
<p align='center'>
<div align='center' class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src=' comment.png'/>
<script src=''/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='' width='450'/></div><div align='right'><a href='' target='blank'><small>[Facebook Comment For Blogger]</small></a></div></div></p></b:if>

Finally Put your Cursor to Save Template to Finish the Job

If you want to change your comment box at anytime log on to and click the settings at the rignt.

A Window will pop after it just like this

In Here you can Moderate your Comments Box

Hope this article was Helpful to you and it Was bit longer, my Apologies for It

  Warning  :  Don't Copy from this Post Without Linking Back to the Post


  1. Hello,

    I have been trying to put Facebook Comment box on my blog from the last two days. Tried 3 different methods… BUT, it doesn’t just show up!!! My template is a pinterest themed template (magazine template).. my blog’s link –

    So, I have 3

    Please help me out!! I want it badly and that too, ASAP..!!!

    1. This is one of my Testing zones look at the Facebook comment area,

      I will modify the codes to other templates, you will be able to use it on Before Sunday.

    2. Sorry, I had been away from the computer for quite a long time. Did you figure out why I can't add the facebook comment box to my blog? My blog's link is and the template i have used is called Pinfinity (by SoraTemplates)
      Thanks for replying.
      Mr. B

    3. I have solved the Problem and I will edit this post by adding few options and it will work on yours then, wait until 3/2/2013 and come and see the post.

    4. Problem Fixed: Go through gain in the post and Try it, It will certainly Work.

  2. Great post. I just located your blog and wished to let you know that I have certainly loved reading your blogs. At any rate I’m going to be subscribing to your feed and I really hope you are writing again soon.

    1. Yes I hope to write again in this March, I was tied up with my exams and I'll update this blog for My Loyal Readers every Time. :)

  3. Hey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won't crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn't support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! - it worked.

    In kind, I thought I'd share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results just remove the div tags and give the object some width/height parameters. Hope this helps some of you!

    One more note, the php script grabs the referring URL(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)

    <!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->

    <div class='separator' style='clear: both; display: none; text-align: center;'><object data='' height='' type='text/html' width=''>


    <!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->

    A final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...

    1. Thank You for your Kindness and Hope you'll enjoy the other Posts also :)