使用Facebook JavaScript SDK

Question

使用Facebook JavaScript SDK

javascriptfacebookfacebook-graph-apifacebook-javascript-sdk

4

这将是一个关于入门的问题，如果您刚开始学习编程，可能会遇到类似的问题。

我以前使用Facebook进行过编程，但不是直接作为Web编程 - 所以，我知道如何使用Graph API并了解一般工作原理，但我没有任何经验来进行Web编程，我有点迷茫，不知道如何从Facebook的文档开始，才能拥有一个可以让我登录的工作网页（目标是只使用尽可能简单的HTML / JavaScript，但允许上传图像并使用publish_stream权限在墙上发布链接等内容）。

以下是我根据Facebook告诉我的做法（以及我之前看过的少量HTML）所编写的代码：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<head>
    The title of the document (test text)
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the Facebook JavaScript SDK
    FB.init({
        appId       : 'EDITED OUT FOR PRIVACY BUT IS VALID IN MY CODE',
        channelUrl  : null,
        status      : true,
        cookie      : false,
        xfbml       : false
    });

    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            // connected
        } else if (response.status === 'not_authorized') {
            // not authorized
            login();
        } else {
            // not_logged_in
            login();
        }
    });
};

function login() {
    FB.login(function(response) {
        if (response.authResponse) {
            // connected
            testAPI();
        } else {
            // cancelled
        }
    });
}

function testAPI() {
    console.log('Welcome!  Fetching your information... ');
    FB.api('/me', function(response) {
        console.log('Good to see you, ' + response.name + '.');
    });
}

(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>
</body>
</html>

当我将这个文件保存为.html文件并拖入Firefox中时，什么也没有显示（除非在</body>之前输入一些hello world文本）。我已经查看了有关如何运行事物的JavaScript / HTML教程，但没有任何效果。

我知道在先前链接的先决条件部分中（我会再次链接，但我太新了，stackoverflow不让我），它说“您需要一个允许您在线托管HTML文件的地方。”它还引用了Heroku，但我找到的任何资源都带我去应用程序托管，我不明白为什么（这只是为了测试此功能），我首先需要将其在线托管而不是将其放入我的浏览器中（或从C / C ++调用ShellExecute来运行它）。

[编辑：]感谢大家迄今为止提供的所有帮助，我只是希望我之前没有因为错别字而浪费时间，而是让所有乐于助人的人能够找到问题的根源。

- counterfeitname

你复制的是完全一样的代码吗？似乎你漏掉了testAPI()函数的结尾括号 }。 - Adam Elsodaney

谢谢！已经编辑和修复了。但是我仍然有同样的问题，页面仍然是空白的。 - counterfeitname

我忘了提到我已经为此禁用了弹出窗口拦截器（只是为了获得一些基本功能，以确保基础工作正常）。即使禁用了拦截器，我仍然会得到一个空白页面，什么也不做（或者似乎什么也不做）。 - counterfeitname

看起来还有几个错别字——FB.Init 应该是 FB.init，而 JavaScript 源行应该是 js.src，而不是 js src。 - deesarus

我正要用js.src修复它（感谢在Firefox中刚找到Ctrl+Shift+K），但FB.Init->FB.init的问题肯定会让我花更长时间。谢谢！再次编辑，但仍然是同样的问题-根据Ctrl+Shift+K窗口（Web控制台）显示，日志记录已被脚本禁用，因此仍然很难调试。**页面仍然无法正常运行 - counterfeitname

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- phwd · Accepted Answer

页面显示空白是因为没有意图显示HTML。示例的目的是演示登录和API调用。如果您已经登录，则不会看到任何内容，如在上面所示。

FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            // connected
                        // <----- no calls
        } else if (response.status === 'not_authorized') {
            // not authorized
            login();
        } else {
            // not_logged_in
            login();
        }
    });
};

所以，如果您已登录并想知道它是否正在工作，请尝试在此处放置testAPI()。

if (response.status === 'connected') {
    // connected
    testAPI(); // <---------------
} else if (response.status === 'not_authorized') {