fb:login-button не се показва във Firefox, IE или Opera - но работи добре в Chrome

Това изглежда се случи без никакви промени от моя страна. Изведнъж всеки браузър освен Chrome не обработва маркера fb:login-button, а просто показва всеки текст в маркера като обикновен текст.

След като ровех мрежата с часове, търсейки възможни причини/решения, не намерих нищо, което да се отнася до това конкретно поведение.

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

Горният пример показва поле за вход във fb в 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:

<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

Това е изстрел в тъмното, но опитайте да добавите вашия fb-root div преди действителния код, включително бутона за влизане, ако това е възможно.

Това реши някои от фб странностите, с които съм се сблъсквал преди.

person Nikhil    schedule 20.03.2012
comment
актуализирах примерната връзка с fb-root div точно под заглавката на страницата. изглежда няма ефект. - person Nick Jennings; 20.03.2012