HotTowel SPA with Facebook SDK

Question

I've started a new Visual Studio 2012 Express Web project using the HotTowel SPA template. I'm not sure where I should be placing the code to load the Facebook SDK within the HotTowel structure?

I've tried main.js, and shell.js but I can't seem to get the sdk to load. Facebook says to put the below code to load the sdk asynchronously

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'));

score 1 · Accepted Answer · answered Apr 28 '13 at 05:35

1

Create a module in a file called facebooksdk.js that contains this code. Then "require" the code in the boot sequence, if you want it to load right away.

answered Apr 28 '13 at 05:35

John Papa

21,880
4
61
60

John thanks for the response and I've learned much since then. My question now is in my facebooksdk module, what exactly do I return? I'm requiring the module, however getting null reference because the module does not return a vm. – Kbalz May 10 '13 at 04:08

score 0 · Answer 2 · answered May 28 '13 at 14:01

It is not easy to use to use Facebook SDK with Durandal.

Facebook offers instructions how to set it up with require. But sounds like that method is not supported in Durandal.

I made my dirty version by wrapping global FB object with vm supporting knockout. You could easily use that and bind to any properties like users name.

Include that facebook.js from shell.js to make sure it is loaded when app starts.

Here is my 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("");
    }
}

});

I have not tested my code properly. But atleast logging in and fetching name worked fine in Chrome.

Remember change appId and update proper domain at developers.facebook.com.

HotTowel SPA with Facebook SDK

2 Answers2