Friday, 21 November 2014

How To Add Facebook Comment Gedget In Blog


Now you can use Facebook comment box in your Blog. Facebook gives us an opportunity that you can embed Facebook comment plugin code to your website or blog. Any visitor can comment on your blog's post by his/her Facebook ID.

Why You Should Add Facebook Comment Plugin?

Facebook is the world's number one Social Media website. Every one uses Facebook. Even when a person is doing research or Blogging or any work Facebook is usually open in a tab. So when user comes to your web page he can comment as his Facebook ID. It makes your Blog a forum and Social.

Steps to Add Facebook Comment Box Plugin

You have to follow some simple steps to add Facebook Comment box widget to your web page. First you have to create your Facebook Developer ID, after that you have to add some HTML and CSS codes to your template with some amendments.

How To Make Facebook Developer ID?
To create your Facebook Developer ID you have to Follow following steps

1: Go to

2: Click on "Register Now"

3: A new window will be open switch to "Yes" and hit next.

4:After that a new window of "Register as Facebook Developer" will be open for confirmation. Enter your phone number and hit on "Send as Text" you will receive a confirmation code. Enter this code in confirmation code box and click on Register.
(Facebook may not ask you about confirmation, but mostly it requires confirmation)

5: Now Go to
and click on "Create a new App"

6: After that new window will be open which will need your app information. Give your Website url in Display Name and Title of your Website in Name space. How ever you can assign any name space you want. But don't give spaces and don't use Upper case (Capital Alphabets) in name space. Hit Create app ID and enter security Check code.

7: Now you have done the Registration of Facebook Web Developer ID. On new window i.e App Tab there will be your App ID and App Secrete. You need your App ID. Copy app ID and paste it on note pad.
Now it's time to add Facebook comment Box to Your Blog.

Add Facebook Comment Plugin To Your Blog

Just Follow the following Steps to add Facebook Comment Box in your Blog.

1:Open → Go to Template → Go to edit html.

2: Search for

Give a space after the <html and paste the following code after space
you can search any thing in Template html by pressing "Ctrl+F"
(Space is necessary) 

3: Find
and if it is not available find
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
(Some template defines Body by the tag <body> while in some templates "<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>" is present instead of <body> so hace to find any of these.)

4:After that <body> or <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> place the following code.
 <div id='fb-root'/>
    window.fbAsyncInit = function() {
      appId  : &#39;Your-App-ID&#39;,
      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(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//;;
    e.async = true;
Amendment: Replace "Your-App-ID" with your app id that you have pasted in note pad.

5:Now find the
<b:includable id='comment-form' var='post'>
and after that place the following code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src=''/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'></a></script>>Get this <a href="" rel="nofollow" >Add Facebook Comment Box Widget To Blog Widget</a>
 Amendment: You can change the appearance of comment box by changing "light" with "dark"similarly you can also adjust width. But i prefer not to change colour scheme. Dark will look awkward.

6: Hit Save and You have done!

If you face any trouble feel free to ask.

Written by

Dawood Bukhari is a young blogger and passionate researcher. He writes articles on bloggging,SEO,Hacking and Computer Technology Follow him @ Twitter | Facebook


Post a Comment


© 2013 Grasp Info. All rights resevered. Designed by Graspinfo

Back To Top