無法獲得fb登錄按鈕顯示

我可能做了幾件事情錯誤，因爲我是網絡編程的新手，但這裏是對我有的一些問題的嘗試，然後編碼如下。無法獲得fb登錄按鈕顯示

Fyi我正在Dreamweaver中完全本地化，只是打f11或任何在瀏覽器中測試。我沒有任何東西上傳到服務器，除了頻道文件，所以如果這是主要問題，讓我知道。

對於通道文件，我擁有的是一個完全空的文件（不包括html，body等），只是在下面的行。

<script src="//connect.facebook.net/en_US/all.js"></script>

這就是我需要的嗎？爲了顯示這個按鈕，我必須將所有的index.html和.css等放在與通道文件相同的位置嗎？

下面是我正在使用的代碼和下面的CSS放置。當我在瀏覽器中運行測試時，沒有藍色FB按鈕顯示。

<html> 
    <head> 
     <title>My Facebook Login Page</title> 
    <link href="fbstyle.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 

     <div id="fb-root"></div> 
     <script> 
     window.fbAsyncInit = function() { 
      FB.init({ 
      appId  : '[hidden]', // App ID 
      channelUrl : 'http://mysite/channel.html', // Channel File 
      status  : true, // check login status 
      cookie  : true, // enable cookies to allow the server to access the session 
      xfbml  : true // parse XFBML 
      }); 
     }; 
     // Load the SDK Asynchronously 
     (function(d){ 
      var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
      if (d.getElementById(id)) {return;} 
      js = d.createElement('script'); js.id = id; js.async = true; 
      js.src = "//connect.facebook.net/en_US/all.js"; 
      ref.parentNode.insertBefore(js, ref); 
     }(document)); 
     </script> 

     <div class="fb-login-button">Login with Facebook</div> 

    </body> 
</html>

這裏是字面上什麼也不做「用Facebook登錄」在屏幕上移動的文字上面的CSS。我所看到的只是在左上角顯示上面的常規文字。沒藍FB按鈕下方

@charset "utf-8"; 
/* CSS Document */ 

* 
{ 
    margin: 0; 
} 

body 
{ 
    background-color: #FFF 
} 

#fb-login-button 
{ 
    position: relative; 
    float: right; 
}

新的代碼編輯從Purusottam的評論 再次請原諒我的錯誤，因爲我是一個很新的程序員。

藍色Facebook登錄按鈕仍然不會顯示在左上角只有「login with facebook」文本：請參閱附加的圖像。

再次我在本地完成本地工作......我需要讓服務器上的所有文件顯示此按鈕？

<html> 
<head> 
    <title>My Facebook Login Page</title> 
<link href="fbstyle.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 

    <div id="fb-root"></div> 
    <script> 
    window.fbAsyncInit = function() { 
     FB.init({ 
     appId  : 'hidden', // App ID 
     channelUrl : 'http://mysite.net/channel.html', // Channel File 
     status  : true, // check login status 
     cookie  : true, // enable cookies to allow the server to access the session 
     xfbml  : true, // parse XFBML 
     oauth  : true}); 
     }; 
    // Load the SDK Asynchronously 
    (function() { 
      var e = document.createElement('script'); 
      e.type = 'text/javascript'; 
      e.src = document.location.protocol + 
       '//connect.facebook.net/en_US/all.js'; 
      e.async = true; 
      document.getElementById('fb-root').appendChild(e); 
      }()); 
     </script> 

    <div class="fb-login-button" show-faces="true" width="200" max-rows="5">Login with Facebook</div> 
    <script> 
     FB.login(function(response) 
     { 
      if (response.authResponse) 
     { 
      //login success 
     } 
     else 
     { 
     alert('User cancelled login or did not fully authorize.'); 
     } 

     }, {scope: 'permissions that app needs'}) 
    </script> 

</body>

這是當前的結果：

http://s17.postimage.org/y8oz0htq7/help.jpg

來源

2012-07-16 Chris Curra

請發佈您的完整代碼。特別是，包括JS SDK？ – 2012-07-16 01:58:49

我重寫了我的問題，並大大簡化了一些事情。還發布了代碼。感謝Laurent。 – 2012-07-16 07:21:27

對於像我這樣的傻瓜：首先檢查您的瀏覽器是否阻止彈出窗口... – 2015-07-23 02:21:15

當我看到你的代碼有兩件事是失蹤。首先你需要用FB初始化oauth。以下是對代碼的參考。

window.fbAsyncInit = function() { 
    FB.init({appId: "hidden", 
     channelUrl : "Channel File", 
     status: true, 
     cookie: true, 
     xfbml: true, 
     oauth:true});

SDK的加載過程很簡單，如下所示。

(function() { 
    var e = document.createElement('script'); 
    e.type = 'text/javascript'; 
    e.src = document.location.protocol + 
     '//connect.facebook.net/en_US/all.js'; 
    e.async = true; 
    document.getElementById('fb-root').appendChild(e); 
}());

一旦這樣做的onclick您的登錄DIV按鈕然後調用javascript函數與下面的代碼。

FB.login(function(response) 
{ 
    if (response.authResponse) 
    { 
     //login success 
    } 
    else 
    { 
     alert('User cancelled login or did not fully authorize.'); 
    } 

}, {scope: 'permissions that app needs'})

希望這可以幫助你。

來源

2012-07-16 08:27:35

謝謝Purusottam。我已經在代碼中添加了上述更新，但藍色臉譜按鈕仍然不顯示按鈕div中的文本。我的代碼錯了嗎？或者你認爲我需要將我的文件在線，因爲我目前只在Dreamweaver中工作。 – 2012-07-16 09:42:55

嗨克里斯，對不起，我以爲你想有一個自定義按鈕來啓動FB登錄。如果你想使用簡單的FB登錄，那麼你需要使用FB社交插件登錄按照這篇文章https://developers.facebook.com/docs/reference/plugins/login/。但個人而言，我不喜歡使用它，因爲大部分時間都不會與您網站的配色方案同步。 – 2012-07-16 10:30:23

哇，謝謝！正是我需要的。 +1！ – 2012-07-17 20:30:14

事實證明，這個按鈕沒有顯示的原因是因爲你需要在服務器上擁有所有東西。您無法在本地測試Facebook代碼。

來源

2012-07-16 20:16:14

無法獲得fb登錄按鈕顯示

回答

相關問題