Saturday, November 3, 2012

Customize Your Facebook Fan/Like Box With CSS - V4

After giving 3 tutorials on custom facebook like box now I am introducing my 4th custom facebook like box.I have used the old script which was used in other custom like boxes but I have make some little changes to make it more beautiful.You can also customize its height and width as you wish.If you like this then surely add it on your blog but don't remove the footer links which give credits to my work.Here I am giving list of older custom like boxes....


Similar Widgets



How To Add Custom FB Like Box V4 To Blogger


  • Go to Blogger Dashboard > Design > Page Layout.
  • Choose Add A Gadget > HTML/JavaScript.
  • Paste below code and save it. 
<style>
.fbInner{
background:#F6CECE;
width:300px;
border:1px solid #FA5858;
padding:2px;
}
</style>
<div class="fbInner">
<div class="textwidget"><script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="153138708123803" stream="0" connections="10" logobar="0" width="300" height="274" css="http://widgetsforblog.googlecode.com/files/btsnts-custom-fbv4.css?1" class=" FB_fan FB_ElementReady"></fb:fan><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: right;">
<span style="font-family: Verdana, sans-serif; font-size: xx-small;"><a href="http://www.helperblogger.com/2012/02/customize-your-facebook-fanlike-box_8050.html" target="_blank">Custom FB Like Box</a></span></div>
</div></div></div>


  • Now change with your facebook page username ID if you don't know your ID then you can use our ID Finder Tool.
  • To change height and width then find these lines and change it ass you wish width="300"   and  height="274"
Now save it and you are done...