I recently tried to get my hands dirty with Facebook application development platform. I know there are a bunch of resources available on the web to help you in the process, but when I was trying get my tiny app to work, I realized there were a few things which aren’t explained too well on http://developer.facebook.com/. I am writing down the step-by-step guide that you can use to create your first Facebook application and join the club!

Before you start creating application, here is in brief, how Facebook communicates with your application:

• User accesses your application using a url like http://apps.facebook.com/yourapp
• This url invokes the callback url that you specify while creating your app (explained below). This url essentially where your app is hosted, e.g. http://yourserver.com/facebookapp.
• Your application can serve either html (iframe app) or FBML. In case you have decided to use FBML, the content is parsed by Facebook and then rendered back to the client after converting it to html.

Following are the steps to create your first Facebook app. For the sake of brevity I am not duplicating information which is already present somewhere else:

Create/Register your app with Facebook

• Add the Facebook Developer Application to get started.
• Read this article and follow the steps to add a new application:
• Once you have created the application, you should have your api key and the secret key

Implementing/Deploying your application

We are going to create a simple app that prints the name of the user and the current time (big deal!). The example below also illustrates how to leverage Ajax support in Facebook apps.

• You can use multiple languages to implement your facebook app. Officially only java and php are supported, but there are implementations available for other languages as well. Checkout the resource page.
• If you already have a webserver than can host your application, you can skip to the next point. For the rest, you’d need to get a hosting service. If you’re just trying to get a feel of Facebook app, you may want to start with php (no I am not a php fan - in fact I had not written a single line of php code till last week) for the simple reason that it’s easy to find free/cheap php hosting sites.
• [Update: If you're writing the app in java, check this out]
• Create the php file corresponding to the call back url you registered while creating the application. The following shows how to get user information, and print current time.

<?php
//replace fb-phplib-root by the directory having
//the facebook client api library
require_once('fb-lib-root/client/facebook.php');

$api_key = "your-api-key";
$secret_code = "your-secret-code";
$facebook = new Facebook($api_key,$secret_code);
//get logged in user id
$fb_user = $facebook->require_login();
//use fb:name to get the user name
echo "Hi <fb:name uid='".$fb_user.
 "' useyou='false' possessive='false'/>!";

$facebook->api_client->fbml_refreshRefUrl(
       "http://yourserver.com/default_fbml.php");
$facebook->api_client->profile_setFBML(
 "<fb:ref url='http://yourserver.com/default_fbml.php' />");
?>
//show the default fbml on canvas as well.
//fb:ref tag gets the file content.
<fb:ref url="http://yourserver.com/default_fbml.php" />
<?php
//uncomment the following to debug the facebook object
//echo "<pre>Debug:" . print_r($facebook,true) . "</pre>";
?>

Here is what default_fbml.php contains. It shows the time and has a Refresh link that gets time from server using AJAX (I know what you’re thinking, but let’s leave the more complex stuff for the second Facebook app :)):

<div style="padding:10px;">
Current time is :
<span id="time">
<?php echo date("d/m/y, H:i:s",time()) ?>
</span>
<a href="#" onclick="fetchTime(); return false;">
<span id="action">[Refresh]</span></a>
<br />
</div>
<script><!--
function fetchTime() {
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data) {
document.getElementById('time').setInnerFBML(data);
}
ajax.requireLogin = 'true';
ajax.post('http://yourserver.com/timeserver.php');
}
//--></script>

The ajax requests go back to timeserver.php. This file simply echoes back the current time:

<?php
echo date("d/m/y, H:i:s",time());
?>

Caveat with fb:ref
The file specified in <fb:ref> is cached by FaceBook for the sake of performance. If you want to update the text that’s shown to the user on the profile page periodically, you can have a schedule a job calls fbml_refreshRefUrl(defaultFbmlPage). If you show the same profile view to all the users, you just need to do it once, and not for every user.

Session Keys and the cron job

If you are planning to use a cron job to update, for example, the default profile page, you would invariably run into the issue of invalid session key. In order to fix this, you need a key that does not expire. Look here to get more information.
Hope you found the post useful! Comments/suggestions are welcome! I will soon post another example using Java client libraries.

Useful links and resources:

Facebook developers’ Wiki
Download Client Libraries
Facebook REST interface
FBML