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&”></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&width=330&header=true&style=”border:1px;”></iframe>
You can play with the full code too:
<iframe src=”http://www.facebook.com/plugins/fan.php?id=169395346410041&width=330&connections=5&stream=false&header=true&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:
Too much iframe has totally wasted the formatting of the post! It will not happen with your sidebar.
Hi,
I’ve followed your code, and put my own ID, but that doesn’t seem to work properly on WordPress. The result is curious : i’ve got an iframe of my own website (right sidebar). Could you help ?
Surely can help you. Your iframe URL is this: http://www.facebook.com/connect/connect.php?id=188311214930&connections=10&stream=false&header=false&locale=
Not like the EN-US version.
Just Contact us if you need more help.
Well, use this code, it will work for you (FB-France): http://friendlywordpress.wordpress.com/2011/06/18/fb-box-for-france/
Writing code here is creating your box to appear!
I’m very pleased to find this site. I need to to thank you for your time for this fantastic read!! I definitely really liked every bit of it and I have you saved to fav to look at new things on your blog.
Oh my go..Can’t believe.. I did as you have written in the post…The blog loads much faster..
The box basically blocks the loading of the next static contents till its complete. Other method for faster Facebook fan box widget loading is Asynchronous loading.
Please click here to see the text file, its getting rendered for pasting on comment box – http://thecustomizewindows.com/facebook-asynchronous-fan-widget.txt