FB fonction init donne la mauvaise version d'erreur

**Avertissement - C'est purement de la spéculation. Semble avoir résolu mon problème.

J'ai eu ce problème sur un projet récent. Je pense que c'est un problème de latence. Le Facebook SDK exige que <div id="fb-root"></div> être sur la page. Ce devrait être la première chose après l'ouverture de la balise body. Après cela, vous pouvez voir votre code d'initialisation.

Pour moi, cette question n'a pas été uniforme. J'ai l'occasion de voir le bug, et parfois je ne le seraient pas. Donc, ma conclusion que c'était un problème de latence. Si le SDK ne peut pas trouver le fb-root, alors il faut en créer un. Ici, c'est où je crois que le problème de latence existe.

Essayez d'ajouter ce juste après l'ouverture du corps de la balise, mais avant que votre FB.init({});.

<div id="fb-root"></div>

Cela semble avoir résolu le problème pour moi et j'espère aider les autres. Le v1.0 la documentation explique la raison pour fb-root, mais la v2.0 docs font aucune mention de l'élément, sans doute parce que le script d'initialisation vais l'ajouter pour vous si elle ne le trouve pas.

Ajouter &version=v2.0 js.src, comme suit:

(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#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

j'ai remplacé cette

js.src = "//connect.facebook.net/en_US/sdk.js";

avec cette

js.src = "//connect.facebook.net/en_US/all.js";

et travaillé 🙂

Ce qui se passait pour moi aussi avec une grande incohérence. Quelque part mon intuition dit, il est obtenu d'être un problème de synchronisation. Plus de débogage, trouvé une erreur dans la console développeur manuellement par l'exécution de "FB.login()". L'erreur a dit, "init pas appelé en cours de validité avec la version".

Dans mon cas, j'étais en ajoutant //connect.facebook.net/en_US/sdk.js comme une balise script dans l'en-tête de la page html et le window.fbAsyncInit est venu dans un autre fichier, juste après que. Cette pointu pour moi comme un problème de timing et donc j'ai échangé ces 2 balises de script. Maintenant, une fois que j'avais compris window.fbAsyncInit avant, y compris //connect.facebook.net/en_US/sdk.js, le problème avait disparu. Espérons que cela aide les autres.

J'ai résolu cette erreur par le chargement du script sur le document prêt au lieu de document de la charge.

Par exemple, ce qui a donné l'erreur d'environ 10% du temps:

$(window).load(function(){
  (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'));
});

alors que cela fonctionne tout le temps:

$(window).ready(function(){
  (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'));
});

Pour single page applications (Réagir dans mon cas)

En single page applications que vous avez moins de contrôle sur l'ordre dans lequel le code sera exécuté. Parfois, le script sera chargé par le temps que vous appelez votre code, parfois pas.

Pour le faire fonctionner indépendamment du fait que le facebook script a déjà chargé ou pas, je fais une vérification si le FB variable globale est déjà défini au moment de l'exécution du code. Si oui, je viens de faire un normal initialiser, sinon je fournir la fonction de rappel.

C'est mon code:

export function initializeFacebookSdk() {

  /* Asynchronous flow: if the global 'FB' variable is still undefined,
     then the facebook script hasn't loaded yet, in that case, provide
     a global callback that will be called by the facebook code. If the 
     variable is already present, just call the code right away and forget
     about the callback. */
  if(window.FB === undefined) {
    console.log('FB undefined -> provide callback');
    window.fbAsyncInit = function() {
      initialize();
    };
  }
  else {
    console.log('FB defined -> call init right away');
    initialize();
  }

  function initialize() {
    window.FB.init({
      appId      : '492331311256888',
      cookie     : true,
      xfbml      : true,
      version    : 'v3.2'
    });    
  }
}

Dans mon fichier html je viens d'offrir le script donné par facebook, et dans mon code, je peux appeler initializeFacebookSdk() où et quand je veux:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My application</title>
  </head>
  <body>    
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>

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

    <div id="root"></div>
  </body>
</html>

J'ai eu le même problème quand j'ai essayé d'incorporer un simple Facebook post dans un article que j'ai écrit.

<div id="fb-root"></div><script>(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#xfbml=1&amp;version=v2.3";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/feyenoord/posts/10153224326681816:0" data-width="500"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/feyenoord/posts/10153224326681816:0"><p>Een teleurstellende middag in De Kuip. Ook ADO Den Haag bleek vanmiddag te sterk voor Feyenoord. http://bit.ly/1UA3ZxZADO Den Haag too strong for Feyenoord. http://bit.ly/1UA6rEN</p>Posted by <a href="https://www.facebook.com/feyenoord/">Feyenoord Rotterdam</a> on&nbsp;<a href="https://www.facebook.com/feyenoord/posts/10153224326681816:0">Sunday, January 31, 2016</a></blockquote></div></div>

Quand j'ai débogué le Facebook sdk.js j'ai vu que l' .getVersion retourné "undefined" et donc pas rendu le widget.

Apparemment, Facebook ne peut pas gérer passant requête de paramètres séparés par des & au lieu de & lors du chargement de la sdk.js. J'avais changé mon code pour & pour la validation des raisons.

Works:        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
Doesn't Work: js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";

Vous utilisez le cordova-plugin-facebook4 plugin, et c'est un message d'erreur personnalisé qui signifie que l'initialisation n'a pas fini d'lorsque le facebook de l'api de la fonction est appelée. Car le plugin ne permet pas de donner une waitForInitialize utiliser setTimeout et puis de réessayer la méthode de l'api est le meilleur pari.

var retryFunc = (iteration) => {
    return new Promise((s, f) => facebookConnectPlugin.getLoginStatus(s, f))
    .then(authentication => authentication.status === 'connected')
    .then(isLoggedIn => {
        /* Your Code Here */
    })
    .catch(failure => {
        console.log(`Waiting for Facebook Init. Iteration: ${iteration || 0}`);
        if((iteration || 0) < 10) { 
            return new Promise((s, setTimeout(() => s(), 1000)
            .then(() => retryFunc(null, (iteration || 0) + 1);
        }
        else { return Promise.reject({Error: 'Failed to check login status.', Detail: failure}); }
    });
};

retryFunc();
/* Or replace getLoginStatus with your api call. */

• Message D'Erreur
• Plus d'infos

Assurez-vous que vous utilisez https:// dans l'URL

js.src = "https://connect.facebook.net/en_US/sdk.js";

Je ne l'aurais pas cru ce soit, mais la seule différence entre ce que Facebook a leur actuel des exemples de code et ce que j'ai est https:// au lieu de // pour l'url.

La mise à jour https://semble avoir fixé pour moi et je ne peut pas reproduire l'erreur.

Aussi, si vous êtes en train de faire toutes les vérifications d'ailleurs dans ton code pour voir si FB est défini assurez-vous de vérifier if (window.FB) et pas if (FB) ou vous obtiendrez une erreur.

//call after manually adding DOM nodes containing FB widgets
if (window.FB)
{
    window.FB.XFBML.parse()
}

Si vous utilisez la machine, vous devez ajouter quelque chose comme ceci:

interface Window
{
    FB: IFacebook;
}

interface IFacebook
{
    XFBML: any;
    ui: any;
    getLoginStatus(callback: (response: { status: string }) => any);
    login(callback: (response) => any, options: any);
    logout(callback: () => any);
    Event: any;
    api(url: string, callback: (response: any) => any);
}

window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxx', //App ID
      status     : false, 
      version:  'v2.0',
      cookie     : true, 
      xfbml      : false  //parse XFBML
    });
};

Il y a une erreur de la version: 'v2.0',
Ce n'est pas un code valide