AddyOsmani.com | Where Web Businesses Grow

If you’re a web developer and you haven’t explored the many ins and outs of Facebook app development so far, I would definitely recommend taking a weekend out just to try it out – you might be surprised at what you might learn (and it always looks good on a resume ). What I like about the Facebook platform is that you get a nice steady integrated flow of your friends comments, events, application notices and more made we want to ask the question – how can I build something cool that can use all this data? It’s actually surprisingly straightforward.

Facebook application development comes in five main flavors (some of which you can mix and mash)

1. An iFrame: Where you can load any external content hosted by you. This can be a PHP, ASP.net or even Grails application
2. FBML: Facebook’s own markup language is a one of my favorite parts of their API. It allows you to create something as rich as an Ajax friend selector in less than 2 minutes and other elements such as Modal-windows are a breeze too. You can wrap FBML around other languages (as in #1) but be careful as the FBML canvas doesn’t like pure javascript too much.
3. JavaScript: If you’ve been reading my blog, you might be a jQuery fan. Facebook offers up most of it’s API in JavaScript form through a pack called FBJS. It’s fairly versatile but can take a while to get to grips with. If you’re looking to build an application fast I would suggest trying out a PHP iFrame app with pure jQuery in there.
4. Flex/Flash: My buddy Tomás Lin swears by Flex when it comes to Facebook app development. Adobe released fairly extensive API’s for both of them recently which you can Download here. It’s really a personal preference. Popular apps like YoVille have been successfully made using Flash and the FB API (just bare in mind that you’ll need to code all your own components, something that doesn’t take too long thanks to FQL). You can also find an excellent series on every aspect of Facebook Flex development via this O’Reilly blog.
5. Java/Grails – There’s a fairy solid Java API available for Facebook which you can get here. Although Facebook abandoned official support for their Java API a while back, a community has been supporting and making updates to an unofficial version of the API since then. For a good guide on creating your first Grails Facebook app, I found this site useful.

Okay. So now we know what options are available to create our application, how do we decide which to go for?. It took me a few days to decide but in the end, as my app heavily relied on a PHP backend I opted to go for FBML + PHP my for my solution. It doesn’t really matter what flavor you choose as long as you feel comfortable with it.  To begin go over to developers.facebook.com and sign up for an API Key. There are many great guides to setting up your first app and I would recommend this one.
Now that we’ve selected an implementation choice and have our API key, what else might we need to know before we can start coding?. Facebook and the developers community come with a variety of feature-rich solutions to access their services (most recently the Stream API). Know what resources and tools are out available to you before you begin. It could save you a lot of time.


Useful FBML Facebook components

When I started looking into the Facebook API I didn’t realize just how much I wanted to do was readily available. Here are some of the built-in components that you can use straight out of the box.

• Facebook Drop-down AJAX friend selection.
• Facebook Multi-friend Selection with friend previews
• Facebook Multi-friend input
• Facebook pop-up Modal Dialog box
• Facebook Application Tabs
• Facebook Captcha
• Facebook MP3 Player

FQL – How to use it and why its important

FQL is the Facebook equivalent of mySQL and supports a similar syntax. It effectively allows you to query their web service and databases for information about a given user’s friends, photos and profile details and is a powerful gate to creating your own components which use this data. Whilst FQL is quite extensive, it doesn’t support the entire language-set you would expect with a full on querying language so work-arounds may be required for things such as the “LIKE” string. There’s a good list of FQL sample queries which you can find right here.


My tips on Facebook application development

When it comes to coding Facebook apps, my advice is simple: Think before you do That might sound obvious but I would genuinely encourage developers to write down what they would like their application to be capable of before they begin working on it – it helped me a lot. Once you’ve got a basic idea (or Wireframe) in mind, break your FB application down into components. Remember that the Facebook API is essentially a big shelf of information and you can pull anything you want out of it and stick it into a component to achieve something.

This means that if you like a particular jQuery slider, dynamic image grid or an autocomplete plugin – feel free to use it!. Speaking from experience and those of friends, you can find yourself frustrated with the Facebook API at times wondering how best to achieve something that would be trivial using plain HTML and javascript…in the end you’ll realize that there was an easier way to do it, so why not spend some time thinking about it now

There’s a whole world of amazing apps you can create with the Facebook API so good luck getting yours started!