Facebook YSlow me down?

Firstly, apologies for the blog post title! This cheeky little technique will really get your website humming if you are using the Facebook JavaScript SDK.

The script is really cool because it uses the jQuery code from my previous post about checking if all static content has loaded with jQuery and combines it with the W3C valid Facebook FBML code.

The reason for doing this is that I am working on some of the UK's biggest websites at the moment and noticed how slow content was loading when used with the Facebook Like Box. The Like Box is supposed to load asynchronously - having each operation started only after the preceding operation is completed. (dictionary.com) - but it seems to load along with the rest of the page content depending on where it is within the document. Maybe I am confused somehow?

To make sure the Facebook Like Box plays nicely I have wrapped it within the jQuery(window).load function to make sure that it loads after all other content. This results in faster delivery of the stuff that really matters, namely the page content. I will be extending this code and releasing it on some of the big sites soon, so if you have any feedback then let me know.

New Facebook Loader Script:

//Use jquery window.load function to load facebook SDK after all other page elements have loaded
jQuery(window).load(function() {
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); };
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//Write Facebook FBML code to fb-root div
document.getElementById("fb-root").innerHTML='<fb:like-box href="http://www.facebook.com/platform" width="300" stream="false"></fb:like-box>'; });