Build Your First Facebook App

So you want to build a Facebook application and reach literally millions of users. Well luckily, writing an application using the API isn’t too hard to learn (for the basics, anyway). In this tutorial we will write a Facebook app that generates a random quote to display on the user’s profile.

Getting Started

It’s worth noting that the Facebook API is available to a number of languages, all listed on the Facebook Developers Wiki. I will be using PHP 5 for this tut. You will also need to download the PHP 5 Client Library, which I’ve included in the SRC files. All code featured here will be in the index.php file.

Step 1: Initialize Your App

The first step to get a Facebook API key, which allows your app to retrieve information from Facebook. Go to the Facebook Developer Application and click the “Set Up a New Application” button. Pick a name, agree to the Terms & Conditions, and you’ve got your API. Now you need to set up your canvas page name and callback URL.

Your canvas page is the application area within Facebook; the name is added to the URL and will look like this: http://apps.new.facebook.com/[YOUR APP NAME]. The callback URL points to the server hosting the app files. To set these up, from the “My Applications” page click “Edit Settings” on the right hand side. You will see the fields to fill in both, as I did in the screen shot below. While there are lots of other options, none are necessary for this tutorial. Click ‘Save’ and you’re now ready to build your first Facebook app. Facebook even provides you with some start up code. I’ve cut out the extra stuff and gave you only what you need to initialize your app…

<?php

require_once 'includes/facebook.php';

$appapikey = '85e4cd7042467d0b20109aafb6f20117';
$appsecret = 'be5a528d73ad191b6b21a84c4af054ee';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();
$callbackurl = 'http://www.casabona.org/nettuts/';

?>

This is fairly straight-forward code. We create a Facebook object using our API key and app secret, which was given to us when we created the API key. The first thing we do after that is get the user id of the logged in user. This will be valuable to us if we were do things get the user’s name, the user’s friends, etc. I’ve also added the $callbackurl to make it easier to link to images or other files, as Facebook does not allow relative linking.

Step 2: Writing the Application

If we don’t make specific Facebook calls, this is just like writing a php application. Below is our code.

//initialize an array of quotes
$quotes= array("Only those who dare to fail greatly can ever achieve greatly.", "Take my wife. Please!", "I believe what doesn't kill you only makes you... STRANGER");

//Select a Random one.
$i= rand(0, sizeof($quotes)-1);

//print the CSS
print ('
<style type="text/css">
 h1{ margin: 10px; font-size: 24pt; }
 h2{ margin: 15px; font-size: 20pt; }
</style>
');

print "<h1>Nettuts Quotes</h1>";
print "<h2>". $quotes[$i] ."</h2>";

This is all you need to do to print to the canvas page. One thing to note is the way we create CSS. We cannot call a file like style.css- we actually have to include the CSS in the HTML. This is so our CSS doesn’t interfere with Facebook’s. You should also know that when styling divs, you can only uses class, not id. The code we created will produce something like this:

Step 3: Creating the Profile Box

Finally, some Facebook specific stuff. The code below is necessary to add our quote to the user’s profile, granted they are displaying our app in their profile. In our app, I’ve added the follow code right below $i= rand(0, sizeof($quotes)-1);

//prepare string for profile box
$text= ('
<style type="text/css">
 h1{ margin: 10px; font-size: 24pt; }
 h2{ margin: 15px; font-size: 20pt; }

</style>
');

$text.=('<h2>'. $quotes[$i] .'</h2>');
//set profile text
$facebook->api_client->profile_setFBML($text, $user_id);

Notice I’ve done two things here: reprinted the CSS and put everything in a string called $text. This is because the function that sets the profile box text, profile_setFBML, takes two arguments: the text that should go in the profile box, and the id of the user. Any CSS defined for the canvas page is not transferred to the profile, so we must also add that to our first argument. The end result is this:

That’s It!

We’ve obviously only scratched the surface as far as Facebook application development goes. However, with the Wiki and resources Facebook gives you when you get an API key, you should be well on your way to creating the next big app! If you want to check out this app in all its glory, you can go here, just so long as you have a Facebook account.