Question

As you probably know the Facebook Like button loads very slowly.

And I am trying to figure out how to detect when the button has finished loading and has been added to the website.

The reason being that I show a loading animation, and then hide that and show the button, but I’d like to show the button when it has finished loading.

Can this be done?

Thanks in advance everyone!

Answer 1

One can subscribe to the xfbml.render event to get notified when rendering is complete, which only fires once per page parsing (and works not only for xfbml, but for the new html5 trickery too). Page parsing automatically happens when the FB JS SDK loads if xfbml : true.

window.fbAsyncInit = function() {
  FB.init({
    ...
    xfbml : true
  });

  FB.Event.subscribe('xfbml.render', function(response) {
      alert('OMG... All Facebook sociaal plugins on page rendereed.... finally!');
  });
};

// And load the SDK Asynchronously here