Simple Blogger Tutorials

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.

Blogger like buttonSo 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.

Facebook Like and Send button for Blogger

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='&quot;loading&quot; + 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

Like