Most Advanced Facebook Like Box for Blogger


Best Movies Sites: TOP 10 MOVIE WEBSITES


Facebook Like
Social networking sites especially Facebook, Twitter and Google+ drive a good amount of traffic to your blog. Here let me share about how to add most advanced Facebook Like Box below each blog posts. This box looks neat and professional with shadow effect. I believe this Facebook Like Box will help you to increase your referral traffic via Facebook. Lets see how to add this Facebook Like Box below your blog posts.

Before we adding this Facebook Like Box to below your blog post, please take a look at the demo image screenshot provided below and get an idea of what we are going to make right here Your Facebook like box seems as below screenshot.


Demo Facebook Like Box Screenshot

Advanced Facebook Like Box

question mark icon png How to add this Facebook Like Box in below blogger blog posts
Follow the below simple steps to add it below your each blog post.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ¬

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

#LS-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;
}
# LS-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;
}
# LS-fb  td{
padding:3px 0;
}

Now search the code shown below ¬

<data:post.body/>

Now add the below code just Below/After searched above code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='LS-fb'>
<div id='LS'>
<table width='100%'>
<tbody> <tr><td>
<span style='font-style: normal; font-size: 23px; 
font-family:Georgia,Times New Roman,Trebuchet MS; '>Receive daily updates from LABSTRIKE via Facebook</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%2FYour FB Name&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>

note icon png Please note the following things
Before saving your template you may please make the following customizations in your Advanced Facebook Like Box. The changes are following:

  • Line no: 7 - Change the FB Like Box Text with your own text.
  • Line no: 11 - Change Your FB Name with your Facebook name.
  • Line no: 12 - Adjust the dimensions (590X180) of the Facebook Like Box as you wish.

Also see: Customize Facebook Like Box Without Attribution for Your Website

Hope you like it. If you have any problem while in your installation never hesitate, feel free to ask via comment or contact form. Happy blogging:)