Monday, April 26, 2010

How to add Facebook Like Button to blogger blogspot.

What is Facebook Like Button.
It's just a simple button added to your post that allow your visitor share stories from your blog with his Facebook friends only with a single click.

How to add Facebook Like Button.
You definitely need to add some code to your blogger template.

Here's the code:

For blogger classic template
<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkUrl$>&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>

For blogger modern template
<iframe 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' allowTransparency='true'></iframe>

How and where to insert the Facebook Like Button code

Generally, we will want the button to appear in every blog post.

The step:
1. Login to blogger.
2. Go to Layout
3. Click on Edit HTML
4. Tick the Expand Widget Templates

To make it appear after post title, insert the code exactly after <div class='post-header'>

To make the button appear at the end of each post, insert the code exactly after <data:post.body/>

1 comment:

Post a Comment