web-dev-qa-db-fra.com

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

Le code suivant, copié de la documentation de Facebook ici , ne fonctionne pas pour moi sous 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 aucun problème avec le SDK dans Firefox ou Safari, juste Chrome.

javascriptgoogle-chromefacebookfacebook-javascript-sdk
39
Alex Miller

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.

51
pbz

Le problème est donc que vous n'attendez pas que l'initialisation soit terminée. Cela entraînera des résultats aléatoires. 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 qu'une fois que tout sera chargé, la fonction facebookInit sera disponible et 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
}
49
Matty

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.

23
Todd Kamin

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 qui é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 pratiquement tout fait mais qui n'arrive toujours pas à le faire fonctionner ... 

Oh Boy ... ^^

5
Woppi

J'avais un cody très désordonné qui chargeait le javascript de Facebook via AJAX et je devais m'assurer que le fichier js était complètement chargé avant d'appeler FB.init Cela semble fonctionner pour moi.

    $jQuery.load( document.location.protocol + '//connect.facebook.net/en_US/all.js',
      function (obj) {
        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
        });
        //ANy other FB.related javascript here
      });

Ce code utilise jquery pour charger le javascript et faire la fonction callback onLoad du javascript. c'est beaucoup moins salissant que d'avoir créé un eventlistener pour le bloc onLoad qui au final ne fonctionnait pas très bien sur IE6, 7 et 8

4
Nick Lim

Essayez de charger en 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>
4
beshkenadze

AdBlock bloque les scripts de l'API JS de Facebook, car il est lié à Facebook Connect, ce qui est souvent agaçant. 

3
eggie5

Je ne suis pas sûr si vous rencontrez toujours ce problème, mais je viens d'avoir le même problème, il s'est avéré que j'avais une extension en cours qui bloquait Facebook de tous les sites Web autres que Facebook. Handicapé, a travaillé!

2
Hosh Sadiq

Utilisez setTimeout, car parfois le fichier FB.init prend un certain temps pour être déclaré

function testAPI() {
     console.log('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
         console.log('Good to see you, ' + response.name + '.');
     });
}
function login() {
    FB.login(function(response) {
        if (response.authResponse) {
            testAPI();
        } else {
            // cancelled
        }
    });
}
setTimeout(function() {
    login();
},2000);
2
Allan Juliani

Pour tester les suggestions de Mattys à propos de FB qui ne termine pas, je mets une alerte dans le script. Cela cause un retard que je pourrais contrôler. Bien sûr… c'était un problème de timing.

    $("document").ready(function () {
        // Wait...
        alert('Click ok to init');
        try {
            FB.init({
                appId: '###', // App ID
                status: true, // check login status
                cookie: true, // enable cookies to allow the server to access the session
                xfbml: true  // parse XFBML
            });
        }
        catch (err) {
            txt = "There was an error on this page.\n\n";
            txt += "Error description: " + err.message + "\n\n";
            txt += "Click OK to continue.\n\n";
            alert(txt);
        }
        FB.Event.subscribe('auth.statusChange', OnLogin);
    });
1
Scott Savage

J'ai eu le même problème et la seule solution que j'ai trouvée a été de mettre tout ce qui utilisait l'instruction FB dans le script init. J'ai également utilisé le chargement asynchrone, de sorte que la fonction de rappel est après tout ce qui nécessite FB. J'ai une page commune dinamycalement chargée avec php tant de parties ont besoin de différentes fonctions de facebook contrôlées par php si des déclarations qui rendent tout un peu brouillon, mais qui fonctionnent !. Si j'essaie d'extraire une déclaration de FB du script de chargement, alors Firefox affiche le message "Le FB n'est pas défini" . J'espère que cela vous aidera.

1
Juan

Il y a une solution pour vous :)

Vous devez exécuter votre script après le chargement de la fenêtre

si vous utilisez jQuery, vous pouvez utiliser un moyen simple:

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'your-app-id',
            xfbml      : true,
            status     : true,
            version    : 'v2.5'
        });
    };

    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<script>
$(window).load(function() {
    var comment_callback = function(response) {
        console.log("comment_callback");
        console.log(response);
    }
    FB.Event.subscribe('comment.create', comment_callback);
    FB.Event.subscribe('comment.remove', comment_callback);
});
</script>
1
manhhaiphp

J'ai eu le même problème et j'ai trouvé la cause.

J'ai avast! L'antivirus installé sur mon ordinateur m'a demandé d'installer la mise à jour pour le plugin chrome. Le nouveau avast! plugin for chrome permet de bloquer les annonces et le suivi et, par défaut, bloque l'accès à Facebook. J'ai résolu mon problème en autorisant simplement facebook dans l'avast! plugin chrome pour le site dont j'avais besoin.

Comme cette question est très ancienne, je pense que certaines personnes pourraient avoir la même cause que moi, la nouvelle avast! plugin chrome.

1
Diego Malone

Essayez de charger vos scripts dans la section Head ..__ De plus, il sera préférable de définir vos scripts sous un appel du type: document.ready, si vous avez défini ces scripts dans la section body

1
Stoic

J'ai eu un problème similaire et il s'est avéré être Adblocker Pro. Assurez-vous de vérifier que cette extension ou d'autres extensions bloquantes ont été désactivées. J'ai perdu environ 1h30 à cause de ça. Sentez-vous comme un noob;)

0
rupert_b

J'ai eu le même problème. La solution était d'utiliser core.js au lieu de debug.core.js

0
Mangirdas

Facebook préfère que son SDK soit chargé de manière asynchrone afin de ne bloquer aucun autre script nécessaire à votre page. En raison de la variable iframe, il est possible que la console tente d'appeler une méthode sur l'objet FB avant que celui-ci ne soit complètement créé même si FB n’est appelé que dans la fonction fbAsyncInit.
Essayez de charger le javascript de manière synchrone et vous ne devriez plus avoir l'erreur. Pour ce faire, vous pouvez copier et coller le code fourni par Facebook et le placer dans un fichier .js externe, puis inclure ce fichier .js dans une balise <script> dans le <head> de votre page. Si vous devez charger leur SDK de manière asynchrone, vérifiez si le FB a été créé avant d'appeler la fonction init. 

0
Trevino Jarrett