CODEWITHSUNDEEP
jquerycssfacebookbuttonfacebook-like
Lakatos Gyula
Lakatos Gyula

Reputation: 4160

Detect facebook like is fully loaded

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.)

Upvotes: 1

Views: 406

Answers (2)

SergeevDMS
SergeevDMS

Reputation: 821

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"

Upvotes: 4

Vladimir Kramer
Vladimir Kramer

Reputation: 67

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);

Upvotes: 1

Related Questions