How to Add Facebook Like Button to Blogger

The Like button allows your visitors to share your blog posts with their friends on Facebook with just one click. So why not add it to Blogger. After the launch of this button, it’s being replaced with the old share buttons.

There are different versions of Like button, namely, XFBML (or in HTML5 markup) and the Iframe. The XFBML is capable of doing many things but requires a series of steps to implement, while the Iframe version of the Like button is much simpler and very easy to add to Blogger.

So let’s get started with it.

Step 1: Log in to Blogger and from the dashboard, go to Template tab.

Step 2: Click Edit HTML and check “Expand Widget Templates”.

Step 3: Find <data:post.body/> and immediately after/before it (or both if you want to have it on both top of the post and also at the bottom) add any one of the following codes.

Facebook Like Button for Blogger

It comes with three different shapes and sizes. Choose any one that suits you and add it as told in step 3.

Standard Button

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
</b:if>

Show for:

Box Count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/>
</b:if>

Button Count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
</b:if>

XFBML/HTML5 Version

This is an example of XFBML (or HTML5) Like button which has the Send button and with an auto popup comment box. To get this you can follow the tutorial for Like button.

Customization

Noticed the highlighted codes? Here’s where you can make changes, for example, if you want to change the font style then locate font=arial and replace Arial with any one below:

font=lucida%2Bgrande
font=segoe%2Bui
font=tahoma
font=trebuchet%2Bms
font=verdana

Likewise, you can also change certain things:

• The color by changing colorscheme=light to colorscheme=dark if you have a darker background.
  
• The option to show faces by changing show_faces=false to show_faces=true.
  
• The Like verb to Recommended by changing action=like to action=recommend.
  
• The width and height if want to show faces and change the verb.
  

Here is another example after applying the customization:

Points to note

• If you want some space to add between the post body and the like button, then wrap the codes within div, something like this:

  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div style='margin: 1em 0;'>
  [Like button code goes here]
  </div>
  </b:if>

• Conditional tags are used to show these buttons for homepage and every other page excluding static pages. If you want to show it only in post pages then replace the above highlighted blue codes with:

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  [Like button code]
  </b:if>

  Otherwise, remove it completely.