Customize Your Facebook Fan/Like Box With CSS - V3 - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Wednesday, 1 February 2012

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


Related Articles


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 ▼


No comments:

Post a Comment

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM