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.
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.
Pre-development Changes
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:
<?php
require_once 'php/facebook.php';
$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
*/
if(!$facebook->api_client->users_hasAppPermission("publish_stream"))
{
echo 'Darn !! Something just broke !!' ;
}
/**
* Check if we have Post data and a status to update
*/
if($_POST['update_me'] == 1)
{
$res=$facebook->api_client->stream_publish($_POST['st'],'');
$uid = $facebook->get_loggedin_user();
$tmp = explode ("_",$res);
if($uid == $tmp[0])
{
echo "Timeline updated successfully, <a href='http://www.facebook.com/?id=$uid'> Go back to your profile page</a>";
}
else
{
echo "Couldn't update your status, Please try again";
}
}
/**
* Display the form to update status
*/
else
{
?>
<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" />
</form>
<?php
}
?>
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.