Archive

Posts Tagged ‘facebook’

Building scalable Java based Facebook apps for FREE!

October 1, 2011 Leave a comment

Looking to create a Java-based Facebook app, and need the easiest steps to build and host one? without the (cost) overheads of hosting it ? Read on…

Note that this also covers how to create a Facebook app using the new (latest) App creation interface given by Facebook.

In a nutshell, we will be building our application using Eclipse (+ Google Plugin for Eclipse + Facebook SDKs). The app will be created as a Google App Engine Project (so that we can deploy it on Google App Engine, leveraging the all goodness of the platform – scalability being one of major ones!).

Ok, so here we go. Here are a few simple steps that will get you going in building your Facebook app and hosting it for free in no time.

Step 1:

Download Eclipse, if you do not already have one. Preferably, Eclipse Galileo. You may also use SpringSource Tools Suite as the IDE, since it has great support for building Spring based applications. Once you have your IDE up and running, install the Google Plugin which will allow you to smoothly create Google App Engine projects and deploy them to App directly from your IDE.

Step 2:

Download the Facebook Java SDK, which we will use for building our Java-based Facebook app.

Step 3:

Once you have completed the above steps, create a Google App Engine project in your IDE, by clicking New -> Project… -> Google -> Web Application Project.

Give the project a name, a package, and ensure that you deselect the “Use Google Web Toolkit” and “Generate project sample code” options. Here’s how your window should look like:

 

 

 

 

 

 

 

 

 

 

 

 

Here’s how your IDE wokbench looks like when you click Finish.

 

 

 

 

 

 

 

Step 4:

Now Copy the Facebook SDK libraries (downloaded in Step 2) into the war/WEB-INF/lib folder of your project, and then add these libraries to your project’s classpath. Here’s how your project should look like after this:

 

 

 

 

 

 

 

 

 

 

 

 

Step 5:

Now, this step involves a number of codes changes, from changing the default servlet to the code that captures Facebook authentication, to designing and forwarding to your desired application’s view (JSP). Instead of walking through individual steps, here’s the sample project which you can use to get started right away. Add/remove code to suit your application needs.

Step 6:

Now is the time to create your Facebook app.

1. Goto https://developers.facebook.com/apps and click the “Create New App” button

2. Enter your App’s display name , say MyAppOnGAE, and give a namespace, say myappgae. Accept the terms and click Continue.

 

 

 

 

 

3. Your app would now be created and you will be taken to your app’s Settings page:

 

 

 

 

 

 

 

 

 

4. Note down your App ID and App Secret. Copy these into the web.xml file of your project under (war/WB-INF/web.xml), since it contains the configuration to set your App’s API key and Secret key.

 

 

 

 

 

5. You are now ready to upload the project to Google App  Engine.

6. Once successfully done, and if you used the project I have setup in Step 5, your application URL would be http://helloworld.appspot.com/testapplication, where helloworld is the name of your application that you create on Google App Engine (and could be different, based on what name you choose).

7.  Now go back to your Facebook App’s settings, and we will “Select how your app integrates with Facebook”. So, click on the link “App on Facebook” and enter the Canvas URL as follows:

 

 

 

 

 

 

 

8. Click Save Changes, and your app would be ready to use @ http://apps.facebook.com/myappgae

The above simply displays a Hello World! message as the Facebook app, but feel free to modify the application as per your needs, which should now be a standard web application development deal.

Enjoy!!