Step 1.
Go to Blogger's Dashboard and then to your blog's Layout > Design > Edit HTML tab and check "Expand Widget Templates".
Step 2.
Find the HTML attribution marked in bold:
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>After this add XML namespace attribute:
xmlns:fb='http://ogp.me/ns/fb#'
Step 3.
Find
<body> (or <body expr:class='"loading" + data:blog.mobileClass'> for templates based on Blogger's Template Designer) and immediately after it add the script:<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>Step 4.
Find
<data:post.body/> and immediately after it add the standard button snippet shown below:<b:if cond='data:blog.pageType != "static_page"'> <div class='like'> <fb:like expr:href="data:post.url" send="true" show_faces="true" width="450" font="arial"></fb:like> </div> </b:if>
You will notice that width of 450px is mentioned to render this button correctly for standard button only. If you are thinking to use other button layouts, then change the width accordingly, which is explained below in attribution part.
Step 5.
When it's all done, save your template.
For more information, please refer to http://developers.facebook.com/
No comments:
Post a Comment