无法获得FB-登录按钮露面(Can't get fb-login-button to sho

我可能做的几件事情错了，因为我是新来的网络编程，但这里是一些问题，下面的尝试我，然后代码。

据透露我工作在Dreamweaver完全是本地的，只是打F11或任何测试的浏览器。我没有上传到除通道文件服务器，所以如果这是主要的问题，让我知道什么。

对于信道文件的所有我已经是完全空的文件（不包括HTML，身体等）仅仅是下面线。

<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登录按钮仍然没有出现只在左上角的“登录facebook”文本：见附表形象。

再次声明，我完全正常工作，当地here..do我需要有一个服务器上的所有文件这个按钮来显示？

<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

Answer 1:

因为它原来的原因，这按钮没有显示出来，是因为你需要有一台服务器上的所有内容。你可以不考Facebook的代码中的本地。

Answer 2:

当我看到你的代码有两件事是失踪。首先，你需要用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'})

希望这可以帮助你。