CODEWITHSUNDEEP
javascriptjqueryhtmlfacebook
Cristian
Cristian

Reputation: 7185

Detect when Facebook Like Button is loaded

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!

Upvotes: 6

Views: 7383

Answers (3)

Tarnay Kálmán
Tarnay Kálmán

Reputation: 7066

If you are adding the Facebook widget dynamically and thus calling FB.XFBML.parse manually, then you can you simply specify a callback function that gets called when rendering is complete.

Upvotes: 1

Tarnay Kálmán
Tarnay Kálmán

Reputation: 7066

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

Upvotes: 22

Ohgodwhy
Ohgodwhy

Reputation: 50798

I'm pretty sure the facebook Like button is wrapped in an iFrame. If it is, you can find something to reference that iFrame by and use -> 

$('iframe[class/id/name=whatever]').load(function(){ 
  //This element is loaded 
});

EDIT

Based on your specific needs, we can hook into any attribute as mentioned in my comment, I simply choose frameborder="0" to hook into.

$('iframe[frameborder=0]').load(function(){
  alert("loaded.");
});

Upvotes: 1

Related Questions