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）。