How to Make Facebook Apps Using Java – part 1

I wrote a game last weekend, for Facebook. Writing the entire multiplayer persistent game took a day and a half; getting it to integrate with Facebook is taking several days. Mostly, the problem is that Facebook hasn’t – yet – provided user-guide documentation, and there are plenty of bugs in their system. Without docs, you have to guess whether a “nothing happens” is due to your mistaken guesswork, a bug in FB, or … a bug in your own code. That’s fine, but it takes time, lots of time.

Google kept giving me zero hits for any of the problems, or even any java-focussed docs (just one link to a FAQ on an issue that seems to be a bug that was fixed a while ago. That’s all). So, as I solve the various problems that come up, I’m writing about them.

Platform

First thing to be clear about: if you want to write FB apps using java, you’ll be using Enterprise Edition (J2EE). The way FB works *requires* you to provide a webserver for your app. Whilst its true that java can run in the web browser, that’s a completely different way of using java – for this, you’re going to have to find a server, and install J2EE (it’s the same as standard java, just has lots of extra libraries, only a few of which you’ll need to use).

Facebook Apps: how they work

This diagram shows a very simplistic summary of the different URL’s you are asked for when registering a Facebook application, or are used when serving an App. Note that FBML is served entirely internally in the FB server, it does NOT make a request to your web server.

NB: this image got deleted in the server crash last month; WordPress is rather badly designed with images, and doesnt save them. But it’s been stolen and copied widely all over the web, so you can probably find it relatively easily

First step: Registering your Facebook Application

Assuming you can find yourself a webserver/J2EE server to run your app on, and have a domain name for it (or the hosting provider gives you a default domain-name – you don’t HAVE to buy one just for your app), the first thing to do is register the app with Facebook. This just reserves the name of your app, and gets you the login details you’ll need before you can do ANY testing or development.

This process is actually nicely documented (and is also very simple – although the huge scary forms they ask you to fill in are very poorly explained, there’s a only a few fields you actually *need* to fill in). Don’t follow the list of things on that page literally, see the differences below that you want to make.

For the URL’s you need to fill-in, you’ll be making a servlet for each. So, work out the URL for each of the servlets (depends on how you setup your J2EE server), and have them ready to give to FB.

So, to summarise:

1. Create a Facebook account if you don’t have one, and login
2. Add the “Developer” app to your account (link is here)
3. Go to your Home page on FB
4. Click on the Developer app in the sidebar to go to the main centre for all your Developer activity
5. Make a new application, and fill in the form it presents you with (make sure you do at least:
   1. App name
   2. Callback URL (see the example app)
   3. Canvas page (see the example app)
   4. iFrame (not FBML)
   5. Post-add URL (see the example app)
6. Save the api-key and the session-key that it now displays for the newly-created app – you’ll need them to do any coding

First test: Can Facebook display your Application?

Create the various servlets on your server (callback, postadd, and canvas) and make each of them return basic HTML that just says “callback servlet”, “postadd servlet”, or “canvas servlet”).

Open a new browser window, and type in the canvas page URL from FB, something like: http://apps.facebook.com/yourApplicationName

You might be asked some security stuff by FB, but once you’ve got past that you should then see a Facebook page with the navbars etc, but just a big empty space in the middle with the test “callback servlet”. If so, congratulations, you’ve got your app basically working. Now comes all the hard stuff…

If not, first check that your servlet is even working, by copy/pasting the callback URL from your FB application setttings (click Edit Settings to re-load the form you submitted) into a browser window, and seeing if you can get the page. You’ve probably got a typo in the URL you gave FB. If the “callback servlet” text doesn’t come up on its own, without all the FB stuff, then your J2EE server is misconfigured or broken. Time for you to go find some Tomcat / jBoss / etc tutorials and get your J2EE working…

Part two…

Now you can move on to part 2 of this series, covering the details of how to authenticate with Facebook and start doing interesting work, including sample source code.