Facebook登录按钮没有显示

Question

我在网站上使用Facebook登录，以方便用户登录或注册，但我只是意识到登录按钮不显示，如果我登录到Facebook。如果我注销，它将显示预期的方式。

它曾用于之前，也许提前2个月但现在不起作用。

的FB：登录标签这样使用：

<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的（这似乎是在按钮不会有时显示的唯一情况）。然后，它检查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初始化代码：。

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 2

这是一个比较简单的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> 

想必，你有一个JS功能，当有人用Facebook的会话点击上面的Facebook登录按钮处理登录。

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 3

据，如果你有show-faces属性设置为true并且用户已经登录Facebook的文档，也没有登录按钮将显示。尝试将其更改为false所以登录按钮甚至表示，如果用户登录

您可以在这里找到更多信息。https://developers.facebook.com/docs/reference/plugins/login/

Answer 4

从这个SDK的按钮永远不会显示出来，如果你不至少通过Apache服务器打开它（又名localhost：xxxx）。