Detect facebook like button and twitter share button's onload?

Question

The 3rd party buttons usually take quite a bit of time to load and having them flash in suddenly is a bit jarring to the aesthetics of the page.

I decided to hide the enclosing div and then fade it in when the buttons load. Is there a clean way to bind an onload event to the buttons?

Answer 1

Here is an example with facebook sdk:

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/en_US/all.js#xfbml=1';
js.onload = function(){
  FB.Event.subscribe('xfbml.render',
    function(response) {
        doSomething();
    });
  }; 
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Look at the facebook sdk for event handling: Facebook Event Handling

After the SDK is loaded, you can acces the FB object.

Or read this article: Asynchronously loading twitter, google, facebook and linked-in buttons and widgets + Ajax bonus