So you have been using Facebook for a while now and you're ready to dig down deep into it. That's certainly a good idea, because the Facebook API is very powerful and it allows you to create your own Facebook applications, which you, your friends or everyone else can then consume.
You can use the Facebook applications you build on profile pages, canvas pages, and so on. You can even make money by developing practical applications. So, let's get started with creating your own Facebook application.
What You Need
To create your own Facebook application, you should know how to program in one of the supported languages, such as PHP, Ruby on Rails, or Python. (For this tutorial, I assume that you are good with PHP, and I use Facebook's Status Updater application as an example.) With that knowledge, all you need to do to get started is:
Add Facebook Developer Application to your Facebook account.
Add your first Facebook application.
Then it's your baby!
Add Facebook Developer Application
Go to the Facebook Developers page and click "Add developer." This is the central location for all your applications on Facebook. You can request as many as 100 API keys from the applications page, as well as manage and change the settings for all your applications. Now that you have added Facebook Developer Application to your account, let's move on to adding your very first application.
Adding Your First Facebook Application
Go back to the Facebook Developers page and click the Set Up New Application button. This will take you to the "Create Application" page, where you are required to provide the name of your application and, as a rule, agree to certain terms and conditions.
After saving changes to this page, you will be taken to your application's homepage, which serves as your application's edit page. You can change all the settings related to your application here, such as its name, description, icon, logo and much more. You can add more developers if you are going to develop the application in a team.
On the same page, Facebook provides you with an API Key and a Secret Key, which are the passports for your application to interact with
Facebook core applications and the outside world. Do not share you secret key with anyone.
To start developing your application, you need to make important changes to the following settings:
API Key This unique key helps Facebook identify whatever request(s) you make. Enclose this API key along with all your requests.
Secret Key As mentioned previously, you should keep this key safe and share it with no one, because it is responsible for authenticating your request.
Now, click on the Authentication tab, where you need to specify:
Post-Authorize Callback URL When a user authorizes your application and adds it to a Facebook account, then Facebook pings this URL. So, this URL needs to be your site's URL where you application is hosted. This cannot be a URL from Facebook.
Post-Authorize Remove URL When your application is removed by a user, this URL will be pinged along with a post request, which will contain the User_id. This process allows you to log which user has removed your application.
Now click on the canvas tab, where you need to specify:
Canvas Page URL Choose a canvas page URL for Facebook, such as http://apps.facebook.com/your-app-name.
Canvas Callback URL This is the muscle of your application. Facebook pulls the content from this URL and displays it on the application's canvas page. The URL can be where you have your application hosted.
Render Method You need to selected this option according to your code. If your code is going to have FBML tags, then you should select "FBML" in this option. Otherwise, leave it default as "iframe" (for this example, you can choose either).
These settings should be enough to get you started with your first Facebook application. Undoubtedly, you can make many other changes to suit your needs in due course.
Now, It's Your Baby!
Now that you have set up the application, let's have a look-see at how to put some muscle on your bare-bones application. In this example, we will use Facebook's PHP client library, which is a compressed file. After downloading the client library, extract the files. You will get two folders namely, footprints and php.
Footprints is a sample application provided to help you understand how the Facebook API works. However, because the API functions keep changing, this code might have some deprecated functions. The php folder contains the library files that you will use to talk back to the Facebook API.
Let's start with the code by including the library file called facebook.php, as shown in Figure 1.
Figure 1. Locate facebook.php in Facebook Library Folder
Create a file called index.php and copy the following code into it:
$appapikey = 'INPUT YOUR APP KEY HERE';
$appsecret = 'INPUT YOUR APP SECRET KEY HERE';
//create the object
$facebook = new Facebook($appapikey, $appsecret);
* Check if we have an already logged in user ?
* Yes - Skip the require_login
* No - User is redirected to facebook login page
if(!is_numeric($facebook->get_loggedin_user()) || !$facebook->api_client->users_hasAppPermission("publish_stream"))
$facebook->require_login($required_permissions = 'publish_stream');
* In case user reaches here and our application doesn't have proper permissions to publish,
* then display this error message
echo 'Darn !! Something just broke !!' ;
* Check if we have Post data and a status to update
if($_POST['update_me'] == 1)
$uid = $facebook->get_loggedin_user();
$tmp = explode ("_",$res);
if($uid == $tmp)
echo "Timeline updated successfully, <a href='http://www.facebook.com/?id=$uid'> Go back to your profile page</a>";
echo "Couldn't update your status, Please try again";
* Display the form to update status
<form method="POST" action="http://www.your_domain.com/index.php" >
<input type="hidden" value="1" name="update_me"/>
<textarea name="st"></textarea> <br>
<input type="submit" value="Update status" />
Important Tasks to Remember
Make sure you complete the following tasks to properly build your application:
Include the library file (facebook.php) and change the path in require_once to match your folder hierarchy.
Copy/paste the API key and secret key before trying to use your application. It won't work without these anyhow.
Input the canvas page URL right to the path of the script on your server/domain.
When you execute the above script, it will look for logged in users, if any. If a user is not logged in, then it redirects the user to the Facebook login page. This is also handled by the require_login function, but the problem with require_login is that it redirects so often that any post data to your page is lost. So, you have put a check before calling the require_login function. In the same line, you also check whether or not your application has permission to post updates onto a user's stream. If you do not have permission, the user is prompted to allow your application.
When you have permissions and post data, the status is updated to the user. When a status is successfully posted, a response of the type userid_postid is returned. If it fails, then different error codes are returned. Find a list of error codes on Facebook's wiki page.
What Have You Learned?
You have just learned how to start building your own Facebook applications. You can extend the above code to suit your requirements. If you feel confident, you can move on to write some advanced programs using FBJS and XFBML. Other than that, you should keep abreast of any functions that Facebook deprecates -- particularly those that your code might be using. Otherwise, your application might crash all of a sudden.
To view a working demo of the app described in this example, see Facebook's Status Updater.
Sachin Khosla is a Web developer and technology evangelist who has written and spoken extensively about open source technology. Sachin is part of an active open source community that organizes OSScamp in Delhi, India. To learn more about this author, read Sachin's blog at Digimantra.com.