Today we will learn how to add Facebook XFBML Like Button to Blogger. After using the iframe version, I was thinking if I could do something with it which will enable my blog readers to leave a comment also, just like the Facebook Share Button does. So I checked out and found out the JavaScript (XFBML) version. It gives my blog readers the ability to add an optional comment to the like which in turn will give the like more prominence.
Update: Facebook added a new feature called "Send" along with the Like. It enables your blog readers to send the post to Facebook friends (individually). This feature is only available to XFBML Like Button. You can also separately add Send button to Blogger.
Normally, in iframe version, when your blog reader likes a post, it will be shown as in the picture below.
The best feature of XFBML version is when someone likes your post and wants to share it in their Facebook profile, it will open a comment box to add his comment. They can also send your post to their friends whom they like to.
So check this out by liking this post by a live preview.
To add XFBML version of Like Button to Blogger, visit the official page, leave the URL field blank and check all other options that you want to have and click Get Code.
In the XFBML part there will be two set of snippets, the first one is the script and next is the button snippet (highlighted in blue) to render it.
All you need is the code for the button that you have generated. In this tutorial I have selected the Standard Layout for the Fb Like. To add it to Blogger, carefully read the steps from 1 to 5 (updated on 15th March, 2011 with some rectifications).
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#'
Don't forget to give a space. The full attribution will look like:
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>
This allows XFBML tags to render in older versions of Internet Explorer.
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>
If your language is not English then to display your locale language replace en_US with the correct locale code.
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.canonicalUrl" send="true" show_faces="true" width="450" font="arial"></fb:like>
</div>
</b:if>
The Facebook JavaScript is smart enough to get the post URL and title automatically. But if you are using the default code that you have generated from the official page and want to show this on homepage along with every other pages then it will fetch the URL of the page the user is reading, not the permalink of your post's URL. So, to solve this problem another "href" attribution has been added, marked in green.
I have used conditional tags (marked in blue) to show it on every page except static pages. If you want to show this in post pages only then replace it with:
<b:if cond='data:blog.pageType == "item"'>
Rest of the codes goes same as above...
</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.
Let's have a look at live examples with attributions set:
XFBML Like Button Count for Blogger
<fb:like font="arial" expr:href="data:post.canonicalUrl" send="true" layout="button_count" show_faces="false" width="150"></fb:like>
XFBML Like Box Count
<fb:like font="lucida grande" expr:href="data:post.canonicalUrl" send="true" layout="box_count" show_faces="false" width="55"></fb:like>
Recommended Button (Customized)
<fb:like action="recommend" font="lucida grande" expr:href="data:post.canonicalUrl" send="false" layout="box_count" show_faces="true" width="100" colorscheme="dark"></fb:like>
Attributes for XFBML Like Button
Attributions that can be changed that are marked in bold in above snippet in step 4:
- send="true" - if you want the new "Send" feature otherwise turn it off by send="false"
- layout - there are three types and each of them has specific width and height which you have to change accordingly for the selected type:
- standard - it's the first option in the official page, button to the left and social text to right.
- height - the height is 35 pixels
- width - 450 pixels (default)
- button_count - which displays only the number of "likes" made for a particular post.
- height - 20 pixels
- width - 150 pixels
- box_count - which displays the total number of likes above the button
- height - 85 pixels
- width - minimum 55 pixels
- standard - it's the first option in the official page, button to the left and social text to right.
- The height will change if you have turned off the "Send" option:
- Standard Button
- height - 35 pixels
- width - 450 pixels
- Button Count
- height - 20 pixels
- width - 90 pixels
- Box Count
- height - 65 pixels
- width - 55 pixels
- show_faces - which tells the button whether to show faces or not.
- true - which is default and will show faces
- false - this will not show faces
- fonts - the font to be used for the button
- arial
- lucida grande
- segoe ui
- tahoma
- trebuchet ms
- verdana
- colorscheme - it's an additional attribution that can be used if you have a dark background. The options are "light" (this is default) and "dark".
- action - additional attribution to display the verb
- like - it is default and need not to do any changes
- recommend - if you want to show "Recommend" instead of "Like"
- Standard Button
Conclusion
- I have used the simplest method to add the XFBML Like Button, e.g. without any use of application ID.
- To separate it from post, add some CSS to it. Remember to add the div sections wrapping the button as shown in step 4. Find for ]]></b:skin> and before it add:
.like{Set the margin as required for different button layout.
display: block;
margin: 10px 0px;
} - Remove any old scripts for Facebook sharing buttons for Blogger to let it work correctly. If you are having any problem in showing it in IE, then tell me.
- If you want to skip all this, then add the simple iframe version of like button for blogger.
0 Comments