Facebook has become the most famous social website in today's time. So many of bloggers wish to add facebook comment box in their blog. In this tutorial you are going to learn How to add a facebook comment box in blogger.
What is facebook comment box and what are benefits of using it: Embedding a facebook comment box will alow your users to do comments on your blog posts by logging in facebook account. Benefit of using facebook comment box is that the comment done by your user will also publish on the timeline of his fb account which will ultimately advertise your blog in a indirect way.
Step 1: Disable default comments.
Go to settings>> Comments>> Choose hide option in comments and save the settings.
Step 2: Make a comment box app in facebook.
>>just go to this page, facebook developers
>>then click + Set Up New Application
>>enter your application name, (any of your choice)
>>and check agree and click Create Application
then click on Connect tab
in the newly opened page fill the following info:
Connect URL : Enter your blog url and you must enter it with an ending dash.
(for example: http://crackstrick.blogspot.com/) .
Base Domain you must type blogspot.com
then click strong>agree and click Save Changes
on the next page facebook will generate you alot of info. you’ll need only one line, it’s App ID:
just copy it and keep any where, we’ll need it in the next steps. please see the following image to see where you’ll find your facebook App ID:.
Step 3: Add the following codes in your blog
Go to blogger layout >> edit HTML >> check the Expand Widget Template
Finf the following code by pressing " Cntrl + F " in your browser.
<html
and add the following code just after it by adding a space in b/w both of them.
xmlns:fb='http://www.facebook.com/2008/fbml'
For example
<html expr:dir="data:blog..............2005/gml/expr" xmlns:fb="http://www.facebook.com/2008/fbml">
Now search for the
<body>
and after it add the folllowing 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 the YOUR APP ID place with your facebook app ID (digits).
Now search for the
</head>
and add following code just before it
<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='http://google.com/help/hc/images/logos/blogger_logo.gif'
property='og:image'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
Replace my site name with your blog name, Your app id and Your facebook profile ID with your own fb address (e.g. www.fb.com/salaria.arun )
Now find the following code
<data:post.body/>
and add the following code just after it
<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title'
expr:href='data:post.url'
expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px;
padding:3px;width:100%;'> <img alt='' class='icon-action'
height='16' src='http://allblogtools.com/imgup/1-2010/
allblogtools-blogger-templa.gif' width='16'/> <b><a href=
'http://www.crackstrick.blogspot.com/2013/03/how-to-add-facebook-comment-box-in.html ' target=
'_blank'
title='crackstrick'>Crackstrick Facebook comments for blogger</a>
brought to you by
<a href='http://www.crackstrick.blogspot.com/' target='_blank'
title='OllEngg'>ollengg.com ,
Get Yours?</a></b></div>
</b:if>
To change the width of your comments box, change 450 to what ever you want, according to your blogger template.
After adding all this save your template.
Hope you will like this post and it will definitely helps you to increase the beauty of your blog.All the best.
0 comments:
Post a Comment