Building a Facebook Application in 15 minutes

So, after fowa and 90k+ developers in mind, I just had to go ahead and implement a Facebook application. Here is the code and how I implemented it.

See also: Reflections after having implemented Facebook Connect and Google Friend Connect on my blog

First of all my goal was to use an existing web application, write a facebook integration module that communicates with the Facebook APIs, extracting some information/data and presenting them inside the existing web application. The web application I used is based on a j2ee framework (jsp, java). The architecture is much like Struts The first thing to do was to get the Developer Application to my existing Facebook account. Then I had to download the Client Library. I choosed the Java Library since my development environment was Java. When I extracted the Client Library, only the source files where included. So what I had to do first (besides looking into the source code), was to compile the java-files. I actually wrote an ant-task for this purpose, but a more easier way is just to use javac without using ant-framework. The next step was to take the output from the compile process and put it into an archived file (.jar). This is not necessary but I like to do it this way and the facebook.jar file I now had is easily dropped into my existing web application library. In my Facebook profile I had to create (set up) a new application. This is done by clicking the developer application that was installed earlier. Its some steps including getting a key (API key and secret key) that I used in my java-code but this process is straight forward. [% oiopub-banner-4-right %]

Ok, now lets start the coding process. Here is the java code controlling the session and authentication:

String apiKey = “something”;
String secretKey = “something”;

FacebookRestClient frc = null;
HttpSession session = request.getSession();
String sessionKey = (String) session.getAttribute(“facebookSession”);
String token = request.getParameter(“auth_token”);

try {

if (sessionKey != null && sessionKey.length() > 0) {

frc = new FacebookRestClient(apiKey, secretKey, sessionKey);
this.doTheThing(request, response, frc);
} else if (token != null) {
frc = new FacebookRestClient(apiKey, secretKey);
session.setAttribute(“facebookSession”, sessionKey);
sessionKey = frc.auth_getSession(token);
session.setAttribute(“facebookSession”, sessionKey);
this.doTheThing(request, response, frc);

} else {
response.sendRedirect(“http://www.facebook.com/login.php?api_key=” + apiKey + “&v=1.0”);
}
} catch (FacebookException fe) {
} catch (IOException ioe) {

The doTheThing method is extracting the information and looks like this:

int myid = frc.users_getLoggedInUser();
EnumSet<ProfileField> fields = EnumSet.of(com.facebook.api.ProfileField.NAME, com.facebook.api.ProfileField.PIC, com.facebook.api.ProfileField.PIC_BIG, com.facebook.api.ProfileField.PIC_SMALL);
Collection<Integer> users = new ArrayList();
users.add(myid);

// Get my information
Document d = frc.users_getInfo(users, fields);
String myname = d.getElementsByTagName(“name”).item(0).getTextContent();
String mypicture = d.getElementsByTagName(“pic”).item(0).getTextContent();

// Get my friends id
Document d2 = frc.friends_get();
String s = d2.toString();
NodeList userIDNodes = d2.getElementsByTagName(“uid”);
int fcount = userIDNodes.getLength();

Collection<Integer> friends = new ArrayList<Integer>();
for (int i = 0; i < fcount; i++) {
Node node = userIDNodes.item(i);
String idText = node.getTextContent();
Integer id = Integer.valueOf(idText);
friends.add(id);
}

List l = new ArrayList();
Map m = new HashMap();
Document d3 = frc.users_getInfo(friends, fields);

// Get my friends information
for (int j = 0; j < fcount; j++) {
String name2 = d3.getElementsByTagName(“name”).item(j).getTextContent();
String picture2 = d3.getElementsByTagName(“pic”).item(j).getTextContent();
String picture3 = d3.getElementsByTagName(“pic_small”).item(j).getTextContent();
String picture4 = d3.getElementsByTagName(“pic_big”).item(j).getTextContent();

m.put(“name”, name2);
m.put(“picture”, picture2);
m.put(“picture_small”, picture3);
m.put(“picture_big”, picture4);

l .add(m);
m = new HashMap();

}
request.setAttribute(“friends”, l);
request.setAttribute(“myname”, myname);
request.setAttribute(“mypicture”, mypicture);
request.setAttribute(“numFriends”, new Integer(fcount));

So all the information from Facebook is now added to the request and can be displayed in a JSP. The code above is not very elegant and is not optimized(!). Its just a pice of code done after half an hour of work and my goal was to implement an integration module for testing purpose.

Hope this blog post can help others looking for hints when getting started with Facebook application development/integration


  41 comments for “Building a Facebook Application in 15 minutes

Leave a Reply

Your email address will not be published.