Add Facebook Like box or Button To Blogger

As we all know facebook is one of the largest social media company in the word.If your blog have any fan page then it will help you a lot in increasing traffic on your blog. The Facebook like button is probably the most important and the most used social button on the world wide web today. With its recent upgrade (Facebook sort of merged it with the share to Facebook button, so liking a web page or content you just found would automatically be posted/shared on your Facebook wall, instead of just the normal you liked this __ link wall status), it became a more powerful tool for sharing content. So why not add it to your blogger blogs. It’s simple. Here’s how:

 

How To Add Facebook Like Button To Blogger?

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Tick the Expand Widget Templates check box on top right of the HTML window.
3. Find (Ctrl + F) the following code in your HTML.

<data:post.body/>

4. Copy and paste the Facebook button code immediately below (after) it:

<!-- Facebook Like Button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:5px 5px 5px 0;'>
<iframe allowTransparency='true' expr:src='&quot;

http://www.facebook.com/plugins/like.php?href=" + 

data:post.url + "&layout=standard&show_faces=false&

width=450&action=like&font=verdana&colorscheme=light&

height=35"' frameborder='0' scrolling='no' style='border:none; 

overflow:hidden; width:440px; height:35px;'/>
</div>
</b:if>
<!-- Facebook Like Button End -->

5. Save it.

Configure button:

• Choose the type of button and set the appropriate width and height by changing the values of query parameters in the above code.

Like button type	Query	Value	Width & Height
	layout	standard	W: 450px H: 35px (80px w photos)
		button_count	W: 90px H: 20px
		box_count	W:55px H: 65px
	colorscheme	dark	n.a.
	action	recommend	n.a.

Button repositioning:
The steps above positioned the button on bottom left of each post. You can change the position if you wish:

• Position it on top of post
Place the button code before <data:post.body/>, instead of after.
• Position it on the right
Change the float in the code from left to right.