Monday, June 4, 2012

Add Facebook Comment Plugin To Blogger Blogspot

Today. i will show you how to add facebook comment box to blog. Facebook Comment Plugin  is one of the very effective unique tools for the bloggers blog as is indulge the user to leave comment or to increase conversations. These comment will work like a facebook wall. So. carefully follows these simple steps to integrate facebook comment to you blogspot blog.

Drawback:-
The blogger will not be able to see their previous comment, sync with existing comment.

Steps for Adding up the comment to blogger:
1.Bolgspot Dashboard :  Land on to the blogger blogspot dashboard. Go to the settings option and hide the existing comment by setting --> posts and comment-->show comment (select hide) and then save the settings.

2.Create app and perform the basic : Go to facebok app, click on the create new app for this you need to visit this URL : http://developers.facebook.com/apps. A new app page will appear - give the app name and check the apps terms and click on the continue button.

 After this, a the app will ask you to captcha verification just fill the displayed characters and click on submit button. Now you are on your setting screen of your app --> copy the app ID.

The Basic info consists of the app domain option ---> use blogspot.com if it's not a custom domain. Use your domain name if you are.
Select how your app integration with facebook --> website --> just give your blog URL for example [ http://facebookcommentstechnogugglet.blogspot.com] --> click on the save setting button.

3.Moderate the meta tags: Go to dashboard --> edit HTML find <head> and just paste the html below
Add application & moderate meta tags as shown here <meta content='YOUR_FACEBOOK_APPLICATION_ID'   property='fb:app_id'/>
in place of 'YOUR_FACEBOOK_APPLICATION_ID'  put app id for example 215391545248675
4. Now add the Add FB comment form to your blog template. Go to template --> Edit HTML --> click on Expand widget template check box.
Find   <data:post.body/> (use shortcut key ctrl + f to find)
Paste the following code just below that
<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>

6. You have to add Facebook namespace to template tag. You need to give FB xml namespace declaration, find <html and modify it to <html xmlns : fb="https://facebook.com/2008/fbml" --> save the template setting.
Manage you comments of your facebook account --> moderate -> select the make every post visible to everyone by default and grammer filter -> automatically correct common grammar mistakes
Click on the save button to save you settings.
To moderate your comment visit : http://developers.facebook.com/tools/comments.

Conclusion :
Hurrey , you have Added Facebook Comment Plugin To Blogger Blogspot  If you still can't see the comment box this might be because of the Non-Fbml Fb plugin and some times coding takes consume time to appear to the blog. You can remove previous fb setting and add the Fbml version.
Thus you need to perfotm these illustrated steps carefully to add/integrate the facebook comment box for blogger listed  over here. If you found these steps valuable then do not forget to share and leave your comment.

6 comments:

  1. Replies
    1. you might have not done the scripting properly...do try it carefully again.

      Delete
  2. Great article, thanks! I'm big fan of Fleshlight toys for men. Cheers!

    ReplyDelete
  3. Ok, I found the problem.. the html must be like this:
    <html xmlns:fb="https://facebook.com/2008/fbml"
    Your version had a space in xlmns, it must be no space.
    Thanks for sharing :)
    Regards: from Philippines

    ReplyDelete
    Replies
    1. Ops yes i did a mistake. Thanks for your correction.

      Delete
  4. Thanks i really found this helpfull.....

    ReplyDelete

There was an error in this gadget