Adding Facebook Like button.

Just like adding Facebook Fan box or Facebook sharer you may also want to add Facebook Like button.Adding Facebook Like directly increases your Visitor so we should make maximum use of it.To add it just we need to add Iframe code and implement them.

Facebook Like Button Iframe codes.

For Blogger the iframe codes of Facebook like button is

<!-- Facebook Like iframe codes start-->
<div id="br-fbl">
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=20&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=20&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'/>
</div>
<!-- http://bloggerrounder.blogspot.com -->
<!-- Like button ends—>

Customizing like button.

To customize like button just see the table and change corresponding value.

Like Buttons	Value	Width	Height	Query
	standard	450	35	layout
	recommend			action
	box_count	55	65	layout
	button_count	90	20	layout
	dark			colorscheme

Blank Table means no need to specify value.Don’t use value.

Adding Like Button in Blogger.

As Widget.

1. Go to Blogger Dashboard>Layout.
2. Click on Add a Gadget.
3. Select HTML/JavaScript
4. In code window add the Facebook like button code.(Don’t add expr: remove that code before adding)

In Main Zone.

If you want to add like button below of post title or below post then this trick is favorable.

1. Go to Blogger Dashboard>Template>Edit HTML
2. Back up your Blog.
3. Tick on expand widget.
4. Find this line

   <data:post.body/>
   

5. Add the Facebook Like button code.If you will add before then like button will be shown below post tile if you add that code under then like button will be shown after post.
6. Click on Save Template.

Styling Like Button.

We should style using CSS for effective implementation.

If we want to add distance inside and outside of like button then add CSS code in your Template

#br-fbl {
margin:10px;
padding:10px
/*Add CSS codes*/
}

Adjust Line 2 and Line 3 your self.For adding more CSS you can add after line 2.

If you want to float it on left then add float:left just after line 2.

If you want to hide from static page then Wrap Like button iframe codes like this

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Facebook Like Button Iframe Codes
</b:if>

If you don't know how to add CSS then Refer here.

Enjoy.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.