How To Add Facebook Comment Box To Blogger Blog

06:25 Posted by LazyGoys

Here is good news for every one who is using the Blogger Platform for their Blog/Site. Facebook has introduce comment section in there tools, so the any website /blog can use that for there comment section and the visitors also will find easy to comment on article because as we all know “Facebook is lifeline of all people.” recently i found one site which contains comment section in facebook style so i search on net and finally found how to add it in blogger. so here you can insert it in your blog.

How You Can Add It In Your Blog?

Step 1:
Disable the default comment section:

Go to your Blogger account.
Than go to Setting >> Comment.
Than Choose “Hide” option for not to display the by default comment.
Save your setting.

NOTE : You can display your default comment with the new Facebook Comment also.depends upon your personal choice.

Step 2:
Get you facebook APP ID:

Go to the Facebook Developer Page.
Insert your “Site Name” , “Site URL” and Language.
Click on “Create App”.
and Copy your APP ID

NOTE : Your website URL should include “ / ” at the end of the URL like “jeetdholakia.blogspot.com/”

Step 3 :
Now the coding part that will add this comment box to your blogger blog:

Go to Design >> Edit HTML >>Expand Widget Code.
And Find the following code:

<html

Now add the following code just below the above given code:

xmlns:fb='http://www.facebook.com/2008/fbml'

You have to keep space before and after the sentence.

<html xmlns:fb='http://www.facebook.com/2008/fbml' some code...

Now search for the following code:

<body>

and just after that add the following code:

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId : 'YOUR   APP ID',
      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('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>

Replace ‘YOUR APP ID’ with the APP ID of yours which you got in “Step 2”.
Now Find the following code:

</head>

and just above that paste the following code:

<b:if cond='data:blog.pageType == "item"'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='MY-SITE-NAME' property='og:site_name'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

Make sure your change MY-SITE-NAME with your site name, YOUR-APP-ID with the id that you got andYOUR-FACEBOOK-PROFILE-ID with your own facebook profile id.profile id is user id.
Now the final part, search for the below code:

<data:post.body/>

and add the following code just above the given code:

<b:if cond='data:blog.pageType == "item"'>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div>
</b:if>
<a href="http://jeetdholakia.blogspot.com/2011/04/how-to-add-facebook-comment-box-to.html" target="_blank">Get This Widget</a>

You can change the width of the comment box, by default i have make it of 450.

Tags: Blogs And Websites

Share your views...

0 Respones to "How To Add Facebook Comment Box To Blogger Blog"