1

我可能做错了几件事，因为我是网络编程的新手，但这里尝试解决我遇到的一些问题，然后在下面编写代码。

仅供参考，我在 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>

这里的 CSS 对在屏幕上移动上面的“用 facebook 登录”文本没有任何作用。我所看到的只是在左上角上面写着上述内容的常规文本。没有蓝色 fb 按钮

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

*
{
    margin: 0;
}

body
{
    background-color: #FFF
}

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

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

蓝色的 facebook 登录按钮仍然没有显示左上角的“使用 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

4

2 回答 2

3

事实证明，这个按钮没有出现的原因是因为你需要把所有东西都放在服务器上。您无法在本地测试 facebook 代码。

于 2012-07-16T20:16:14.443 回答
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'})

希望这对您有所帮助。

于 2012-07-16T08:27:35.490 回答