Nicht erfasstes ReferenceError: FB wird bei Verwendung von FB.getLoginStatus nicht definiert

In Chrome erhalten Sie die Fehlermeldung: Nicht abgerufener ReferenceError: FB ist nicht definiert .

Ich möchte gerne ein benutzerdefiniertes Ereignis in der Initialisierungsfunktion von Facebook auslösen, fbAsyncInit () . Dann bin ich nicht darauf beschränkt, all meine FB-bezogenen Skripts in der Funktion fbAsyncInit auszuführen. Ich kann es überall hinstellen, indem ich einfach nur darauf höre, dass dieses benutzerdefinierte Ereignis ausgelöst wird.

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

    $(document).trigger('fbload');  //  <---- THIS RIGHT HERE TRIGGERS A CUSTOM EVENT CALLED 'fbload'
};

//MEANWHILE IN $(document).ready()
$(document).on(
    'fbload',  //  <---- HERE'S OUR CUSTOM EVENT BEING LISTENED FOR
    function(){
        //some code that requires the FB object
        //such as...
        FB.getLoginStatus(function(res){
            if( res.status == "connected" ){
                FB.api('/me', function(fbUser) {
                    console.log("Open the pod bay doors, " + fbUser.name + ".");
                });
            }
        });

    }
);

Ich habe den folgenden einfachen Ansatz verwendet und es funktioniert korrekt:

Im Abschnitt head lade ich das SDK:

<script type="text/javascript" src="//connect.facebook.net/en_US/sdk.js"></script>

Dann habe ich in der body Ihrer Seite, auf der sich Ihr eigentlicher Inhalt befindet, Folgendes verwendet:

<script>

  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    if (response.status === 'connected') {
      testAPI();

    } else if (response.status === 'not_authorized') {
      FB.login(function(response) {
        statusChangeCallback2(response);
      }, {scope: 'public_profile,email'});

    } else {
      alert("not connected, not logged into facebook, we don't know");
    }
  }

  function statusChangeCallback2(response) {
    console.log('statusChangeCallback2');
    console.log(response);
    if (response.status === 'connected') {
      testAPI();

    } else if (response.status === 'not_authorized') {
      console.log('still not authorized!');

    } else {
      alert("not connected, not logged into facebook, we don't know");
    }
  }

  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

  $(document).ready(function() {
    FB.init({
      appId      : '1119999988888898981989819891',
      xfbml      : true,
      version    : 'v2.2'
    });
    checkLoginState();
  });
</script>

Verwenden Sie einfach ein Skript mit Facebook SDK direkt im Tag

    <script type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID" id="facebook-jssdk"></script>

Wir waren mit demselben Problem konfrontiert, und da FB sdk nicht geladen wurde (oder mit Verzögerungen geladen wurde), verursachte dies in einigen Fällen Probleme (oder das Durchbrechen von Javascript), die davon abhängig waren.

Um dieses Problem zu beheben, haben wir alle Anrufe bezüglich facebook ..__ delegiert. Wir haben eine Funktion wie die folgende erstellt:

function callOnFBSDKLoad(callback){
    if (window.isFBInitialized) {
        callback();
    }
    else {
        jQuery(document).bind('fbInitialized', callback);
    }
}

Wo fbInitialized ein benutzerdefiniertes Ereignis ist, erfahren Sie mehr über benutzerdefinierte Ereignisse hier. Und window.isFBInitialized ist eine Variable, die beim Laden von SDK festgelegt wird.

callback ist die Methode, die FB-bezogene Ereignisse einschließt.

var FBLogin = function(){
   FB.login(...);
}

callOnFBSDKLoad(FBLogin)

PS: Bitte ignorieren Sie Syntax- und Namenskonventionen. Ich teile grundsätzlich die Idee, solche Probleme zu lösen.

Eine einfachere und solide Lösung. Rufen Sie eine Funktion auf, wenn das SDK geladen wird. Ich werde es triggerLoginCheck() nennen.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      //TO DO: Add your unique Facebook app ID (All numbers).
      appId      : '***unique_app_id***',
      cookie     : true,
      xfbml      : true,
      version    : 'v2.8'
    });
    //Call the function here
    triggerLoginCheck();

    FB.AppEvents.logPageView();   
  };

  (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>

Später, irgendwo, platzieren Sie das hier: 

function triggerLoginCheck() {       
       FB.getLoginStatus(function(response) {
       statusChangeCallback(response);
       console.log(response);  
       });
}

Es funktioniert gut für mich. Notwendig ist das Objekt "Log.info.bind".

var Log = {info: {bind: function () {alert ('Hi'); testAPI (); }}}