Facebook fan box widget that loads faster on your blog

Most of us use the Facebook fan box widget for our blogs, the default iframe or xFBML is slower to load. Here is a trick to create your own widget.

Most of the blogger uses the code for Facebook fan box widget copy-pasting from the official page blindly, either the iframe code or the xFBML code from there. Prerequisite is only your existent Face book page. Just copy the code page id from there for our own Facebook fan box widget creation.

How to get the FaceBook page ID for creating this Facebook fan box widget?

Just go to your FaceBook page, hover the mouse over your logo and the ID will appear in the lower pane of your browser; just like this:

Get ready for your own Facebook fan box widget

Go to this url:

http://www.facebook.com/plugins/fan.php?id=169395346410041&

Copy it, paste to Notepad, change the number (= ID) marked red with your own ID, again copy it and paste it to your browser and hit Enter. You will see something like this:

That means, it is a primitive Facebook fan box widget. If you are already a fan, and logged in, it must be showing you like the page.

This is the code to make it appear in your sidebar:

<iframe src=”http://www.facebook.com/plugins/fan.php?id=169395346410041&amp;”></iframe>

For more customization, for example; to show only the header and Like in the Facebook fan box widget; we will use this code instead:

<iframe src=”http://www.facebook.com/plugins/fan.php?id=169395346410041&amp;width=330&amp;header=true&amp;style=”border:1px;”></iframe>

You can play with the full code too:

<iframe src=”http://www.facebook.com/plugins/fan.php?id=169395346410041&amp;width=330&amp;connections=5&amp;stream=false&amp;header=true&amp;locale=en_US” scrolling=”no” frameborder=”0” style=”border:none; overflow:hidden; width:330px; height:200px”></iframe>

You can change the red texts to customize your own Facebook fan box widget. This is conventional. But we will make a faster loading Facebook fan box widget.

You can took a snapshot of the full Facebook fan box widget, say with 20 faces; chop the the part showing faces of your fans and place it below the first code. Above, you can use another image looking like FaceBook header.

So, the number of http request will only three, instead of 20 + 2 = 22. This a sample:

Combine these two in your sidebar: