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>
- Preview and Save the template.
Customizations :
- Replace Receive updates on your Facebook wall For Free !!!! with your words.
- Replace jstxplore with your Facebook username.
- Replace 590 and 180 with your desired width and height respectively.
Queries , Trouble . Wanna say thanks comment below
