My Brill Game Site
My Brill Game Site twitch.tv/RyanFaeScotland reddit.com/user/RyanFaeScotland youtube.com/RyanFaeScotland
- Summary
Current State: Completed
Last updated: 29-Nov-2013

I am appalled at the lack of resources dealing with creating and distributing games made in Java on Facebook. Perhaps it is because no-one makes on-line games in Java, perhaps it is because the process is actually so easy it doesn't need documented or perhaps the people who have managed it want to keep the process a secret so they can make all the monies themselves! Whatever the reason, this post aims to buck the trend and document what is in fact a really easy process.

- Details

Just as a quick heads up here is what this post will and won't cover:

It will cover:

  • Deploying your Java applet to the web.
    • This is a pretty easy step and if you've made an applet before you probably know how to do this.
  • Making the applet accessible via Facebook.
    • This is also an easy step it just doesn't seem to be written anywhere else on-line!

It won't cover:

  • Creating Java applets.
  • Interfacing your Java applet with Facebook (making API calls, using information from user profiles and so on).
    • Although I'm sure this would be useful I haven't done it myself yet so am not in a position to write about it. Keep an eye out for this in the future though.

Deploying Your Java Applet to the Web

I have a Java game of Tic-Tac-Toe (also known as Noughts and Crosses) that I developed a long time back. Thankfully I developed this game as both an applet and a stand alone desktop application which means it is an ideal candidate for testing in Facebook game deployment.

If you go through the Facebook documentation on applications you'll see that applications have to be deployed on your own server and linked to through Facebook inside the application settings (more on this later) so the first stage is to get your applet working on your own server.

As you can tell I already have my own web space here at http://www.mybrillgamesite.com/ so I created a simple HTML page and deployed it along with the TicTacToe.jar file into a sub directory there. You can view it in action by visiting http://www.mybrillgamesite.com/rawHTML/tictactoe/index.html. It is important to note that although my site is developed with Joomla I didn't use that to deploy the app. Joomla is set up to make your life easier by adding lots of extra stuff like menus and so on and for our simple HTML page we don't want any of that stuff. This is because our simple HTML page is what we are going to see on Facebook and it would look pretty strange seeing a mishmash of Facebook and our own website together!

The source for the HTML page is as follows:

<HTML>
	<APPLET CODE="gui/GameApplet.class" codebase="/rawHTML/tictactoe/" archive="TicTacToe.jar" WIDTH=400 HEIGHT=500>
	</APPLET>
</HTML>

As you can see I've been really lazy and not even put <body> tags in it! The only tag that is important is the <applet> one which is in charge of adding your applet to the page, its attributes break down as follows:

  • code - The JApplet class of your applet. Mine is called 'GameApplet.class' and is in the 'gui' package.
  • codebase - The directory on your server where the jar is located. Mine is in the folder 'www.mybrillgamesite.com/jars/tictactoe' but you can skip the domain part.
  • archive - The name of the jar. Clearly mine is called 'TicTacToe.jar'

And that's all there is to deploying your applet to your own web space. Once you have the files in place you can test it by visiting the page and all being well your app will appear. Of course depending on your browser and your security settings you may get a few prompts and warnings and have to play with your settings first but there is nothing new there is there.

Making the Applet Accessible via Facebook

This is the section that changes your game from being some obscure game on some obscure site to being some obscure game on Facebook!

As I mentioned earlier your index.html page is what is going to be shown in Facebook. Facebook makes this work by creating an iFrame on one of its pages that you create by signing up as a developer and configuring with your page's address. Facebook refers to this iFrame as a canvas in a rather lame attempt to spruce it up a little and there are certain things you are and aren't allowed to do on it mostly to do with copyright infringement and other dull matters.

To get access to this you have to follow the steps on the Facebook documentation on applications which I linked to above as well. The process pretty much breaks down to this:

  1. Visit the App Dashboard and register.
  2. Click 'Create New App'
  3. Fill out the information for your app, try and get a catchy 'namespace' name, this is what your users will see in the address bar!
  4. Once you hit 'Continue' you'll be brought to the configuration screen for your app. Most of the settings are self explanatory and the ones we are interested in are in the 'App on Facebook' menu. Click that that the little check mark next to it will turn green.
  5. In the 'Canvas URL' box add the address to the index.html file but don't actually put in index.html, just the path, so for me it was 'http://www.mybrillgamesite.com/jars/tictactoe/'
  6. I haven't got the 'Secure Canvas URL' part working yet but I just dumped 'https://www.mybrillgamesite.com/jars/tictactoe/' into it.
  7. Scroll to the bottom and hit 'Save Changes'!

That should be it. Here are my settings for you to compare against except for the App ID and App Secret which I think you are meant to keep secret (the clue is in the name for the second one!):

You may need to wait a few minutes for changes to take effect but once they have you should see your app appear at 'http://apps.facebook.com/your_apps_namespace'. I went to http://apps.facebook.com/mbgs-tictactoe/ and here is what I saw:

Why it's my index.html page with my TicTacToe applet running in it!

The link might not work any more because I'll probably take it down to replace with bigger and better Java games but hopefully this has been enough to get you up to speed with deploying your Java games on Facebook. I think you can also improve on the index.html file as well, adding in full HTML details or even replacing it with PHP if you are so inclined.

At the very least it is one document on the web that confirms, YES you can develop Java games for Facebook.

- Do You Want To Know More?

If you want to know more about this project you can email me using the details in the About page.