How to Add a Facebook Like Button into Blogger Blogspot?

The Facebook like button is now probably the most important and the most used social button on the world wide web. Earlier when you clicked on the Like button, only a link would appear on Facebook, which was easy to miss. From now on, whenever you click on the Like button, the post will be shared on your facebook wall, instead of just the normal you liked this __ link wall status), it became a more powerful tool for sharing content. So why not add it to your blogger blogs? Here's how:

1. Log into your blogger account, then go to Layout >> Edit Html. Before doing any thing you must check Expand Widget Templates box. And find the next Code:

<div class='post-header-line-1'/>

2. Add the following code (button code) after it:

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:440px; height:35px;'/>

If you can not find the above code, find the below:

<data:post.body/>

And add the button code before it.

3. Click Save Template and you have done.

NOTE: The button you've add is the standard button. If you don't like it, you can configure to change the type of button by setting the value of layout, width, and height in the button code by the following value below for each type:

- Standard: 


   + layout=standard
   + width:450px
   + height:35px

- Button Count:


   + layout=button_count
   + width:90px
   + height:20px

- Box Count:


   + layout=box_count
   + width:55px
   + height:65px

And, if you don't like to put the button in the header of your post, you want it to appear in the post's footer, you can do it by placing the button code before the following tag:

<div class='post-footer'>

Posted in: Social Media