How to Customize Facebook Fan Page Widget

This post is about  Customizing Facebook Fanbox Widget for wordpress ,if you don’t know what is facebook fanbox is please  first read-Fan Box : Facebook pages widget for your blog

If you are blogging and have placed a facebook fanbox widget on your blog ,and want to change the way that box looks ,then read on.

May be you can tweak its colors or may be change the background color of your facebook fanbox.

Here have a look at what i have done with my fanbox.

It’s not so good-looking but a lot can be done with it.

I know that I have not designed it properly,but then I am not a designer I just make things work the way they should.

Enough of that ……Now here is what your facebook fanbox iframe code would look when you get it from facebook.

"http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script><script type="text/javascript">FB.init("7f7ce0be4660e5312fa83f0af6368841");</script><fb:fan profile_id="181283852393"  connections="20" width="1000" height="95" ></fb:fan>
  <div style="font-size:10px; padding-left:20px">
  <a href="http://www.facebook.com/pages/Indore-India/what-what/181283852393"></a></div>

To make the fanbox take design of your css simply put the location of css file just after the height of your facebook fanbox.To see the code just slide this panel and you will see how I have placed mine.

"http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script><script type="text/javascript">FB.init("7f7ce0be4660e5312fa83f0af6368841");</script><fb:fan profile_id="181283852393"  connections="20" width="1000" height="95" css="http://what-what.net/wp-content/themes/thesis_16/custom/custom.css?9> font-size:10px; padding-left:20px"> <a href="http://www.facebook.com/pages/Indore-India/what-what/181283852393"></a></div>

Once that done start tweaking the colors and the shape of your facebook fanbox.

Word of caution :- The question mark that you see at the end of your css,just put the number that you have revised your facebook css files.(Facebook works according to the cache storage )

Ex- You start to style your facebook fanbox for the first time and as you save your css files,change the number to 2 and from their on the keep on  increasing the number as once per css editing.

You can see it took me 6 revisions so I have used the number 7,as the cache was already stored for the first editing.

I know this really fussy but then its always great fun in making things work the way you want it.

This useful tutorial is presented by our guest author Shoaib. If you like to Write for Shoutmeloud read : Shoutmeloud Revenue Sharing Program.

Article by Shoaib Hussain

Shoaib has written 10 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

Follow @ShoutMeLoud