net - ¿Hay alguna manera de detectar si Facebook JavaScript SDK se cargó correctamente?

facebook js sdk login

Question

Uso Facebook como el sistema de membresía de mi sitio web. Utiliza el código para generar un control de inicio de sesión, lo que permite a los usuarios iniciar sesión a través de su cuenta de Facebook. Básicamente es un clic si ya son miembros, 2 si no lo son (para otorgar permisos).

Aunque tengo un problema ... los comentarios sugieren que el botón de inicio de sesión no siempre se carga correctamente. En lugar de cargar el control de inicio de sesión de Facebook, simplemente indica (en texto) "iniciar sesión a través de Facebook", que es lo que el botón de inicio de sesión diría si el control se cargó correctamente.

Las pruebas muestran que eso es lo que sucede cuando el facebook javascript SDK no se carga por completo (por el motivo que sea). He visto casos en los que un # en la url impide que se cargue el SDK.

Para respaldar mejor este problema, ¿cómo podría detectar si el javascript SDK de Facebook está cargado y listo? De esa forma, si falla, puedo dejar algún tipo de nota para el usuario.

Así es como se agrega actualmente a la página:

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

Answer 1

Versión basada en promesas, para navegadores modernos

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

Answer 2

¿Qué valores globales presenta este archivo JS?

Digamos que crea un

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

Puedes probar if (FaceBook) e ir desde allí.

Parece probable que te den algún tipo de evento de carga para cuando se inicia su framework, por así decirlo.

Answer 3

Cargue el script dinámicamente (agregue una etiqueta de script de js) y verifique los eventos de error / éxito.

Answer 4

Como se indica en otras respuestas; con agradecimiento a @ifaour y @Leo Romanovsky; La mejor forma de detectar si el SDK está cargado correctamente es activar un evento cuando se invoca el fbAsyncInit.

Si se captura el evento, se carga el SDK. El siguiente código muestra cómo se podría lograr esto:

<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.");
    });
});

En caso de que el evento no se active, podría agregar un temporizador para verificar si el objeto FB está ''indefinido'' y mostrar el mensaje apropiado.

Nota 1: Abajo puede haber un ligero retraso hasta que se active este evento.

Nota 2: "los comentarios sugieren que el botón de inicio de sesión no siempre se carga correctamente". Sé que la navegación privada FFv49 bloquea la llamada a fb.

Answer 5

De acuerdo con esta página 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'');
   }
});

Answer 6

Debe cargar la Biblioteca de Javascript de forma asíncrona y colocar todas las funciones relacionadas con FB dentro del método window.fbAsyncInit :

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

Este código carga el SDK de forma asíncrona, por lo que no bloquea la carga de otros elementos de su página. Esto es particularmente importante para garantizar cargas de página rápidas para usuarios y robots SEO.

Las URL en el código anterior son relativas al protocolo. Esto permite que el navegador cargue el SDK sobre el mismo protocolo (HTTP o HTTPS) como la página que lo contiene, lo que evitará las advertencias de "Contenido inseguro".

La función asignada a window.fbAsyncInit se ejecuta tan pronto como se carga el SDK. Cualquier código que desee ejecutar después de cargar el SDK debe colocarse dentro de esta función y después de la llamada a FB.init . Por ejemplo, aquí es donde probarías el estado de sesión del usuario o te suscribirías a cualquier evento de Facebook en el que tu aplicación esté interesada.

Un ejemplo rápido es el siguiente:

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

( Simplemente hizo clic en el enlace de check un par de veces )

Tenga en cuenta que todavía puede construir el enlace de inicio de sesión del lado del servidor y SIN JavaScript. Ejemplo usando el PHP-SDK :

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

Answer 7

Desencadenar un evento cuando se carga el SDK:

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

Y atrapa el evento así:

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

Answer 8

Lo uso desde hace algunos días:

var isLoaded = false;

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

        // ...
    }
});

Qué piensas ?

Answer 9

Si está utilizando jQuery (y ha cargado jQuery antes de la inicialización del FB), puede usar un Deferred para ejecutar una inicialización adicional.

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

Luego, en otro lugar (en un archivo JS) puede hacer esto (de hecho, la clave de este método es que puede colocarlo en tantos lugares como desee y todos se activarán):

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

Nota: Si la inicialización se completa ANTES de agregar el evento done , se activará inmediatamente (así es como funcionan los Deferreds). Entonces puedes ponerlo donde quieras.

Asegúrate de probar lo que quieres que sea el comportamiento si la API nunca se inicializa (solo comenta la (function(d,s,id)... part

Answer 10

Solo busque el objeto FB después de cargar FB JS SDK sync / async como se indica:

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

Es una verificación suficiente para llamar de forma segura a cualquier método relacionado con API JS de Facebook.

Answer 11

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]);
        }
    });
}

Si desea comprobar el estado de otro javascript (con la sugerencia de @Leo Romanovsky)

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

    });