Facebook comment box for blogger blog

Hi All,

Here is a piece of text from Facebook developers Blog..

Since Facebook Connect launched, we've seen over 6,000 developers make their sites more social using Facebook Connect. One of the most common features we've seen sites add with Facebook Connect is the ability to allow users to log in with a single click and comment with their real name and profile photo from their Facebook account. Sites have seen as much as 40-50% more comments since they launched added these features.

Watch this video to have a more general idea about FB comment box.

 

Now you can imagine what if the comment box is installed on your blog!!!!
11

Here is the simple tutorial for adding Facebook Comment Box to Blogger Blog.

  1. Go to Facebook Developer Page and Enter you Blog Name and Blog URL, select you language and then click Create Apllication button.After this It may ask for image verification.
    Application register
  2. Now an application ID will be generated for your personalised comment box. Note this Application ID.
    4
  3. Now copy the code below and save it in a notepad. Now replace the text APPLICATION ID with the application ID which you noted in step 2.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <h4 id="comment-post-message">Post a comment</h4>
    <div id='fb-root'/>
    <script>
    window.fbAsyncInit = function() {
    FB.init({appId: &#39;APPLICATION ID&#39;, status: true, cookie: true,
    xfbml: true});
    };
    (function() {
    var e = document.createElement(&#39;script&#39;); e.async = true;
    e.src = document.location.protocol +
    &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
    document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
    </script>
    <fb:comments/>
    </b:if>



  4. Now Go to your Blogger Dashboard >Settings >Comments tab and select Hide as shown below. comment-show hide 


  5. Go to Design >Edit HTML tab and check Expand Widget Templates checkbox as shown below. check


  6. Now place the code from Step 3 just after below code in template code 
    (You can find this code by pressing Ctrl+F)

    <data:post.body/>

    Note:- Make sure that you have replaced the text APPLICATION ID with your Application ID noted in Step 2.


  7. Save the template and Now you are done.

Note: Use this Facebook Comment Box wisely at it will hide your Blogger comments.

See Demo here

7 comments:

Gaurav Ahuja said...

This way, the comment box does not show on the main page
Any solution?

Waqar Ahmad said...

@Guarav Ahuja
Yes, This way it will not show comment box on homepage, It will show only when you are on item page (specifice post page).
To show it on every page, remove tag <b:if...> and </b:if>, i.e 1st and 18th line. It will work.

Get. See. Do. said...

the box is on my blog, but when people write a comment, it does not publish it to facebook.

Waqar Ahmad said...

@Get. See. Do.
Your application ID may be wrong. Generate it from http://developers.facebook.com/docs/reference/plugins/comments and use it in the script given in step 3. It will surely work.

Rajalaxmi.C said...

if i remove the tag and , i.e 1st and 18th line. I can see the comment box. But if i comment on the box for a post it will apear in all the posts in that main page. how to avoid this?

Waqar Ahmad said...

@Rajalaxmii
Yes, there is way to do that, Very soon, I'll modify the script and publish it after testing. To get notification, you may subscribe to updates via email.

Jon Adams said...

hi there nice tip... i just used this tut to put the comment box on my page after trying for hours earlier following other tutorials

but i didnt like the fact the comment box would show the same comments on all posts... is there any news on getting a individual comment box for each post yet????

Post a Comment

If you like this post, Please do comment..