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:
Now add the following code just below the above given code:<html
You have to keep space before and after the sentence.xmlns:fb='http://www.facebook.com/2008/fbml'
Now search for the following code:<html xmlns:fb='http://www.facebook.com/2008/fbml' some code...
and just after that add the following code:<body>
Replace ‘YOUR APP ID’ with the APP ID of yours which you got in “Step 2”.<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>
Now Find the following code:
and just above that paste the following code:</head>
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.<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'/>
Now the final part, search for the below code:
and add the following code just above the given code:<data:post.body/>
You can change the width of the comment box, by default i have make it of 450.<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>
0 comments:
Post a Comment