iBlognet

Home Blogger Google

Add Facebook XFBML Like/Send Button To Blogger

by Editor

Today in this post I will show you how you can add Facebook XFBML version button to blogger. Facebook provides you to add the Like and the Send button in two ways. One is the iframe version and the other is the XFBML version. With iframe version, when someone likes your post it simply gets updated to their Facebook profile, but with the XFBML version it post updates to the Facebook profile with an option to add your comment when you like the post. Click on the like button above to see a demo. Follow the following steps carefully:


Step 1: Login to your blogger account. Go to Layout > Design > Edit HTML and click on “Download full template“. Check the Expand widget option.

Step 2:Search for

xmlns:expr=’http://www.google.com/2005/gml/expr’

And add the following just after it:

xmlns:fb=’http://www.facebook.com/2008/fbml’

So your code will now look like this:

Step 3: Search for <body>and add the following code just after it:

<div id=’fb-root’/>
<script>
(function() {
var e = document.createElement(‘script’);
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js#xfbml=1’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>

Step 4: Now open another browser tab and go to http://developers.facebook.com/docs/reference/plugins/like/ and get the facebook XFBML code.

Step 5: Switch back to blogger tab and search [Ctrl+F] for <data:post.body/> and add the facebook XFBML code just below it. XFBML ccode example below for standard button:

<b:if cond=’data:blog.pageType == “item”‘>

<div class=’fb-like’>

expr:href=”data:post.url” send=”true” show_faces=”true” width=”450” height=”35” font=”arial“></fb:like>

</div>

</b:if>

XFBML Button Count

<b:if cond=’data:blog.pageType == “item”‘>
<fb:like font=”arial” expr:href=”data:post.url” send=”true” layout=”button_count” show_faces=”false” width=”150” height=”20“></fb:like>

</b:if>

XFBML Box Count

<b:if cond=’data:blog.pageType == “item”‘>
<fb:like font=”lucida grande” expr:href=”data:post.url” send=”true” layout=”box_count” show_faces=”false” width=”55” height=”65“></fb:like>

</b:if>

XFBML Recommended Button

<b:if cond=’data:blog.pageType == “item”‘>
expr:href=”data:post.url” send=”false” layout=”box_count” show_faces=”true” width=”100” height=”65” colorscheme=”light“></fb:like>

</b:if>

You can remove the blue color code if you want to display the Like button on front page. Save your template and view your blog. If anything goes wrong, upload the template back, which you downloaded in step 1 and leave your query in the comment section below. Similarly you can add the facebook XFBML like box to blogger sidebar. Thanks for the tip Raju.

Article by »


Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.


Author Connect »

Comments on this entry are closed.

Previous post:

Next post: