» » Add facebook like button to blog

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;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>
 
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,

<data:post.body/>
 
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
    segoe+ui
    tahoma
    trebuchet+ms
    verdana
  • 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;'>
</b:if>
 
I wish you all like it and please leave your comments if you need any help,

Related Posts