How add Facebook like button on Blogger (Blogspot) and how customize it.

Few days ago, facebook 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 and change it’s font.

STEP 1:

Add the button code it to your template script.

• Log into your blogger account, then go to Design >> Edit Html.

• Backup your Templates (Don't know click here)

• Then check on Expand Widget Templates box.

• Find the Code below and paste the Facebook like button script after it.

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

• If you didn’t find the code above in your template, Then try to find the following and paste the Facebook like button script before it.

<data:post.body/>

• Facebook like button script.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&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;'/> </b:if>  

• Create your own Facebook like button script Click Here. 

• click on Save Template and you are done.

STEP 2:
Customize your Facebook like button.


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
segoe+ui
tahoma
trebuchet+ms
verdana

• Light this part controls your button color theme, and you have three options

Light
Evil
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;'>

</b:if>

UPDATE
if you want facebook like button individual blog post. follow below instructions.

Paste below script at button of
<b:includable id='post' var='post'>. this line.

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

In case you have issues, here is the version with all the clarifying formatting removed and no line breaks:

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

Need More Help Just Ask In The Comments.