badbadmonkey - 4:58 am on Jul 27, 2011 (gmt 0)

You can use Jquery/getScript (or other alternatives) to load scripts after document.ready. +1 and twitter works out of the box, for Facebook, just use window.fbAsyncInit function..

Is this a further advantage over using the asynchronous code?

My Facebook code for example currently looks like this -


<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
status : true,
cookie : true,
xfbml : true,
channelUrl : 'custom channel url'
});
...
};

(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>


It loads asynchronously, i.e. doesn't freeze the rest of the page, but still frequently causes the page load time to go through the roof. It also occasionally seems to screw up and leave the page "loading" with a blank screen (but if you view the source you can see that the entire HTML has been received) - this seems to be related to that properly evil xd_fragment bug that required a custom channel URL to 'fix'.

I hadn't thought of taking it to an Ajax level. That sounds interesting. But JQuery is 90 KB and my site doesn't use it at present, so it would have to reliably solve all those issues to be worthwhile. Is there a way of extracting just the single method (getScript) you want to use?