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

Blogger Widgets | Templates | Tutorials

Latest

Wednesday, 8 February 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...

Respect The Credits


All customization credits goes to BTSNTS.Users are requested to don't remove the credit link.If you want to share this article then you will have to link back to this post.Hope you all will support me.

6 comments:

  1. can we add this to a website not a blog

    ReplyDelete
  2. @fa87e1b6-7aa5-11e1-b850-000bcdca4d7a - It is same for all.Just g oto your dashboard then select add HTML/Javascript.Paste above code and save it.Drag your widget as you wish...

    ReplyDelete
  3. i'm unable to paste the html text plzz help

    ReplyDelete
  4. This did not work for me; all that showed up was a pink bar and your credits.

    ReplyDelete

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