Add Facebook XFBML Like Button to Blogger
Today we will learn how to add Facebook Like button to Blogger (XFBML/HTML5). After using the Iframe version, I was thinking if it could do something which will enable my blog readers to leave a comment while sharing.
So I checked and found out the JavaScript version of Like button which has a Send button too. When someone likes your post to share it with their Facebook friends, it will open a popup comment box to leave a comment which will give it more prominence.
To get this you can visit the official page. Here I will try to explain it in simpler form.
Facebook Like Button for Blogger
Step 1. Log in to Blogger, go to Template tab, then click “Edit HTML” and check “Expand Widget Templates”.
Step 2. Though this step is not required as I have updated the rendering codes with HTML5 version but still you may include this for certain reasons. Find the highlighted HTML attribution:
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>After this, add XML namespace attribute so that it gets rendered without any problem in older versions of Internet Explorer.
xmlns:fb='http://ogp.me/ns/fb#'
Don't forget to give a space in between. The full attribution will be something as shown below:
<html xmlns:fb='http://ogp.me/ns/fb#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>Step 3. Find <body> or <body expr:class='"loading" + data:blog.mobileClass'> and immediately after it add the following 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 after/before it (or both) add the below code after generating it.
Button options
Layout:
Verb:
Color:
Font:
Send:
Show faces:
Float:
Show for:
Preview and code
<b:if cond='data:blog.pageType != "static_page"'><div style="float: none;"> <div class='fb-like' expr:data-href='data:post.canonicalUrl' data-send='false' data-layout='standard' data-width='' data-show-faces='false' data-action='like' data-colorscheme='light' data-font='arial'></div> </div></b:if>
Step 5. When it's all done, save your template.
Attributions
Attributes can be changed accordingly to fit in your requirements. Let’s have a look:
layout- there are three layouts of Like button and each of them has specific width which can be changed:standard- it has the button to the left and social text to right.- The default width is 450 pixels while the minimum is 255.
button_count- which displays only the number of likes made for a particular post.- 150 pixels is appropriate if it has the Send button while without it the minimum width is 90.
box_count- which displays the total number of likes above the button.- Minimum width is 55 pixels.
- If you use
action‘Recommend’ then the minimum widths will increase by 40px for all layouts.
action- additional attribution to display the verb:like- it is default.recommend- if you want to show ‘Recommend’ instead of ‘Like’ verb.
fonts- the font to use.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’send='true'- if you want the Send button feature otherwise turn it off bysend='false'show-faces- This option will show faces of your friends only who have liked your posts.
Difference between XFBML and HTML5
You might have seen in the official page that there is also another option called XFBML. There aren’t many differences between XFBML and HTML5 Like buttons except the markup and HTML attribute that is required in step 2. In step 4, the codes get a little different, that’s it.
Conclusion
- I have used the simplest method to add the XFBML/HTML5 Like Button, that is, without any use of application ID.
- Remove any old scripts for Facebook share buttons to let it work correctly.
- If you want to skip all this, then add the simple Iframe version of Like button for Blogger.
