How to put "Like" Button on your Blog?

This will teach you on how to put a "Like" Button in your website or in every post. 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. 

I would like to teach you on how to put on your website. 

Step 1. Adding in your Template

The button code

<b:if cond='data:blog.pageType == "item"'><br /> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/><br /> </b:if>
But don't know how to add into the template?
1. Login to You blogger account, then go to Design>>Edit HTML. 
2. Before doing any thing you must check Expand Widget Templates box.
3. Find The This 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 Before it
and "Save The Template" and done. 


Step 2. Customize 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.


1.  like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.
2. 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

3.  light this part controls your button color theme, and you have three options,light, evil, or dark
4.  Update, How to make it appear on your homepage.


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 == "item"'>

</b:if>

Hope I helped with you guyz.

Share on Google Plus

About Jomar Lipon

Web Developer at your service and frustrated blogger in Cebu. Author of JomarPH.com, SEO Specialist.