Saturday 19 March, 2011

How to Add Facebook Like Button on Blogger

How to add Facebook Recommend Button on Blogger blog?
How to add Facebook Like Button on Blogspot blog?
How to customize Facebook Like Button on Blogger?
How to customize Facebook Recommend Button on Blogger?

You want to add the official Facebook Like or Recommend Button at the end (or at the top) of each of your blog post, here's how.
facebook like button

Firstly, go to Dashboard > Design > Edit HTML. Then click Expand Widget Templates.

Search for this code:
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->

Then, here's the code to add the Facebook Like Button.
<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;'/>

---

Where to add Facebook Like Button?

To add it above each blog post, add the code before <data:post.body/>.

To add it after each blog post, add the code after <div style='clear: both;'/> <!-- clear for photos floats -->.

To distance the button away from the blog post, add <br/> before or after the Facebook Like Button code depending on where to put it.

Click "Save Template" and you're done.

---

How to customize Facebook Like Button?

1) To show Facebook Profile pictures/faces of people who "Liked/Recommended" the blog post, change "false" to "true".

2) To use different action on the Facebook Button, change "like" to "recommend". Decide which is suitable for you.

3) To change the font, change "arial" to either "lucida+grande", "segoe+ui", "tahoma", "trebuchet+ms" or "verdana". Decide which is suitable for you.

4) To change the colour scheme, change between "light", "dark" or "dark". It represents the background colour your blog uses. If it's light colours use "light", if it's dark use "dark" and "evil" is somehow the same.

5) To change the width or height of the button, change them accordingly.

That's all for now!

No comments:

Post a Comment

Recent

Followers

AddUrlYahoo
Powered by Blogger.