it-swarm.com.de

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

Ich benutze Facebook als Mitgliedssystem meiner Website. Der Code wird verwendet, um ein Login-Steuerelement zu generieren, mit dem sich Benutzer über ihr Facebook-Konto anmelden können. Es ist im Wesentlichen ein Klick, wenn sie bereits Mitglied sind, 2 wenn dies nicht der Fall ist (für die Erteilung von Berechtigungen).

Ich habe jedoch ein Problem ... Rückmeldungen deuten darauf hin, dass der Login-Button nicht immer korrekt geladen wird. Anstatt das Facebook-Login-Steuerelement zu laden, gibt es (im Text) einfach "Login über Facebook" an.

Tests zeigen, dass dies der Fall ist, wenn das Facebook-Javascript-SDK (aus welchem ​​Grund auch immer) nicht vollständig geladen wird. Ich habe Fälle gesehen, bei denen ein # in der URL das Laden des SDK verhindert.

Wie sollte ich feststellen, ob das SDK für Facebook-Javascript geladen wurde und bereit ist, um dieses Problem besser zu unterstützen? Wenn dies fehlschlägt, kann ich dem Benutzer so eine Notiz hinterlassen.

So wird es aktuell zur Seite hinzugefügt:

<script>
window.fbAsyncInit = function () {
FB.init({
  appId: '***************',
  status: true,
  cookie: true,
  xfbml: true
});
FB.Event.subscribe('auth.login', function (response) {
  window.location.reload();
});

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

</script>
30
Chaddeus

Sie sollten die Javascript Library asynchron laden und alle Ihre FB-bezogenen Funktionen in die window.fbAsyncInit-Methode einfügen: 

<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 = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Dieser Code lädt das SDK asynchron, sodass das Laden von .__ nicht blockiert wird. andere Elemente Ihrer Seite. Dies ist besonders wichtig, um sicherzustellen, dass Schnelles Laden von Seiten für Benutzer und SEO-Roboter.

Die URLs im obigen Code beziehen sich auf das Protokoll. Dies lässt die Browser, um das SDK über dasselbe Protokoll (HTTP oder HTTPS) wie .__ zu laden. enthaltende Seite, die Warnungen "Unsicheren Inhalt" verhindert.

Die Funktion, die window.fbAsyncInit zugewiesen ist, wird ausgeführt, sobald das SDK wird geladen Jeder Code, den Sie nach dem Laden des SDK ausführen möchten sollte innerhalb dieser Funktion und nach dem Aufruf von FB.init..__ platziert werden. Zum Beispiel hier würden Sie den angemeldeten Status von .__ testen. Benutzer oder Abonnieren Sie alle Facebook-Ereignisse , in denen sich Ihre Anwendung befindet interessiert.

Ein schnelles 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 = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
<a href="#" onclick="checkIfLoaded();">Check</a>

enter image description here
(Klicken Sie mehrmals auf den Link check.)


Bitte beachten Sie, dass Sie die Login-Link-Serverseite und AUCH OHNE JavaScript erstellen können. Beispiel mit dem PHP-SDK

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

Löst 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ör auf die Veranstaltung wie folgt:

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

Suchen Sie nach dem FB-Objekt nach dem Laden des Synchronisations-/Async-Vorgangs des FB JS SDK wie angegeben:

            if (typeof FB !== 'undefined') {
                alert("FB JS API is available now");
            } else {alert("do something...")}

Dies ist eine genügende Prüfung, um eine auf Facebook JS API bezogene Methode sicher aufzurufen.

4
Mohammad Arif

Laut dieser Seite http://www.techsirius.com/2014/04/detect-social-SDK-didnt-load.html

$(window).load(function(){
   if(typeof window.FB == 'undefined'){
       alert('Facebook SDK is unable to load, display some alternative content for visitor');
   }
   else{
      alert('Facebook is working just fine');
   }
});
3
Atul

Welche Globals führt diese JS-Datei ein?

Nehmen wir an, es schafft eine 

var FaceBook = function() {//make friends! Or whatever...}

Sie können auf if (FaceBook) testen und von dort aus gehen.

Es ist wahrscheinlich, dass sie sozusagen eine Art Lastereignis erhalten, wenn ihr Framework hochgefahren ist.

3
Alex Mcp

Wenn Sie jQuery verwenden (und Sie jQuery vor der FB-Initialisierung geladen haben), können Sie 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 = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

</script>

An anderer Stelle (in einer JS-Datei) können Sie dies tun (der Schlüssel dieser Methode ist, Sie können dies an beliebig vielen Stellen angeben, und sie werden alle ausgelöst):

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

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

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

2
Simon_Weaver

Promise-basierte Version für moderne Browser

// Load Facebook JS SDK
(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#xfbml=1&version=v2.11';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Create a new promise, set to resolve using the global function `fbAsyncInit`,
// which the Facebook JS SDK will call once it's ready.
(new Promise((resolve, reject) => {
  window.fbAsyncInit = resolve;
}).then(() => {
  // ... your code here ...
});
2
Brad

Ich benutze das ab einigen Tagen:

var isLoaded = false;

$(document).on('DOMSubtreeModified', function () {
    if ($('#fb-root').length && !isLoaded) {
        isLoaded = true;

        // ...
    }
});

Was denkst du ?

0
Monkey Monk

Wie in anderen Antworten angegeben; danke an @ifaour & @Leo Romanovsky; Der beste Weg, um zu ermitteln, ob das SDK erfolgreich geladen wurde, ist das Auslösen eines Ereignisses beim Aufruf von fbAsyncInit. 

Wenn das Ereignis erfasst wird, wird das SDK geladen. Der folgende Code zeigt, wie dies erreicht werden kann:

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

    // Fire an event when the FB library asynchronously is loaded
    $("#fb-root").trigger("facebook:init");

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (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>

// Somewhere else in the code
$(document).ready(function () {
    $("#fb-root").bind("facebook:init", function () {
        console.log("The event is fired FB SDK object is ready to be used.");
    });
});

Falls das Ereignis nicht ausgelöst wird, können Sie einen Timer hinzufügen, um zu prüfen, ob das FB-Objekt "undefined" ist, und die entsprechende Meldung anzuzeigen.

Hinweis 1: Es kann zu Verzögerungen kommen, bis dieses Ereignis ausgelöst wird.

Hinweis 2: "" Die Rückmeldung besagt, dass der Login-Button nicht immer korrekt geladen wird. " Ich weiß, dass FFv49 privates Browsing den Aufruf von fb blockiert.

0
Ithar
var FB;
jQuery.fbInit = function(app_id) {
    window.fbAsyncInit = function() {
        FB.init({
            appId      : app_id, 
            status     : true, 
            channelUrl: '#', 
            cookie     : true, 
            xfbml      : true  
        });
        FB = FB;
        getLoginStatus();
    };
    // Load the SDK Asynchronously
    (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/it_IT/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));

    $('<div />').attr('id','fb-root').appendTo('body');
};

/**
 * https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
 */
function getLoginStatus() {
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            $('#fb-root').trigger('facebook:init',[response]);
        } else if (response.status === 'not_authorized') {
            $('#fb-root').trigger('facebook:init',[response]);
        } else {
            $('#fb-root').trigger('facebook:init',[response]);
        }
    });
}

Wenn Sie den Status eines anderen Javascript überprüfen möchten (mit dem Vorschlag von @Leo Romanovsky)

 $("#fb-root").on("facebook:init", function(event, response) {
        if(response.status === 'connected') {
            alert("logged with FB")
        }else{
            alert("No Logged with FB")
        }

    });
0
Barno

Laden Sie das Skript dynamisch (fügen Sie ein Skripttag aus js hinzu) und überprüfen Sie, ob Fehler/Erfolgsereignisse vorliegen.

0
Tom