Question

我刚刚开始使用facebook API。我有一个基本的“地狱世界”应用程序，只显示登录的用户名。当我有FB.init（）函数内联时显示它很好（显示“使用facebook登录”按钮并且工作）。但是，我尝试创建一个名为“Facebook.js”的JS文件并将init（）放在那里，现在我只看到“使用facebook登录”的纯文本，显然，它不起作用。

有可能这样做吗？我错过了一些愚蠢的东西吗？（可能两者都是）

[------------- index.aspx --------------------------- --------------------------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Scott's test application</title>
    <script src="JS/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <script src="JS/facebook.js" type="text/javascript"></script>
</head>
<body>
    <div id="fb-root"></div>
    <div>Welcome <span id="guest" class="UserNameWelcome">Guest</span><span id="name" class="UserNameWelcome"></span>!</div>
    <div><img src="" alt="Avatar" id="image"/></div>
    <fb:login-button>Login with Facebook</fb:login-button>
</body>
</html>

[------------- facebook.js --------------------------- --------------------------------

FB.init({
    appId: 'myappid', cookie: true,
    status: true, xfbml: true
});
FB.api('/me', function (user) {
    if (user != null) {
        var image = document.getElementById('image');
        image.src = 'https://graph.facebook.com/' + user.id + '/picture';
        var name = document.getElementById('name');
        name.innerHTML = user.name
    } else {
        $('#image').hide();
        $('#name').hide();
    }
});

Answer 1

您不必拥有正文中的所有内容，但在调用任何FB函数之前，必须确保all.js已完全加载。在facebook.js中，你可以将FB.init和FB.api调用包装在一个名为start_fb（）的函数中，然后在window.onload或window.fbAsyncInit事件处理程序中调用start_fb。 all.js加载完成后会自动触发fbAsyncInit，但window.onload稍微安全一些，因为它还可以确保所有dom元素都像fb-root一样就位。

Answer 2

您可以使用Facebook's JavaScript SDK的异步加载程序使用 window.fbAsyncInit 功能

包装Facebook.js的内容

window.fbAsyncInit = function() {
    // Your code goes here
}

// Load the SDK Asynchronously
(function(d){
    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));

Answer 3

显然一切都必须在正文（？）中并且按照正确的顺序......以下HTML似乎做了我期望的事情。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Scott's test application</title>
    <script src="JS/jquery-1.6.4.min.js" type="text/javascript"></script>
    <link href="CSS/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <script src="JS/facebook.js" type="text/javascript"></script>
    <div>Welcome <span id="guest" class="UserNameWelcome">Guest</span><span id="name" class="UserNameWelcome"></span>!</div>
    <img src="" alt="Avatar" id="image"/>
    <fb:login-button>Login with Facebook</fb:login-button>
    <div id="version">v0.01</div>
</body>
</html>

包含facebook连接功能的外部链接？

3 个答案: