For this trick to be possible you must have a verified facebook account.
1. First go to your blogger account and hide the comments. This can be made by going to : Dashboard - Setup - Comments choose Hide and then Save.
2.Now you have to get your Facebook App ID. For this you will have to go to: Facebook Developpers to generate the App ID.
In the opened window insert in the first box the name of your blog, and in the second one the url of your blog followed by a dash " / ". Then click Create App.
The App ID is the number highlighted in the next image:
3. Now you have to edit your template. Go to: Dashboard - Design - Edit HTML and Click on "Expand Widget Templates". Search "Ctrl+F" and find the following code:
<html
You’ll find it on the top of your code second or third line, and after it add the following code:
xmlns:fb='http://www.facebook.com/2008/fbml'
You must type a space before it and after it; here is an example.
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'
4. Search for: <body> and after it 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>
Change YOUR APP ID to your App id.
5. Now search : </head> and before him add 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='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'/>
Change MY-SITE-NAME with the one you want to appear when a user likes a page.
Change http://google.com/…/blogger_logo.gif with your blog logo, or remove the all tag if you don’t want it.
Change YOUR-APP-ID with your application ID number.
Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.
6. Find: <data:post.body/> and after it paste the next code:
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><img alt='' class='icon-action' height='30' src='http://img413.imageshack.us/img413/4938/capturehm.png' width='150'/></p>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='700'/></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://img225.imageshack.us/img225/4096/lgbigb.png' width='16'/> <b><a href='http://www.artistutorials.co.cc/' target='_blank' title='blogger templates'>Facebook comments for blogger</a> brought to you by <a href='http://www.artistutorial.blogspot.com/' target='_blank' title=''>ArtisTutorial.blogspot.com , Get Yours?</a></b></div>
</b:if>
Change the width , the link in red with your own. Save the template and you are done.
Trick verified with Artisteer 3 made templates.
Post a Comment