Advanced Facebook Like box for Blogger blogs

By Ayman H Sunday, September 9, 2012
Ive so far shared lot of Facebook widgets for bloggers. I recently designed a new look for Facebook like box and you can view the live demo of it in below each blog posts. I have added a shadow effect and hover effect for this Facebook like box to make it look more attractive. Your Facebook fans going to be a necessary factor to promote your blog effectively. As per My view, this Facebook like box best suits under each blog posts so Im going to give you the simple tutorial on placing this advanced Facebook Like box below your blogger blog posts.
https://web-beta.archive.org/web/20170101121527im_/http://2.bp.blogspot.com/-J4eNZuuqyGg/UEQuossBWgI/AAAAAAAAB9A/e6Usy6sbE2Y/s1600/facebook.PNG

Advanced Facebook Like box for Blogger blogs

1. Go to blogger dashboard > Template > Edit Html (Tick Expand widget template option).
2. Find for ]]></b:skin> tag and place the following peace of code just above it.
#BTbiz-fb {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
box-shadow: 5px 5px 5px #CCCCCC;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding:10px;
margin-top:25px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:560px;
}
# BTbiz-fb:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
}
# BTbiz-fb  td{
padding:3px 0;
}
3. Now find for <data:post.body/> and place the following peace of code below it.

Advanced Facebook Like box widget code

<b:if cond=data:blog.pageType == &quot;item&quot;>
<div id=BTbiz-fb>
<div id=BTbiz>
<table width=100%>
<tbody> <tr><td>
<span style=font-style: normal; font-size: 23px; font-family:Georgia,Times New Roman,Trebuchet MS; >Like Us.   Receive updates on your Facebook wall!!!!</span></td></tr>
<tr><td>
<iframe allowTransparency=true frameborder=0 scrolling=no src=//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricksdotbiz&amp;
width=590&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false style=border:none !important; overflow:hidden; width:560px; height:180px;/></td></tr>
</tbody> </table></div></div>
</b:if>
4. Save the template.

Facebook Like box customizations

  • Replace Like Us.   Receive updates on your Facebook wall!!!! with your desired words.
  • Replace bloggertricksdotbiz with your Facebook username.
  • Replace 590 and 180 with your desired width and height respectively.

Hope you guyz liked this widget.. Happy Blogging.

Post Tags:

Blogger Tricks

Basic / Advanced tutorials on WordPress, Google Blogger, SEO, Earning online income, Website development tips, tricks, etc.

No Comment to " Advanced Facebook Like box for Blogger blogs "