Gibt es eine Möglichkeit zu erkennen, ob das Facebook Javascript SDK erfolgreich geladen wurde?

Lösung:

Sie sollten die Javascript-Bibliothek asynchron laden und alle Ihre FB-bezogenen Funktionen in das window.fbAsyncInit Methode:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     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 = "https://connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Dieser Code lädt das SDK asynchron, sodass das Laden anderer Elemente Ihrer Seite nicht blockiert wird. Dies ist besonders wichtig, um schnelle Seitenladezeiten für Benutzer und SEO-Roboter zu gewährleisten.

Die URLs im obigen Code sind protokollrelativ. Auf diese Weise kann der Browser das SDK über dasselbe Protokoll (HTTP oder HTTPS) wie die enthaltende Seite laden, wodurch Warnungen vor „unsicheren Inhalten“ verhindert werden.

Die zugewiesene Funktion window.fbAsyncInit wird ausgeführt, sobald das SDK geladen ist. Jeder Code, den Sie nach dem Laden des SDK ausführen möchten, sollte in diese Funktion und nach dem Aufruf von eingefügt werden FB.init. Hier testen Sie beispielsweise den eingeloggten Status des Nutzers oder abonnieren alle Facebook-Events, an denen Ihre Bewerbung interessiert ist.

Ein kurzes Beispiel ist das folgende:

<div id="fb-root"></div>
<script>
  var isLoaded = false;
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    isLoaded = true;

    // Additional initialization code here
  };

  function checkIfLoaded() {
    if(isLoaded) console.log("LOADED!");
    else console.log("NOT YET!");

    return false;
  }

  // Load the SDK Asynchronously
  (function(d){
     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 = "https://connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
<a href="#" onclick="checkIfLoaded();">Check</a>

(Habe gerade auf das geklickt check ein paar mal verlinken)

---

Bitte beachten Sie, dass Sie den Login-Link weiterhin serverseitig erstellen können und OHNE JavaScript. Beispiel mit dem PHP-SDK:

$loginUrl = $facebook->getLoginUrl();
...
...
<a href="https://dasdev.de/<?php echo $loginUrl; ?>">
    <img src="http://static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif">
</a>

Lösen Sie ein Ereignis aus, wenn das SDK geladen wird:

window.fbAsyncInit = function() {
  FB.init({appId: "#{KeyManager.facebook_app_id}", status: true, cookie: true, xfbml: true});
  jQuery('#fb-root').trigger('facebook:init');
};

Und hören Sie sich das Ereignis wie folgt an:

$("#fb-root").bind("facebook:init", function() {
  ..
});

Wenn Sie jQuery verwenden (und jQuery vor der FB-Initialisierung geladen haben), können Sie einen Deferred verwenden, um eine zusätzliche Initialisierung auszuführen.

<script>
    window.fbLoaded = $.Deferred();

    window.fbAsyncInit = function() {

        FB.init({
            appId      : '----------',
            xfbml      : true,
            status     : true,
            version    : 'v2.7'
        });

        window.fbLoaded.resolve();
    };


    (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 = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

</script>

Dann können Sie dies an anderer Stelle (in einer JS-Datei) tun (der Schlüssel dieser Methode besteht darin, dass Sie dies an so vielen Stellen ablegen können, wie Sie möchten, und sie werden alle ausgelöst):

 window.fbLoaded.done(function () { alert('FB initialized'); });

Hinweis: Wenn die Initialisierung abgeschlossen ist, BEVOR Sie die done Ereignis wird es sofort ausgelöst (so funktionieren Deferreds). Sie können es also überall hinstellen.

Stellen Sie sicher, dass Sie testen, wie das Verhalten aussehen soll, wenn die API nie initialisiert wird (kommentieren Sie einfach die (function(d,s,id)... part

---

---

Anderer Beitrag