Reprinted from my Skyway Community Tech Blog posting:

Okay….I think I’ve covered enough introductory content (see post #1, post #2 and post #3).  Now it’s time to get down to some code.

I’m going to implement the sample Facebook application using Java.  More specifically, the application is going to utilize the Spring Framework and Spring MVC.  By leveraging Spring I can deploy the Facebook application to a variety of JEE configurations.  I can deploy it to a JEE-lite environment that consists of Apache Tomcat, or I can deploy it to a full JEE application server utilizing both a web container and EJB3 container.  For the sample Facebook application, I’m going to produce a JEE web application (war) for Tomcat.  I’m not going to persist any data, so there won’t be a need for a database.

While the application is built on top of several Spring frameworks, I’m not going to really dig into Spring development.  I’m going to use Skyway Builder CE, a domain-specific language (DSL) for generating Spring-based applications.  Skyway Builder CE is open-source and runs inside of Eclipse.  Skyway Builder will generate the Spring beans and wire them up into a Spring application.

Download Skyway Builder CE from here.  I recommend downloading the RCP version of Skyway Builder.  You will also need a sandbox, a runtime environment for testing the applications Skyway Builder generates.  There is a sandbox setup guide that will guide you in setting up Tomcat and MySQL.  However since I’m not using a database for this example, you can skip the database setup section of the guide.

Once you have Skyway Builder running and your sandbox ready to go, the following steps are for creating the most minimal application that will be integrated into Facebook.  Let me warn you that this application won’t do much yet.  At this point we’re only concerned with integrating something (anything!!!) with Facebook.  In the next post we’ll cover building out some logic for accessing Facebook data.

  1. Right-click on the Skyway Navigator to create a new Skyway project.  You can name it whatever you want, but I’m going to call it “myfacebookapp”.
  2. Right-click on the WebContents folder, and select New–>JSP.  Name the JSP “index.jsp”.  From the “Select JSP Template” wizard step, select “Skyway JSP File (html)”.
  3. From the Skyway Page Designer enter the text “Hello Facebook Users” between the body tags in the JSP page.  Save the JSP.

We’re done with development.  Now let’s deploy the application.

  1. From the Servers tab right-click on the “Tomcat v6.0 Server at localhost” and select “Add and Remove Projects”.  Pick your project from the Available projects list and add to Configured projects list.  Click Finish.
  2. Right-click on the “Tomcat v6.0 Server at localhost” and select Start.

We’re done deploying.  There is now a war file located in Tomcat, and the application is initialized and ready to run.  Now let’s run the application.

  1. Right-click on the index.jsp page and select Run As–>Run On Server.  You should see browser window open up in Eclipse with  “Hello Facebook Users”.
  2. Take note of the URL in the browser (http://localhost:8080/myfacebookapp/index.jsp).  You will need this URL shortly.  This URL will be your Facebook Callback URL.

We’re done.  Now let’s integrate the application into Facebook.

  1. Assuming you already added the Facebook Developer application, select the “Setup New Application” option.
  2. From the New Application page, you must agree to the terms of the Facebook Platform and specify the following:
  • Application Name: My Facebook App
  • Developer Contact Email: your email address (should be prepopulated)
  • User Support Email: your email address (should be prepopulated)
  • Callback URL: the URL of your application (i.e. http://localhost:8080/myfacebookapp/index.jsp)
  • Canvas Page URL: http://apps.facebook.com/nielfacebookapp/ (the url must be unique, so pick a url that isn’t already being used)
  • Use FBML / Use iframe: Use iframe

Your Facebook should now be accessible from your Facebook application’s Canvas Page URL (i.e. http://apps.facebook.com/nielfacebookapp/).  Copy the URL into your browser, and you should see the Facebook page, and your application embedded in the page.

Tada!!  You have completed your Facebook application.  So now what?  Well…you probably want to do something just a bit more interesting.  For example, let’s say that you want to list all of your Facebook friends birthdays.  That’s what I’ll do over in the next few posts.  I’ll cover Facebook authentication and the Facebook API.

This post is one of a series of posts relating to developing Spring-based Facebook applications using Skyway Builder: