无法获得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登录按钮显示

回答

相关问题