Comment détecter quand la fonction javascript de Facebook est prête?

Question

J'utilise ceci:

function FB_wait() { 
    if (typeof FB == 'undefined') { 
     window.setTimeout(FB_wait, 100); 
    } else { 
     more(); 
    } 
} 

Mais il doit y avoir une meilleure façon

window.fbAsyncInit = function() { 
    FB.init({ 
     appId : '<?php echo $conf['fb']['appid']; ?>', 
     status : true, // check login status 
     cookie : true, // enable cookies to allow the server to access the session 
     xfbml : true // parse XFBML 
    }); 
    FB.Canvas.setAutoResize(); 
    }; 

    (function() { 
    var e = document.createElement('script'); 
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
    e.async = true; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 

Ceci est mon code init ..

Answer 1

Selon le FaceBook JavaScript SDK Documentation il vous suffit de créer fbAsyncInit() fonction. Elle sera exécutée dès FB sera prêt:

var fbAsyncInit = function() { 
    // FB is ready 
}; 

Answer 2

Je l'ai fait une fonction window.fbReady(), qui se comporte comme la fonction de prêt jQuery, de la manière qui exécutera la fonction que vous lui donnez si l'objet FB est chargé ou l'ajoutera à une file d'attente sinon.

;(function(){ 
    // Function to have a list of functions to load on fbAsyncInit 
    var toLoad = [] 
    window.fbReady = function(func){ 
    if(typeof func === 'function') { 
     if(window.FB) { 
     func.call(window) 
     } else { 
     toLoad.push(func) 
     } 
    } 
    } 

    window.fbAsyncInit = function() { 
    FB.init({ 
     appId: FACEBOOK_API_KEY, 
     status: true, 
     cookie: true, 
     xfbml: true 
    }) 

    // Execute all the fbAsyncInit functions 
    toLoad.forEach(function(func){ 
     func.call(window) 
    }) 
    }; 
})(); 
(function(d, debug){ 
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement('script'); js.id = id; js.async = true; 
    js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js"; 
    ref.parentNode.insertBefore(js, ref); 
}(document, /*debug*/ false)); 

Answer 3

Vous devez insérer une fonction de FB dans la window.fbAsyncInit, mais pas dans FB.init(), parce qu'il recive comme paramether juste un éventail d'options. Votre code devrait ressembler à:

window.fbAsyncInit = function() { 
    FB.init({ 
     appId : '<?php echo $conf['fb']['appid']; ?>', 
     status : true, // check login status 
     cookie : true, // enable cookies to allow the server to access the session 
     xfbml : true // parse XFBML 
    }); 

    // at this level, the FB library is ready 
    FB.Canvas.setAutoResize(); 
    FB.getLoginStatus(function(resp){ console.log(resp) }); 
    FB.any_fb_function(); 

    (function() { 
     var e = document.createElement('script'); 
     e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
     e.async = true; 
     document.getElementById('fb-root').appendChild(e); 
    }()); 
};