Question

我可能做了几件事，因为我不熟悉网络编程，但这里尝试了一些问题，然后在下面进行编码。

Fyi我在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>

这里的CSS实际上没有什么可以移动上面的＆＃34;登录facebook＆＃34;屏幕周围的文字。我所看到的只是常规文字，左上角显示了上述内容。没有蓝色fb按钮

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

*
{
    margin: 0;
}

body
{
    background-color: #FFF
}

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

以下来自Purusottam评论的新代码编辑 再次请原谅我的错误，因为我是一个非常新的程序员。

蓝色的Facebook登录按钮仍然只显示＆＃34;登录facebook＆＃34;左上角的文字：见附件图片。

我再次完全在本地工作..我需要将服务器上的所有文件都显示在此按钮上吗？

<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);
}());

完成此操作后，单击您的登录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'})

希望这会对你有所帮助。

无法显示fb-login-button

2 个答案: