Breaking News

Add facebook like button to blog

few days ago, face book surprised us by launching a lot of social plugins, one of them, actually the most popular one yet is the famous like button,
In this tutorial you’ll learn how to add it to your blogger blog.
and you’ll learn how to customize
  • change the verb, like or recommend.
  • change it’s color.
  • change it’s font.
Step 1. adding it to your template.
The button code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
where to add it ?
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'/>
And after it, paste your button code

What, If you didn’t find the code above in your template, The try to find the following,

And paste the button code Before it.
click Save Template and you are done.
Step 2. Customize your button & Demo.
in the above code you can customize 3 parts. and i’ve colored them to make it easy for you to recognize,
in the above code change the following parts,
  • like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.
  • arial this part controls the font type, keep it or change it to one of the following, lucida+grande
  • light this part controls your button color theme, and you have three options, light, evil, or dark
  • Update, How to make it appear on your home page.
in the button code there are two parts you’ll need to remove to make this button appear on your home page, the first line and the last line, if you still don’t under stand, please see the following parts and delete it before pasting the code to your template,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
I wish you all like it and please leave your comments if you need any help,


  1. Do you have an alternative to the above code. I can't use scripts or iframes on my site.
    Even I have tried some alternative to get rid of the Iframes and javascript for the Facebook Like button.
    Do visit my related post:

    Samprada Nagasubramanian
    Do poll for the best alternative to html iframes at:

    If you are a non-multiply user, do add your comments to my guestbook at:
    Comments are subject to approval.

  2. i cannot paste the code. i dont understanddddd

  3. Awesome. Thanks for the information!
    I got it to work.

  4. used your code and instructions, and it is working real goof thank you so much.

  5. I have a friend who has this at the top of her blog instead of at the top of each post. How do I do that?

  6. I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post.
    buying facebook likes


Any Comments ?

Designed By GP