I’ve been doing Facebook development for a while now. In the beginning I found myself searching around for answers, this post is aimed at people like me who are searching for some helpful tips on Facebook Application Development. This post deals with some technical and non-technical aspects of Facebook Development that I came across and is by no means exhaustive.
1. Plan Ahead
Like all web applications, the first place to start is the drawing board. This will not only allow you to work out what is needed, but it also helps you make the choice between using FBML Canvas or an Iframe not to mention getting everything into perspective before you start. There’s nothing more annoying than getting half way through an implementation and realising some of what you’ve done needs changing.
Part of the planning should include (despite how boring it sounds) reading the Platform Guidelines which now also include an Example and Explanations section detailing some of the policies for the most important Facebook Platform features – not only will this help you deliver a good experience to your users but it could save you a lot of problems further down the line.
In addition to the Platform Guidelines I would also advise reading the Storable Data documentation to see what kind of user data you are allowed to store, as this will have a significant effect on what your app might be able to do.
2. Canvas or Iframe?
The answer to this question depends on what you want your app to do.
If your app will rely heavily on the Facebook API & FBML features then a Canvas page is almost certainly your best option, on the other hand if you simply want to take some content from an existing site and display it in Facebook with minimal API interaction then an Iframe would probably be an easier option, of course these are vast generalisations so give it some thought before you code against one or the other.
A good document to read to help you decide is the Choosing between an FBML or IFrame Application page in the developer documentation.
3. Dealing with external files
Ok, so you’ve chosen to use the canvas for your application. Now you want to start by including an external stylesheet, but wait, you can’t get it to work… now what?
Because Facebook canvas pages are parsed by Facebook before they are displayed they don’t need head tags (since there’s already a valid HTML structure), this means that including stylesheets can be tricky. The best way is to use PHP to read the stylesheet and output it into the page upon each request, a poor man’s include if you will. To do this you have to use the file_get_contents() function in PHP like this:
file_get_contents('http://www.somewhere.com/style.css')Of course you could just do everything on the page, which is fine for a single page app, but not if you’re going to have more!
4. Create a Landing Page
Originally part of the Application Verification process was the requirement that users are not met with the “Application Add” dialogue as soon as they go to the canvas URL, now since the Verification process has now been scrapped and all applications are held to this it’s a good idea to do it anyway, even if it’s just to improve the user experience.
The best way that I have found to accomplish this is to check to see if the Facebook user ID is set on every page and then send the user to a permissions page if it is not. Because of this you can no longer use the Facebook::require_login(); method as this will automatically display the “Application Allow” dialogue, instead I use:
$this->_user_id = $facebook->api_client->get_loggedin_user();
if(!isset($this->_user_id)){
$facebook->api_client->redirect("http://apps.facebook.com/appname/permission/");
}This allows your application to send the user to a landing page with a nice graphic and an explanation of the application before they have to add it.
5. Publish to the News Stream
One of the most powerful tools at a Facebook developer’s disposal is the News Feed – the constant stream of updates that the user gets about their social graph. Not only does it give you the chance to drive traffic to your application but it also provides a useful communication tool.
Publishing to the Stream couldn’t be easier:
$message = "Hello World! This is a test of the Publish.Stream Method";
$facebook->api_client->publish_stream($message);Be aware that the Publish.Stream method requires that the user accept the publish_stream permission as described in the Extended Permissions documentation.
6. Use the Multiple Friend Selector
Get your users to invite their friends by using the <fb:multi-friend-selector> FBML tag, the message you send to the users friends is completely customisable and you can even add an email invite box underneath. You can get the full list if parameters and options by reading the Fb:multi-friend-selector documentation.
Using this feature will allow you to tap into the users friends and increase your user base, if a user likes your application they will invite their friends. To encourage more users to do this try and build in more ‘social’ aspects, make their friends a part of the main focus of the application.
7. Use the API Redirect Method
It is sometimes useful to redirect a user to another page depending on certain criteria or after a certain action, one would normally just use the header();PHP function, but this isn’t possible when making an app for Facebook.
To make this happen take a look at the Facebook::redirect() method if your using the PHP library or the <fb:redirect> FBML tag if you’re not.
8. Testing Testing Testing
Before you release your app make sure you test everything over and over again. It’s not good enough to just test it with one user though, create multiple Facebook user accounts, test the app from end to end, from adding the app to removal, everything needs to be tested!
Make sure you read the Facebook Test Accounts documentation to make sure that Facebook doesn’t delete your accounts, this involves adding the users to the “Facebook Testing Account Network” to identify test accounts from real ones.
Also remember to test in multiple browsers, if you’ve used CSS or any FBJS then it’s important that your users get a consistent experience no matter what browser they use – and since Facebook also supports IE6, it’s probably going to be beneficial for you to as well, no matter how painful the process is!
If you’re using Windows you can use the Microsoft IE Virtual PC images to test your application in IE6 and 7, or you can use the free Microsoft Expression Web SuperPreview for Internet Explorer tool to do the same thing.
9. It seems a little slow, any ideas?
One thing you will need to learn is that Facebook is almost always never fast, at least not loading pages.
There are a few things that I have done to help speed things up. The first is to reduce the amount of API calls made by the application, that way you won’t need to wait as long for the API to send you data before you can load the page. Another way is to add some kind of caching, this could either be done in session or in a database.
One of the first things I do however is enable the “Quick Transitions” option in the Application Canvas settings of the Developer App, this speeds up the page loading time significantly as it doesn’t reload the Facebook frame on every page load – this could cause issues somewhere along the line however I have yet to see any side effects of using this option.
10. It’s launched, now how do I add new features?
Oh the memories, needless to say I’ve been burned by this before, first things first – NEVER develop on the live app, you will break things and your users will get annoyed and go away (I’m sure you know this already).
My advice is to create a separate Facebook Application with separate API Keys that points to a completely separate copy of the code so you can break as much as you want without annoying anyone.
Conclusion
This post should give you a bit more information about Facebook Application Development, but it is by no means an a-z guide, as with almost everything, the best thing to do is to go and give it a go yourself!
Posted in: Development, Facebook