content top

Creating a Facebook Application – a simple guide for PHP, JavaScript, Flex and Grails developers.

 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.

facebookapi1

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).
  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.

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!

 

 

 

Bookmark and Share
StumbleUpon It!

Related posts:

  1. Creating a Facebook Application – a guide for PHP, JavaScript, Flex and Grails developers If you’re a web developer and you haven’t explored...
  2. How to create a Facebook Friend Selector using jQuery and PHP or Grails (without FBML) When I first attempting to code up a pure PHP...
  3. How to develop a Web Application in 5 easy steps – A guide for web developers and businesses Having developed web applications for a few years now,...
  4. How to Add Facebook Connect To Your Website in just 3 Steps     Many Social Networking sites allow users to authenticate...
  5. Web Workers – Amazing Parallel JavaScript Tasking For Your Application   I’ve been looking at some of the cool new...

Related posts brought to you by Yet Another Related Posts Plugin.

8 Comments »

  1. avatar comment-top

    [...] See the original post: Anatomy of a Facebook Application [...]

    comment-bottom
  2. avatar comment-top

    You really should reference the Facebook Connect Plugin for Grails, which integrates all the Facebook stuff in a nice Grailsy way.

    http://www.grails.org/Facebook+Connect+Plugin

    ( and why is your captch below the submit comment button ? ) :)

    comment-bottom
  3. avatar comment-top

    Cool. I really loved your article. What app did you create after you read about all this stuff?

    comment-bottom
  4. avatar comment-top

    [...] original here: Creating a Facebook Application – a simple guide for PHP … SHARETHIS.addEntry({ title: “Creating a Facebook Application – a simple guide for PHP …”, [...]

    comment-bottom
  5. avatar comment-top

    Thanks for asking! It’s not live yet but I created a PHP based image sharing service that allows you to customize images and serve them up to your friends as wall posts. It uses FBML for things like friend selection components and I found Dialog windows a very neat way of both presenting notifications and customization dialogs inside the app. One of the differences between my app and say..BumperStickers is that it goes the extra mile to preserve search functionality which is very important when it comes to large datasets.

    You should definitely try your hand out at creating an app yourself!

    comment-bottom
  6. avatar comment-top

    ??????????…

     If you’re a web developer and you haven’t explored the many ins and outs of Facebook app development so far, I[...]…

    comment-bottom
  7. avatar comment-top

    [...] Creating a Facebook Application – a simple guide for PHP, JavaScript, Flex and Grails develope… (tags: api facebook Tutorial) Posted by richesh Filed in Uncategorized No Comments » [...]

    comment-bottom
  8. avatar comment-top

    Sorry, but then is possible to integrate Jquery in FBML canvas? And how?
    Just a <fb:ref or an include via php?

    Regards

    comment-bottom

RSS feed for comments on this post. TrackBack URL

Leave a comment