Problème du SDK Facebook Javascript: "le FB n'est pas défini"

Question

Le code suivant, copié à partir de la documentation de Facebook ici , ne fonctionne pas pour moi dans Chrome.

 <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
  appId  : 'YOUR APP ID',
  status : true, // check login status
  cookie : true, // enable cookies to allow the server to access the session
  xfbml  : true  // parse XFBML
});
</script>
 

Dans la console Javascript, je reçois:

 Uncaught ReferenceError: FB is not defined
 

Je n'ai pas de problèmes avec le SDK dans Firefox ou Safari, juste Chrome.

Answer 1

J'ai vu un cas où Chrome avait installé WidgetBlock qui bloquait le script Facebook. Le résultat était exactement ce message d'erreur. Assurez-vous de désactiver toutes les extensions susceptibles d'interférer.

Answer 2

Le problème est donc que vous n'attendez pas que l'initialisation soit terminée. Cela provoquera des résultats aléatoires, mais voici ce que j'utilise.

 window.fbAsyncInit = function () {
    FB.init({ appId: 'your-app-id', cookie: true, xfbml: true, oauth: true });

    // *** here is my code ***
    if (typeof facebookInit == 'function') {
        facebookInit();
    }
};

(function(d){
    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));
 

Cela garantira que, une fois que tout est chargé, la fonction facebookInit est disponible, puis exécutée. De cette façon, vous n'avez pas à dupliquer le code init chaque fois que vous voulez l'utiliser.

 function facebookInit() {
   // do what you would like here
}
 

Answer 3

Cette erreur apparaîtra également si vous omettez le point-virgule après la définition de fbAsyncInit.

 window.fbAsyncInit = function() {
    FB.init({
        appId: 'YOUR APP ID',
        status: true,
        cookie: true,
        xfbml: true
    });
    //do stuff
}; //<-- semicolon required!
 

Sans le point-virgule, la situation est la même que dans cet exemple plus court:

 var x = function () {
    console.log('This is never called. Or is it?');
}

('bar');
 

La fonction est appelée, car sans le point-virgule, la partie ('bar') est vue comme un appel à la fonction que vous venez de définir.

Answer 4

J'ai rencontré ce problème aussi et ce qui l'a résolu n'a rien à voir avec Facebook, mais le script précédent que j'ai inclus était en mauvais état.

 <script type="text/javascript" src="js/my_script.js" />
 

Je l'ai changé pour

 <script type="text/javascript" src="js/my_script.js"></script>
 

Et il fonctionne...

Weew ... j'espère que mon expérience pourra aider d'autres personnes coincées dans cette situation, qui a presque tout fait mais ne parvient toujours pas à le faire fonctionner ...

Oh Boy ... ^^

Answer 5

Essayez le chargement asynchrone: http://developers.facebook.com/docs/reference/javascript/fb.init/

 <div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR APP ID',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
  };

  (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);
  }());
</script>