Basic and Advanced Face Book Like Box For Blogger

Face Book Like box is Used almost everywhere on the blogger . it will show your followers with or without thumbnails . The widget will Help you to gain More traffic for your blog and Also help you to gain more likes for your Page .

1. So Let's start the step , How to implement on your Blog :

Login To Blogger Account.
Click Blog Title -> Layout -> Add A Gadget.
Select HTML / Javascript -> Paste The Following Code .

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/jstxplore&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:292px; height:258px;" ></iframe>

Change Facebook Page URL, Change Width And Height According To Your Template.
Check Demo Below Of jstxplore Facebook Page.

2. Advanced Facebook Like Box Below post :

This face book like box is customized and designed by vijay prakash from blogger tricks.bz . this is an awesome widget to have at the bottom of the post and increase traffic.

Steps :

Go to blogger dashboard -> Template -> Edit Html (check Expand widget template ).
Search for ]]></b:skin> and place the following code just above it.

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

Now search <data:post.body/> and place the following code below it.

<b:if cond='data:blog.pageType == "item"'>
<div id='JTxpl-fb'>
<div id='JTxpl'>
<table width='100%'>
<tbody> <tr><td>
<span style='font-style: normal; font-size: 23px; font-family:Georgia,Times New Roman,Trebuchet MS; '> Receive updates on your Facebook wall For Free!!!!</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%2Fjstxplore&
width=590&height=180&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false' style='border:none !important; overflow:hidden; width:560px; height:180px;'/></td></tr>
</tbody> </table></div></div>
</b:if>