Customize Your Facebook Fan/Like Box With CSS - V3

Facebook fan/like box box is a great widget to attract your readers on facebook. You can customize the border color, the height and the width of the Like Box but, officially, nothing more.Your readers can like your facebook fan page without leaving your blog.I already gave two tutorials about custom facebook fan/like box.This is a third design which was designed by Amit Sir (founder of digital inspiration).I also customize this box a little much.If you like it then just copy the code replace my username with yours and add it to your blog.

 See Live Demo At The Bottom Of Page

• 
  

How To Add Custom Facebook Like Box To Blogger ?

• Go to Blogger Dashboard > Design > Page Layout.
• Choose Add A Gadget > HTML/JavaScript.
• Paste code and save it.

<style type="text/css">
.fbOuter {
background-color:#F8E0E0;
width:250px;
padding:10px 0 0px 10px;
height:250px;
border:2px ridge #CCCCCC;
box-shadow: 10px 5px 5px #CCCCCC;  
}
.fbInner {
height:250px;
overflow:hidden;
}
</style>
<div class="fbOuter">
<div class="fbInner">
<div class="fb-like-box"
data-width="245" data-height="290"
data-href="http://www.facebook.com/btsnts"
data-border-color="#F8E0E0" data-show-faces="true"
data-stream="false" data-header="false">
</div>
</div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

• Replace btsnts with your facebook page username. (If you did not created a username yet then read this tutorial

Respect Credits

All customization credits goes to BTSNTS Blog and Labnol. Web developers and bloggers are requested to link back to them if they wish to share the codes above with their readers.Hope all of you will support us.

Live Demo ?