fb: кнопка входа не отображается в Firefox, IE или Opera, но отлично работает в Chrome

Казалось, что это произошло без каких-либо изменений с моей стороны. Внезапно любой браузер, кроме Chrome, не обрабатывал тег fb: login-button, он просто отображал любой текст внутри тега как простой текст.

После нескольких часов рыскания по сети в поисках возможных причин / решений я не нашел ничего, что могло бы помочь в этом конкретном поведении.

Итак, я создал самый простой пример, который мог проиллюстрировать проблему, и поместил его здесь: http://silverbucket.net/examples/fblogin/welcome.htm

В приведенном выше примере показано поле fb-login в Chrome, но не в Firefox, IE или Opera.

Таким образом, то, что находится на странице по приведенной выше ссылке, сначала есть тег html вверху, который у меня есть:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" lang="en">

В голове у меня:

<script src="http://connect.facebook.net/en_US/all.js"></script>

В теле, чуть ниже шапки, у меня:

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

Затем есть настоящая кнопка входа в систему:

<fb:login-button scope="email, user_interests, user_likes, publish_stream">log in with facebook</fb:login-button>

И внизу страницы, прямо перед закрытием тега body, у меня есть FB JavaScript:

<script>
  $(document).ready(function() {
    window.fbAsyncInit = function() {
      FB.init({
        appId   : '153787078069017',
        cookie  : true, // enable cookies to allow the server to access the session
        xfbml   : true, // parse XFBML
        //channelUrl : '/channel.html', // channel.html file
        oauth   : true, // enable OAuth 2.0
        status : false
      });

      // whenever the user logs in, we refresh the page
      FB.Event.subscribe('auth.login', function(response) {
        if (response.authResponse) {
          window.location.href="http://example.com/fblogin";
        }
      });
    };

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

Ничего сложного ... и это происходит не только с моим Firefox, но и со всеми коллегами, с которыми я встречался.


person Nick Jennings    schedule 20.03.2012    source источник


Ответы (2)


Я бы посоветовал переместить window.fbAsyncInit = function() { за пределы $(document).ready(function() {. Это должно дать браузеру более согласованные результаты.

person DMCS    schedule 20.03.2012
comment
Большое спасибо за ваше предложение, это помогло. Интересно, почему так долго работало, а потом решил сломаться. - person Nick Jennings; 21.03.2012
comment
Все дело в том, как браузер загружает различные ресурсы независимо от того, загружаются они последовательно или параллельно. А также, в каком порядке они загружаются. Также следует отметить, какие файлы браузеру не нужно загружать, а лучше брать из локального кеша. Лучше всего определить window.fbAsyncInit как можно раньше, чтобы его можно было запустить после окончательной загрузки SDK. :) Удачного кодирования! - person DMCS; 21.03.2012
comment
Ах я вижу. Это странно, потому что есть много примеров и писем от людей, которые говорят, что его не следует инициализировать до тех пор, пока весь документ не будет полностью завершен. - person Nick Jennings; 21.03.2012

Это снимок в темноте, но попробуйте добавить свой div fb-root перед фактическим кодом, включая кнопку входа в систему, если это возможно.

Это устранило некоторые причуды fb, с которыми я сталкивался раньше.

person Nikhil    schedule 20.03.2012
comment
Я обновил ссылку в примере с помощью div fb-root чуть ниже заголовка страницы. похоже, не имеет никакого эффекта. - person Nick Jennings; 20.03.2012