FB est indéfini même si je l'ai juste utilisé

Je suis en train d'ajouter un Facebook Comme le bouton de widget que je suis en train de créer. Le code que j'utilise pour ajouter le Facebook comme le bouton de ma page est la suivante:

widget.html

<body>
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : '263071593731910',
            status : false, //check login status
            cookie : true, //enable cookies to allow the server to access the session
            xfbml  : true  //parse XFBML
        });
    };
    (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
</script>
<div id="fb-button"></div>
<script type="text/javascript" src="widget.js"></script>

widget.js

$(function(){
var fb = $(document.createElement("fb:like"));
fb.attr({
    href: data.facebook,
    send: false,
    layout: 'button_count',
    width: 70,
    'show_faces': false
});
$("#fb-button").empty().append(fb);
FB.XFBML.parse($("#fb-button").get(0));
FB.Event.subscribe('edge.create',changeView);
});

*La changeView fonction existe aussi bien dans le JavaScript.

Lorsque j'exécute le code, j'obtiens une erreur: Uncaught ReferenceError: FB is not defined même si le bouton est créé. L'erreur est pointant vers la ligne contenant FB.XFBML.analyser le code. Est-il quelque chose que je dois faire différemment dans mon JavaScript?

source d'informationauteur Dave Long

14

Le point de l'ensemble de ce gros bloc de script de départ avec window.fbAsyncInit est que le Facebook SDK est chargé de manière asynchrone.

Même si vous avez vos appels contre FB à l'intérieur d'un jQuery document prêt de rappel, ce n'est pas suffisant pour assurer le kit de développement est chargé lorsque ce code est exécuté.

Heureusement, window.fbAsyncInit existe pour exactement cette fin: il ne sera pas courir jusqu'à ce que le kit de développement a chargé.

De Facebook de docs:

La fonction attribuée à window.fbAsyncInit est exécuté dès que le SDK
est chargé. Le code que vous voulez exécuter après le SDK est chargé
doit être placé à l'intérieur de cette fonction et, après l'appel de FB.init.
Par exemple, c'est là où vous pouvez tester le statut de connexion de la
de l'utilisateur ou de vous abonner à Facebook d'événements dans lequel votre application est
intéressés.

J'ai eu ce problème et résolu de la même manière à la solution qui Amry fourni donc je poste ici au cas où quelqu'un d'autre a besoin de l'utiliser.

J'ai fait l'hypothèse de départ que le FB d'initialisation de l'appel lancé dans la fbAsyncInit méthode initialize immédiatement, donc j'ai aussi codé mon utilisation de FB objet dans un $(document).ready() méthode. Ce n'est pas le cas. fbAsyncInit prend assez peu de temps après le chargement de la page pour terminer l'initialisation. Voici ma solution, lors de l'utilisation de jQuery sur mon site:

<script type="text/javascript">

  window.fbAsyncInit = function() {

    FB.init({
      appId      : 'your_app_id', //App ID
      channelUrl : 'your channel',
      status     : true, //check login status
      cookie     : true, //enable cookies to allow the server to access the session
      xfbml      : true  //parse XFBML
    });
    jQuery(document).trigger('FBSDKLoaded'); //This is the most important line to solving the issue
  };

  //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#xfbml=1&appId=269187653191150";
     ref.parentNode.insertBefore(js, ref);
   }(document));

</script>

La dernière tâche est de passer simplement votre $(document).ready() code pour un bind pour votre événement. Cela va à l'endroit où vous vous trouvez à l'aide de la FB objet.

(function($) {
    $(document).bind('FBSDKLoaded', function() {
        //Code using the FB object goes here.
    });

})(jQuery);

Une chose que je dois également mentionner: Firefox est beaucoup plus tolérantes à ce que les navigateurs Webkit, comme le Chrome. Je ne pouvais pas comprendre pourquoi AUCUN de mes jQuery a été correctement son travail dans Chrome... eh bien, c'est pourquoi.

J'espère que cela aide quelqu'un.

5

FB n'était pas encore défini à ce point de temps. Vous n'avez pas encore utilisé, vous aviez tout simplement tapé plus tôt. Le FB.XFMBL.parse ligne s'exécute lorsque le document est prêt. En va de même pour la //connect.facebook.net/en_US/all.js ligne. Il n'est donc pas vraiment fiable le code qui sera exécuté en premier, si elle est exécutée à partir d'un même événement.

Ce que vous pouvez faire est en quelque sorte le code que vous voulez exécuter à partir d' window.fbAsyncInit. À partir de ce point, vous pouvez être sûr que FB est prêt à être utilisé.

Une façon que vous pouvez faire si vous ne voulez pas mélanger le code que vous avez dans widget.js est par l'utilisation de jQuery événement personnalisé. Alors au lieu d'avoir $(function() { ... });vous aurez quelque chose le long de cette ligne:
```
$(window).bind('fbAsyncInit', function() {
  //Your code here
});
```
Alors vous aurez window.fbAsyncInit appel $(window).triggerHandler('fbAsyncInit') juste après la FB.init() ligne.

Vous devez vous connecter pour publier un commentaire.