Forums » Help » Facebook Integration

So like many of you, I want to integrate my Impact app with Facebook. I'd like to make a simple leaderboard similar to the one used by the Mangu.

Making the backend is the part I know how to do, what I don't know how to do is sync my app with Facebook. I reviewed the Javascript SDK, and I understand I initialize the connection with FB.init(), but what I'm unclear on is how I do authenticate and grab a user's info?

Any help would be greatly appreciated. Thx!

I did this for the Facebook version of Z-Type and used Playtomic for the Scoreboards. Sadly, the Facebook API is a huge pain in the ass :/

Here's a plugin I wrote for that:

ig.module(
    'plugins.facebook'
)
.defines(function(){

ig.Facebook = {
    appId: null,
    callback: null,
    session: null,
    me: null,
    cache: {}
};

ig.Facebook.Init = function( appId, appURL, perms, callback ) {
    ig.Facebook.appId = appId;
    ig.Facebook.appURL = appURL;
    ig.Facebook.callback = callback;
    
    
    // Not running in an IFrame on Facebook? Forward to it!
    if( !window.top || window.top == window ) {
        window.top.location = ig.Facebook.appURL;
        return;
    }
    
    // This function will be called as soon as the FB API is loaded
    window.fbAsyncInit = function() {
        FB.init({
            appId: ig.Facebook.appId,
            status: true, // check login status
            xfbml: true  // parse XFBML
        });
        
        if( window.opera ) {
            FB.XD._transport = "postmessage";
            FB.XD.PostMessage.init();
        }
        
        // Make sure the User is logged in and we have all needed permissions.
        // If not, forward to the login/request permission dialog on FB
        FB.getLoginStatus(function(response) {            
            if( response.session ) {                
                ig.Facebook.session = response.session;
                
                FB.Canvas.setSize();
                
                if( ig.Facebook.callback ) {
                    ig.Facebook.callback();
                }
            }
            else {
                window.top.location =
                    'https://www.facebook.com/dialog/oauth?client_id=' + ig.Facebook.appId +
                    '&redirect_uri=' + ig.Facebook.appURL +
                    '&scope=' + perms;
            }
        });
    };
    
    // Load the FB API
    var div = ig.$new('div');
    div.id = 'fb-root';
    document.body.appendChild(div);
    
    var script = ig.$new('script');
    script.type = 'text/javascript';
    script.src = 'http://connect.facebook.net/en_US/all.js';
    script.async = true;
    ig.$('#fb-root').appendChild(script);
};

// Simple Caching "Proxy" for FB.api()
ig.Facebook.CachedAPI = function( req, callback ) {
    if( ig.Facebook.cache[req] ) {
        callback( ig.Facebook.cache[req] );
    }
    else {
        FB.api( req, function( response ) {
            ig.Facebook.cache[req] = response;
            callback( response );
        });
    }
};

});

Put it in lib/plugins/facebook.js and require the plugins.facebook module in your main.js. The Facebook JS API is automatically loaded by the plugin, you don&039;t need to load it through a #<script> tag on your page.

Put your ig.main() in a callback for when the Facebook API is ready:

ig.Facebook.Init(
    '1234', // Your App ID
    'http://apps.facebook.com/your-game-url/',
    'email,read_stream', // Permissions that your App requires
    function(){
        ig.main( '#canvas', ZType, 60, 360, 640, 1 );    
    }
);

You can then make API calls in your game like this:

ig.Facebook.CachedAPI( '/me', function( data ){
    // 'data' is the response from the FB API
    // Do something with it here: e.g. submit a score with the data.name
});

Awesome. I was gonna do just this. Thank you!

A quick fix if you are getting issues with the plugin. Since Facebook requires everything to be https now, you should change this line:
http://connect.facebook.net/en_US/all.js
to this line
https://connect.facebook.net/en_US/all.js