This beautiful Facebook Like Box allow your Readers to Share the Post and also become a fan of your FanPage. This will increase facebook Likes to your blog. Have Good Content and this Widget below your post, then Watch likes flow.
Follow these 3 Steps to Add Facebook Like Box to all your Blogger Posts.
Backup Your Template First
Step 1: Login to Blogger > Design > Edit HTML > Expand Widgets
Step 2: Search for the following Code
]]></b:skin>
Step 3: Above it, Paste the following CSS
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:560px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("http://3.bp.blogspot.com/-
g0Uu_u2oQx8/TlNMnZjF1UI/AAAAAAAABbY/TZAJwulTqdY/s1600/Facebook_log
o.jpg") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("http://2.bp.blogspot.com/-75VArcE9Tzk/TlNMxuzswHI/AAAAAA
AABbc/sSnUuD1jyF8/s1600/Become+a+Fan.jpg") no-repeat scroll left top
transparent;
display:block;
margin-left:445px;
text-indent:-5000px;
}.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:535px;
height:42px;
}
Step 3: Now Search for
<data:post.body/>
Step 4: Below it , add the following Code
<b:if cond='data:blog.pageType == "item"'>
<div class='fb_like_box'>
<div class='fb_like_top'><a rel='nofollow' href='Facebook fanpage URL
'>Become a Fan</a></div>
<div class='fb_like_button_holder'>
<iframe allowTransparency='true'
expr:src='"http://www.facebook.com/plugins/like.php?href=" +
data:post.url +
"&layout=standard&show_faces=false&width=100&a
ction=like&font=arial&colorscheme=light"' frameborder='0'
scrolling='no' style='border:none; overflow:hidden;
width:450px;height:30px;'/>
</div>
</div>
</b:if>
Replace Red Line with your Facebook fan page url.
Step 5: Save Template. That's it.
