外部链接包含facebook连接功能

external link containing facebook connect functions?

本文关键字：连接 功能 facebook 包含 链接 外部      更新时间：2023-09-26

我刚刚开始玩facebook API。我有一个基本的"地狱世界"应用程序，只是显示登录的用户名。它工作得很好，当我有fbi .init()内联函数(显示"登录使用facebook"按钮和作品)。然而，我尝试创建一个名为"facebook . JS"的JS文件，并将init()放在那里，现在我只看到纯文本，说"使用facebook登录"，显然，它不起作用。

这是可能的吗?我错过了什么愚蠢的东西吗?(可能都是)

[------------- 索引。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();
    }
});

您不必在body中包含所有内容，但您必须确保在调用任何FB函数之前all.js已完全加载。在facebook.js中，你可以包装FB。init和FB。在函数内部调用类似start_fb()的API，然后从窗口内调用start_fb。Onload或window。fbAsyncInit事件处理器。fbAsyncInit会在all.js加载完成后自动触发，但是window. js不会触发。Onload稍微安全一些，因为它还确保所有的dom元素都像fb-root一样到位。

您可以使用Facebook的JavaScript SDK的异步加载器用窗口包装Facebook.js的内容。fbAsyncInit

函数
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));

显然一切都必须在主体(?)，并以正确的顺序…下面的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>
相关文章：