Question

我正在网站上使用facebook登录，以方便用户登录或注册，但我刚刚意识到，如果我登录到Facebook，则登录按钮不会显示。如果我退出，它会以预期的方式显示。

之前曾经工作过，也许是2个月之前，但它现在不起作用。

fb：login标签的使用方式如下：

<fb:login-button onlogin="myJScript();" />

...

<script type="text/javascript">
 window.fbAsyncInit = function() {
   FB.init({appId: '#{serviceBean.FACEBOOK_API_KEY}', status: true, cookie: true,
            xfbml: true});
  };
  (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>

所以没什么特别的......

使用此fb时有什么变化：登录？

Answer 1

根据Facebook文档，如果您将show-faces属性设置为true且用户已登录，则不会显示登录按钮。尝试将其更改为false，以便即使用户已登录也会显示登录按钮。

您可以在此处找到更多信息：https://developers.facebook.com/docs/reference/plugins/login/

Answer 2

我也一直在看这种行为，所以如果你发现了它的原因，请告诉我。

与此同时，我想出了一个解决方法：

此代码首先检查用户是否登录到Facebook（这似乎是有时按钮没有显示的唯一情况）。然后，它会检查Facebook登录按钮是否成功显示。如果确实出现了，我们会隐藏“备份按钮”。

使用JS检查登录状态：

*请注意，我正在使用JQuery代码（$（...）来检查按钮是否存在（任何具有类“.fb_button”的元素）并隐藏备份按钮。如果您不使用Jquery，你将不得不使用一些标准的Javascript。

function fbLoginBandaid() {

FB.getLoginStatus(function(response) {
    console.log( response );
    if ((response.status)&&(response.status=='connected')) {
        //They are logged into Facebook and are connected to our site.
    //if the Facebook button did not render, we'll show the backup
    if ($('.fb_button').length > 0) {
        $('.fbloginbackup').hide();
    }   
    }
    } else if ((response.status)&&(response.status=='notConnected')){
        //They are logged into facebook but not connected to this site
    //if the Facebook button did not render, we'll show the backup
    if ($('.fb_button').length > 0) {
        $('.fbloginbackup').hide();
    }   
    }
}); 

}

FB Init代码：

window.fbAsyncInit = function() {

   /*...ALL YOUR NORMAL CODE HERE */

    fbLoginBandaid(); //bandaid fixes facebook button not showing sometimes. This forces display of a backup button we've made. Sometimes, this cuases two working buttons to show: ours and the Facebok one that should always be appearing.
};

现在，在HTML中添加“备份”按钮：

  <!--Backup Button -->
    <a class="fbloginbackup" title="Login with Facebook" href="#" onclick="INSERT_YOUR_LOGIN_SCRIPT(); return false;"><img src="insert_your_button_here.png" width="154" height="22" /></a>
  <!-- Button that was supposed to work all the time -->
    <fb:login-button length="long" autologoutlink="false" onlogin="fbLogin()"></fb:login-button>

据推测，您有一个登录脚本可以处理已登录Facebook的用户的登录，因为您不会显示Facebook登录窗口。

希望这会有所帮助。

Answer 3

这是一个纯CSS的解决方案，它可能比我之前添加的Javascript解决方案更好。

我们将创建一个“备份”按钮（就像我提交的其他答案），但不是使用Javascript根据需要打开和关闭它，我们只需将它放在fbml Facebook按钮后面。您需要做的就是在按钮周围添加一个容器（例如下面的“facebookconnectbutton”div）

这样，只要Facebook按钮无法显示，我们的备份按钮就可以保存当天：

HTML

<div id="facebookconnectbutton">
  <!--Backup Button -->
    <a class="fbloginbackup" title="Login with Facebook" href="#" onclick="INSERT_YOUR_LOGIN_HANDLER_(); return false;"><img src="/images/fblogin_backup.png" width="154" height="22" /></a>
  <!-- Button that was supposed to work all the time. Use your code for this, not mine. -->
    <fb:login-button length="long"></fb:login-button>
</div>

据推测，当有Facebook会话的人点击上面的Facebook登录按钮时，你有一个处理登录的JS功能。

CSS

/* This is used to put the "original" fbml facebook button on top of our "backup" */
#facebookconnectbutton {
  position:relative; 
  height: 22px; /*whatever size your button is */ 
  width: 154px; /*whatever size your button is */ 
}
#facebookconnectbuttonsignin {
  margin: 0;
}
.fbloginbackup {
  position:absolute; 
  top: 0; 
  left: 0; 
  width: 154px; /*whatever size your button is */  
  height:22px; /*whatever size your button is */  
}
.fb_button  {
  position:absolute; 
  top: 0; 
  left: 0; 
  width: 154px; /*whatever size your button is */  
  height:22px;  /*whatever size your button is */ 
  z-index:101
}
/* End FB bandaid*/

Answer 4

如果您不通过至少一个Apache服务器（又名 localhost：xxxx ）打开它，那么此SDK 中的按钮将不会显示。

Facebook登录按钮未显示

4 个答案: