Posts Tagged ‘facebook’

Last year I did a series of posts related to developing a Spring-based Facebook applications using Skyway Builder.  I also made the project (developed w/ Skyway Builder 6.0) available for download.  With the availability of Skyway Builder 6.1, I thought it made sense to provide an updated version of the project, particularly since there have been many recent downloads of the original project.

For reference, here are the links to the original posts:

There are a few changes to the new project, but nothing major.  I don’t plan on updating the original posts, but I will outline some of the changes (from memory):

  • Conversations changed to Models
  • A few URL mapping changes (hide implementation)
  • Request parameters are read from groovy step in starthere action
  • index.jsp goes away
  • callback url is now http://127.0.0.1:8080/myfacebookapp-Web/fbController/fbModel/starthere

I indicated in post #4 that we would build a simple application that lists the birthday’s of your Facebook friend’s.  When you are logged into Facebook as a Facebook user, you have access to information you’re friends have published about themselves, and you would access this data by navigating to their profiles. Read the rest of this entry »

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. Read the rest of this entry »

As I was familiarizing myself with Facebook, I scoured the web for information relating to the deployment of Facebook applications.  One of the first articles that I read indicated that Facebook applications must be hosted on a public server to be integrated with Facebook.  While this generally makes sense for acceptance testing and or production instances of an application, the article also indicated (or at least led me to believe) that you had to do this for development as well.

This of course was a bit troubling to me because I’m accustomed to working in a rapid build/deploy environment.  I like to make incremental changes to my application and deploy to my local server to see the results.  This process must be easy and very fast.  I don’t want to be waiting for my application to be compiled, deployed and initialized, and ideally the whole process takes less than a minute.  It would be extremely annoying if after every change to my Facebook application I would have to push my application to my host provider, just to see it running within Facebook.

Well it turns out that my concerns were only partially true.  Going back to what I covered in post #2 (Overview of Facebook Application Development), there are two options for integrating your application: FBML and IFRAME.

If you select FBML, your application is proxied through Facebook servers.  Essentially Facebook servers are making calls to your application.  In order for Facebook Servers to reach your application, your application must be hosted on publicly accessible server.  As you may recall from the previous post, I decided not to use FBML.  This deployment requirement is one of the reasons why I decided against the FBML option.

On the other hand, the IFRAME option doesn’t have the same problem.  IFRAME applications aren’t proxied by Facebook.  Instead they are embedded into the Facebook UI using an IFRAME, which makes an independent call from the end-user’s browser to your application.  It bypasses Facebook altogether.  In my opinion this approach is more ideal.

So when using the IFRAME option the only difference between a development environment and a production environment is the Callback URL.  In a production environment the Callback URL points to your public host provider (www.myhost.com).  In a development environment the Callback URL is pointing to your local workstation (localhost).  As you access your Facebook application (through Facebook) from your workstation, the Callback URL will point to the Facebook application running on your workstation.

So here’s the summary of my Facebook development environment:

  1. Eclipse + Skyway Builder CE
  2. Apache Tomcat 6.0
  3. MySQL 5.0

I have registered a new application in Facebook using the Developer application.  The Callback URL is pointing to the application that I created and deployed locally.  But wait…I haven’t covered creation and deployment of the Facebook application yet.  I guess I’ll cover that in the next post.

This is the second in a series of posts sharing my experiences with building a Java/Spring Facebook application using Skyway Builder Community Edition.  In the first post I laid out the general plan, and in this post I will give an overview of Facebook application development.

I won’t spend any time introducing Facebook, which is described on their front-page as “a social utility that connects you with the people around you“.  I presume you:

  1. know what Facebook is
  2. have used Facebook
  3. have a Facebook account
  4. have added at least on Facebook application

In exploring Facebook, you may have discovered that there are many available Facebook applications.  Some are provided by Facebook itself, but most are 3rd party applications that are integrated with Facebook.  You can find applications in the Application Directory, but the most common ways of finding applications is from your Facebook friends.  Last year Facebook launched the Facebook Platform, which provided developers a way to build and publish their own Facebook applications.  The Facebook user community can install these applications into their Facebook account.

If you are interested in developing a Facebook application, then you must add the Developer application to your profile.  This application is provides developers with a variety of resources, including news, status, and a discussion board.  This is also where you can setup a new application.

I won’t cover all the application settings at this point, however I do want to focus in on the Canvas Page URL setting.  There’s two parts to this setting.  The first part is where you specify the Facebook url for accessing your application.  Every Facebook application has a URL that starts with “http://apps.facebook.com/”, and for each application you append a path to the URL to come up with a unique Facebook application URL (i.e. http://apps.facebook.com/myapp/).  The second part of this setting is the FBML/IFRAME selection, and your selection will depend on how you want to integrate your application into Facebook.  This setting is specifying the markup language of your application and subsequently the Facebook/application interaction model.

I wanted to build my Facebook application as a Spring-based JEE web application (war) and deploy it to a light-weight JEE stack consisting of Tomcat and MySQL.  While the Facebook Markup Language (FBML) alternative offers some conveniences, I wanted to produce a web application that uses standard HTML.  So I selected the “IFRAME” option.  The resulting interaction model is also a benefit.  As opposed to the FBML option which requires that Facebook proxy all calls to my application, the IFRAME option carves at a portion of the Facebook UI for my application that is loaded directly from my servers.

Another setting of a Facebook application is the Callback URL.  I’ll describe this setting in more detail in subsequent posts, but this URL is essentially the URL that Facebook will use to embed your application in the IFRAME.

This diagram describes the association between the Canvas Page URL, Callback URL, and the resulting interaction model:

#1: The end-user of the application makes a call to the Canvas Page URL for your application.  The URL is a Facebook URL that, among other things, points to a Facebook server.
#2: The Facebook server generates and returns the HTML associated with the requested page.  The page includes an IFRAME that has a URL pointing to the Callback URL.
#3: The end-user’s browser makes another call to the Callback URL.  This URL is pointing to your deployed Facebook web application wherever it may be hosted.
#4: Your Facebook application generates and returns the HTML associated with your application’s functionality.  The HTML is embedded into the IFRAME section of Facebook page (from #2).

Stayed tuned for part 3.

So I’ve recently spent some time exploring facebook as an application platform.  I’ve been using Facebook for a while now.  In addition to staying in touch with friends and reconnecting with old friends, I have been really enjoying the various ways that you can customize your facebook profile.  While there are all kinds of gadgets (applications) that you can add to your facebook page, I figured the ultimate facebook customization would be to create your own application.

So I embarked on learning about the Facebook application platform.  Once I figured out what it takes to develop a Facebook application, I proceeded on implementing an application of my own using my favorite platform (Java and Spring) and my favorite application development tool (Skyway Builder).  While I’m not ready to share my application with the Facebook user community quite yet, I have achieved a lot in a very short period of time.  Currently I’m the only authorized user of the application.  I still need to do a little more testing and polish up the user interface a bit, but soon enough I will make the application available to all Facebook users.

In the spirit of community, I figured I would share with you (Yes you!!  There’s only one of you, and I appreciate you reading my blog dad.) over a series of blog posts the whole process from beginning to end.  While this blog posting is merely the introduction, it’s also a commitment from me to get it done.  (Kind of like my commitment to mowing the lawn before cracking open a Heineken Light….okay enough with this foolishness).  By creating this blog post and communicating my intentions, it will force me to keep the commitments to you (dad).  Although I reserve the right to procrastinate just a bit.

So this is what I’m thinking:
- Post #2 – Overview of Facebook Application Development
- Post #3 – Setting up a Facebook development environment
- Post #4 – Integrating with Facebook Authentication
- Post #5 – Using the Facebook API
- Post #6 – Building and Deploying a Facebook Application

At the end I will provide for download a Skyway Project for Eclipse that will encompass all the items discussed in my posts.  It will be built completely using Skyway Builder Community Edition, a free and open source development tool for building Spring applications.  You can download and use the project as the starting point for your own Facebook application.  Stay tuned!