Dear Readers: HWS has recently started a new project for the students of engineering ====> The Engineering Projects

Write at HWS !!!

Guest Posting

Wednesday, January 26, 2011

Add FaceBook Like Button For Blogger ( BlogSpot ) And Customize It.

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 == &
<iframe allowTransparency='
true' expr:src='&quot;
quot; + data:post.url + &quot;&amp;
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 == &


I wish you all like it and please leave your comments if you need any help, can ask .

About the Author

I am XEO Hacker, the founder of Hack With Style (HWS). I am blogging since 2009 before that I just search things and now I am sharing my knowledge through this plateform.I'm also a freelance writer on topics related to Website Hacking,Website Optimization (SEO), blogger customizations and making money online.
In 61 people's circles

Subscribe To Get FREE Tutorials!

Respected Readers:
As a 21 year old student, the only income I rely on is my pocket money. Bearing the running costs of HWS Blog has become really difficult. We educate thousands of bloggers a week with our tutorials. To help us go forward with the same spirit, a small contribution from your side will highly be appreciated.


why removed your comments boss?
hehehe, nice to meet you my friend...
salom from Beben si bloglang anu ganteng kalem tea \m/

HOw do you change to verb to something different than like or recommend?

Therez another option which is "send" thru which you can send the post to anyone on facebook in messages . I will soon post about it.

Ever wanted to get free Google+ Circles?
Did you know you can get these ON AUTOPILOT AND TOTALLY FOR FREE by getting an account on Like 4 Like?

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Please do not spam Spam comments will be deleted immediately upon my review.

XEO Hacker

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More


Recent Posts

Join Me On Facebook

700+ Followers


meet women in Ukraine contatore visite website counter

Recent Comments

Follow Me On Twitter

1112+ Followers