FB не определено, хотя я только использовал это - PullRequest
Новая
       2

FB не определено, хотя я только использовал это

10 голосов
/ 13 октября 2011

Я пытаюсь добавить кнопку «Мне нравится» в Facebook для создаваемого виджета.Код, который я использую для добавления кнопки «Мне нравится» на Facebook, выглядит следующим образом:

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

*Функция changeView также существует в JavaScript.

Когда я запускаю код, я получаю сообщение об ошибке: Uncaught ReferenceError: FB is not defined, даже если кнопка создана.Ошибка указывает на строку, содержащую код FB.XFBML.parse.Есть ли что-то, что мне нужно сделать по-другому в моем JavaScript?

Ответы [ 3 ]

15 голосов
/ 19 декабря 2012

У меня была эта проблема, и я решил ее аналогично решению, предоставленному Амри, поэтому я публикую ее здесь на случай, если кому-то еще понадобится ее использовать.

Я исходил из предположения, что вызов инициализации FB, выполненный в методе fbAsyncInit, будет инициализирован немедленно, поэтому я тоже закодировал использование объекта FB в методе $(document).ready(). Это не относится к делу. fbAsyncInit занимает довольно много времени после загрузки страницы, чтобы завершить инициализацию. Вот мое решение, при использовании jQuery на моем сайте: 

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

Последняя задача - просто переключить ваш код $(document).ready() на привязку для вашего мероприятия. Это происходит везде, где вы используете объект FB. 

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

})(jQuery);

Я должен также упомянуть одну вещь: Firefox гораздо более терпим к этому, чем браузеры Webkit, такие как Chrome. Я не мог понять, почему ни один из моих jQuery не работал должным образом в Chrome ... ну, вот почему.

Надеюсь, это кому-нибудь поможет.

15 голосов
/ 13 октября 2011

Смысл этого большого блока сценариев, начинающегося с window.fbAsyncInit, заключается в том, что SDK Facebook загружается асинхронно .

Даже если у вас есть вызовы против FB внутриобратный вызов готовности документа jQuery, которого недостаточно для обеспечения загрузки SDK при выполнении этого кода.

К счастью, window.fbAsyncInit существует для точно для этой цели: он не будетзапускаться до загрузки SDK.

Из Документы Facebook :

Функция, назначенная на window.fbAsyncInit, запускается сразу после загрузки SDK.Любой код, который вы хотите запустить после загрузки SDK, должен быть помещен в эту функцию и после вызова FB.init.Например, здесь вы можете проверить статус пользователя, вошедшего в систему, или подписаться на любые события Facebook, в которых заинтересовано ваше приложение.

5 голосов
/ 13 октября 2011

FB еще не был определен на тот момент.Вы еще не использовали его, вы просто набрали его ранее.Строка FB.XFMBL.parse будет выполнена, когда документ будет готов.То же самое касается линии //connect.facebook.net/en_US/all.js.Поэтому не совсем понятно, какой код будет выполняться первым, если он выполняется из того же события.

Что вы можете сделать, так это каким-то образом получить код, который вы хотите выполнить из window.fbAsyncInit.Начиная с этого момента, вы можете быть уверены, что FB готов к использованию.

Один из способов сделать это, если вы не хотите смешивать код, который у вас есть в widget.js, это использовать jQuery'sпользовательское событие.Таким образом, вместо $(function() { ... }); у вас будет что-то вроде этой строки: 

$(window).bind('fbAsyncInit', function() {
  // Your code here
});

Тогда у вас будет window.fbAsyncInit call $(window).triggerHandler('fbAsyncInit') сразу после линии FB.init().

...