Detect facebook like is fully loaded

Question

I want to detect when the facebook like button is loaded with jquery, then fadeIn the button. What I tried is this:

$(document).ready(function() {
    $(document).on( "load", ".fb-like iframe", function() {
        condole.log("loaded");
    });

    $(".fb-like iframe").ready(function (){
        console.log("ready");
    });
});

The 'ready' runs correctly, but the 'loaded' doesn't want to show in the console. (The 'ready' is way too early for the fadeIn, it must be done after everything is loaded.)

Answer 1

You can try:

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

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

Or use "iframeTracker jQuery Plugin"

Answer 2

How about wrapping the FB iframe inside a div set to display:none;

div { display:none }

Then after the iframe has loaded fade the div in.

$("div").fadeIn(1000);