How I created a Facebook application with FBJS

When I last posted about Facebook's FBJS, I'd thought it so trivial a task to write a Facebook application that I could do it blindfolded, and I probably sounded like that as well, until I tried it for myself. Last night, I sat down and decided to get my hands dirty; I was going to build myself a Facebook app using only client-side technologies (which means only static FBML, and FBJS).

It's definitely not easy, even after rereading many of the how-to guides available online. But, let me not discourage you from even trying. It is a wonderful feeling the first time you see your app working properly within Facebook's pages.

My application is basically a reader for Grace@Work's eCommentaries. Here's a screen capture of the application's canvas page in action:



To create this application, all I needed was a HTML file (FBML more like, with some FBJS) hosted on a public webserver. So, really, anyone can do this. You can use any of the free hosting services on the web. I used Google Page Creator.

As with the examples in my last two posts, I used Yahoo! Pipes to grab and make the data ready for consumption. Then, I used Facebook-proxied AJAX calls to access this (RSS formatted) data via JSON. The FBJS looks like this:


var ajax = new Ajax();
ajax.responseType = Ajax.JSON;
ajax.post('http://pipes.yahoo.com/pipes/pipe.run?_id=&_render=json');


And in the callback method, after the JSON object is loaded, I looped through the commentary items and construct DOM objects to display on the screen (note FBJS's wonderful chainability):


var linkurl = data.value.items[i]['link'];
var linktitle = data.value.items[i]['title'];
var itemdesc = data.value.items[i]['description'];
var itemauthor = data.value.items[i]['author'];
var itemdate = data.value.items[i]['pubDate'];

var domcommentary = document.createElement("li");
var domheader = document.createElement("b").appendChild(document.createElement("a").setHref(linkurl).setTextValue(linktitle).setTitle(onclickmessage));
domcommentary.appendChild(domheader);

domcommentary.appendChild(document.createElement("i").setTextValue("by " + itemauthor + ", " + itemdate));

domcommentary.appendChild(document.createElement("span").setTextValue(itemdesc));

postsarea.appendChild(domcommentary);


See, it's just standard javascript with special objects that looks and behaves very much like standard objects. It even feels like some of the iterative JSON stuff I did for my previous posts. And that's all the heavy lifting my app required. I just needed to add a link in the profile box and clean up the About page a little bit, and that's about it.

Did I make it sound too easy again? I faced many difficulties with setting up the app, and even more with the FBJS. I suppose this is to be expected because FBJS is new. I'll need to make it a little more robust before adding it to the application directory. Firebug helped tremendously, though I suspect I didn't fully use all it had to offer. And I benefited from learning through other people's similarly painful experiences. But, it was great fun. Seriously.