Adding Facebook Like Button to Your Blog or BlogPost !!

Hi guys,

Another tutorial for my fellow Readers, Hope you "like" it  :).

Now in this tutorial I will Show you how to add the famous Facebook like button to your blog or particular BlogPost. Follow this simple steps and you will be able to add this button and Even customize it to your likes.

Step 1 . Adding the Code

Button Code Below

<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 ?

Login to your blogger account > design > Edit Html >Before doing any thing you must check Expand Widget Templates box.
And find the next Code By Ctrl + F.

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

And after it paste the Button Code.

If you cant find this Code which I seriously doubt you wont.

Find this code By Ctrl + F

<data:post.body/>

And am Sure you will find this one. Paste the Button Code Before this code.

Click on Save Template and you Are done.

-------------------------------------------------------------------------------------------------------------

Now Customizing Part >

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>

Here is the Demo

Enjoy and hope you all Like it :)

Posted in: Blogging