Question

这似乎在我没有任何改变的情况下发生。突然之间，除Chrome之外的任何浏览器都没有处理fb：login-button标签，它只是将标签中的任何文本显示为纯文本。

在网上搜寻数小时后，寻找可能的原因/解决方案，我发现没有解决这种特殊行为的问题。

所以，我已经创建了一个最基本的例子来说明问题，并把它放在这里： http://silverbucket.net/examples/fblogin/welcome.htm

上面的示例显示了Chrome中的fb登录框，但不包含在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：

<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上，而且我也检查过每一位同事。

Answer 1

我建议将window.fbAsyncInit = function() {移到$(document).ready(function() {之外。这应该为浏览器提供更一致的浏览器结果。

Answer 2

这是一个黑暗的镜头，但尝试在实际代码之前添加你的fb-root div，包括登录按钮，如果可能的话。

这解决了我之前遇到的一些fb怪癖。

fb：登录按钮没有显示在Firefox，IE或Opera中 - 但在Chrome中运行正常

2 个答案: