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