100 % working - can't afford demo
The usual comment section what we have with blogger can be now replaced with the facebook's comment box , so that your friends and other fan of yours in facebook have a chance of commenting to your blog more easier than it has to be. please follow the steps given below carefully
Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.
Step 2: Next step is that you can disable blogger's default comment box or you can leave it as it is. But many don't want two comment sections to crowd up on their page, if so please goto settings>> comments and select hide -> save settings.
Step 3: Log into your face book account or goto http://developers.facebook.com/setup/ and then log in.
Step 4: Then fill the blank fields with site name , sit url and language >>click Create Application Step 5: Then, look for the application id and copy the id and paste it in a notepad for further use.
Step 6: Now goto edit html in your dashboard and expand widgets, Search for
<html , or simply it will be the first code in the top after xml version and doctype. and add the below code near it
xmlns:fb='http://www.facebook.com/2008/fbml'
It should look some thing like this
<html xmlns:fb='http://www.facebook.com/2008/fbml'
expr:dir='data:blog..............2005/gml/expr' >
Step 7: search for <body> and paste the below code after it
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ' 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>
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ' 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>
Step 8: Replace the application id you made a note from the facebook and paste it with the APP ID in the above code, DONOT FORGET IT.
Step 9: Now copy the code below, and paste it above </head>
<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='SITE-NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='APP-ID' property='fb:app_id'/>
<meta content='FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
Finally, dont forget to change the following in the above code SITE-NAME,APP-ID,FACEBOOK-PROFILE-ID
step 9: look for the code
<data:post.body/>
and paste the code given below
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><img alt='' class='icon-action' height='51' src='your own image here' width='331'/></p>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='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='yoursite/img.gif' width='16'/> <b><a href='http://www.your-blogger.blogspot.com/' target='_blank' title='blogger templates'>Facebook comments for blogger</a> brought to you by <a href='http://www.wierdwalker.com/' target='_blank' title='blogger templates'>wierdwalker.com , Get Yours?</a></b></div>
</b:if>
<p align='left'><img alt='' class='icon-action' height='51' src='your own image here' width='331'/></p>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='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='yoursite/img.gif' width='16'/> <b><a href='http://www.your-blogger.blogspot.com/' target='_blank' title='blogger templates'>Facebook comments for blogger</a> brought to you by <a href='http://www.wierdwalker.com/' target='_blank' title='blogger templates'>wierdwalker.com , Get Yours?</a></b></div>
</b:if>
Replace http://www.your-blogger.blogspot.com with your blog
Remember to replace the red shaded item text with this one & quot;item & quot; [remove the space between & and quot;]
It should look like this
thats it.
1 comments:
Thanks! the new fb comments are the same 4 all post but ur tutorial r the best becoz it shows different comments for different post. Ive been looking this for months... Thanks Agaian! ^_^
Post a Comment
Have anything to say? dont spam please..