fb:登录按钮不会出现在Firefox、IE或Opera中,但在Chrome中运行良好



我似乎没有任何改变。突然间,除了Chrome之外的任何浏览器都没有处理fb:login按钮标签,它只是将标签中的任何文本显示为纯文本。

在网上搜索了几个小时,寻找可能的原因/解决方案后,我没有发现任何能解决这种特殊行为的方法。

因此,我创建了一个最基本的例子来说明这个问题,并将其放在这里: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登录按钮:

<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上,而且发生在我联系过的每一位同事身上。

我建议将window.fbAsyncInit = function() {移动到$(document).ready(function() {之外。这将使浏览器之间的结果更加一致。

这只是一个未知数,但如果可能的话,请尝试在实际代码之前添加fb根div,包括登录按钮。

这解决了我以前遇到的一些联邦调查局的怪癖。

相关内容

最新更新