3

我使用 HotTowel SPA 模板启动了一个新的 Visual Studio 2012 Express Web 项目。我不确定在 HotTowel 结构中加载 Facebook SDK 的代码应该放在哪里？

我已经尝试过 main.js 和 shell.js，但我似乎无法加载 sdk。Facebook 说要放置下面的代码来异步加载 sdk

window.fbAsyncInit = function () {
    // init the FB JS SDK
    FB.init({
        appId: '577148235642429',                        // App ID from the app dashboard
        channelUrl: '//http://localhost:58585/channel.html', // Channel file for x-domain comms
        status: true,                                 // Check Facebook Login status
        xfbml: true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
};

// Load the SDK asynchronously
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all/debug.js";
    fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));
4

2 回答 2

1

在包含此代码的名为 facebooksdk.js 的文件中创建一个模块。然后“要求”启动序列中的代码，如果您希望它立即加载。

于 2013-04-28T05:35:49.087 回答
0

将 Facebook SDK 与 Durandal 一起使用并不容易。

Facebook 提供了如何使用 require 进行设置的说明。但听起来Durandal 不支持这种方法。

我通过用支持淘汰的 vm 包装全局 FB 对象来制作我的脏版本。您可以轻松使用它并绑定到用户名等任何属性。

包括来自 shell.js 的 facebook.js 以确保它在应用程序启动时被加载。

这是我的 facebook.js：

define(['services/logger'], function (logger) {
var vm = {
    facebook: null,
    initialized: ko.observable(false),
    name: ko.observable(""),
    picturesrc: ko.observable(""),
    login: login,
    logout: logout
};

$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function () {
    window.fbAsyncInit = function () {
        vm.facebook = FB;
        vm.facebook.init({
            appId: '160000000000499',
            status: true,
            cookie: true,
            xfbml: true,
            oauth: true
        });
        vm.initialized(true);
        vm.facebook.getLoginStatus(updateLoginStatus);
        vm.facebook.Event.subscribe('auth.statusChange', updateLoginStatus);
    };
});    
return vm;

function login() {
    vm.facebook.login( function(response) {
        //Handled in auth.statusChange
    } , { scope: 'email' });
}

function logout() {
    vm.facebook.logout( function (response) {
        vm.picturesrc("");
        vm.name("");
    });
}

function updateLoginStatus(response) {
    if (response.authResponse) {
        logger.log("Authenticated to Facebook succesfully");
        vm.facebook.api('/me', function (response2) {
            vm.picturesrc('src="https://graph.facebook.com/' +
                +response2.id + '/picture"');
            vm.name(response2.name);

        });
    } else {
        logger.log("Not authenticated to Facebook");
        vm.picturesrc("");
        vm.name("");
    }
}

});

我没有正确测试我的代码。但至少登录和获取名称在 Chrome 中运行良好。

请记住在developers.facebook.com 上更改appId 并更新正确的域。

于 2013-05-28T14:01:37.313 回答