How To Add Facebook Comment Form To Blogger Blogs

The Facebook comment box is one of the most useful tool at my blog, www.naijacareerportal.com.ng because it has been increasing my conversations with visitors to my blog. More so, it has been contributing massively to my daily traffic according to my blog traffic analysis. So here in this post I will teach you how to add/integrate the Facebook comment box to blogger in simple steps.

This is the first and the only tutorial around the web that tells you in very easy steps the integration of facebook comments box and blogger (blogspot) blogs even with the latest Blogger Template Designer Layouts. I know that you might have tried to add it to your  blogger blog, with no result, but today you’ll see how to add it in easy steps and it’s 100% working but please be careful and pay attention to all the details.



This is the first and the only tutorial around the web that tells you in very easy steps the integration of facebook comments box and blogger (blogspot) blogs even with the latest Blogger Template Designer Layouts. I know that you might have tried to add it to your  blogger blog, with no result, but today you’ll see how to add it in easy steps and it’s 100% working but please be careful and pay attention to all the details.

STEP 1:  Visit Facebook developer page .

You might be asked to verify your account, choose any of the verification options to complete the verification.
Thereafter you will see a small form, enter your blog name ( you can type any name ).
Then, enter your blog url with an ending slash in Site URL (for example: ogbongeblog.blogspot.com/) and click on "Create application".

Don't forget to put the "/" sign at the end of your blog url as indicated in the picture below.

If successful, you should then see a page displaying your application info. Now copy the App ID as indicated in the picture below and save it in a notepad.

STEP 2:  Login to you Blogger dashboard and navigate to Layout > Edit HTML and tick the small "Expand Widget Templates" box. Using "CTRL+F", search for the code <data:post.body/>  and paste the "comment form code" highlighted below directly under <data:post.body/>  and save the template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='center'><a href='http://www.naijacareerportal.com.ng/'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUvJwKoIXFM6Ezhw67E0wmdcWfUn9NpeVtqIyxuEv64OkI7DyCoM3n5L7uPj5v-82y6eRPPJrKlBGMPsIUQ5hjDrPpVPB4vVjy8cpqurY_QbB1yrg6eEXz2-QX8FFIUFH0ZiofBFDwrDA/s320/app_full_proxy.php.jpg' width='320'/></a></div>
  <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=248757361810338&amp;xfbml=1'/><fb:comments numposts='10' publish_feed='true' width='420' xid='248757361810338'/>
  </b:if>

Replace the APPID and XID in the code above with your APP ID provided from Facebook which you copied in Step 1 and save the template.

You can  also adjust the WIDTH too to any size you want (below 450 is recommended).

After adding the code, your code should now look like:

SAVE your template and view one of the POSTS on your blog. You should see the comment form.

If you want to Hide the Blogger's comment form;  go to: Settings > Comments > Comments, and mark the Hide radio-button and click on "Save Settings".

 GREAT THANKS TO OGBONGEBLOG for this wonderful tutorials