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
Basic explanation of facebook servers

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.


17 thoughts on “How to Make Facebook Apps Using Java – part 1

  1. adam Post author

    [deleted evil spam comment that this was in reply to. Destroy spammers. Destroy them with no mercy, and extreme prejudice]

  2. Clement Ho

    Hi there,
    It is an excellent document. It is how I started my Facebook application and it is up and running in 3 weeks. Thanks so much for your detail document and the suggestions.
    I hit a road block at this time. Facebook disable notification.sendrequest function on their API and force us to use (http://wiki.developers.facebook.com/index.php/Notifications.sendRequest).
    I develop everything in iFrame using JSP.

    My question is if there is a way to do this without using FBML? If I have to use FBML, what should I do to start using the FBML? My current error is :
    “The URL http://localhost:8084/Facebook_Mobileslide/callback.jsp is not valid.”
    Thanks,
    Clement

  3. Clement Ho

    I forgot to mention, the current application is hosted at “http://www.mslide.net/Facebook_Mobileslide/” or in facebook “http://apps.facebook.com/mobileslide”

    Thanks,
    Clement

  4. Josh

    Adam, I’ve got a quick question….

    I’m using Spring as my MVC for this facebook implementation. I’m having a hard time getting the authentication to work. I have as a jump-off a simple jsp page that forwards to the initial action (controller).

    Any thoughts as to why is always null? Even when I call if from app.facebook.com.

    Any light you could shed on this would be EXTREMELY appreciated!

    Cheers and keep up the awesome work!

    Josh

  5. Daniel

    Hello Adam,

    Thank you for your nice tutorial!

    Besides I have one question:

    has somebody experiences with using Java Server Faces to build facebook
    applications? Could there be any difficulties, if component libraries such as Trinidad or Rich Faces are used?

    Thanks,

    Daniel

  6. Miklos

    “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”).”

    But there is no “canvas servlet”, or is there?
    Isn’t the content for the App delivered in the response to the callback url?

  7. forrest

    Good paper for starting guys.

    If talk about how to configure J2EE server with Spring or Jboss, or tomcat , that is perfect.

    Welcome to talk about how to develop FB app.

  8. Sumantto

    Simply great tutorial in brief. Found it very effective for starting Facebook Applications in Java. Keep it up.

  9. Angela

    Hi, I have no idea how to even start, lol. Do you yourself make up games for people, would love for someone to do it for me.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current month ye@r day *