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:[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...


require_once 'includes/facebook.php';

$appapikey = '85e4cd7042467d0b20109aafb6f20117';
$appsecret = 'be5a528d73ad191b6b21a84c4af054ee';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();
$callbackurl = '';


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; }

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; }


$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.

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Code
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Web Design
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Web Design
    The Truth About Multiple H1 Tags in the HTML5 EraH1 retina
    Whether you're a webmaster or a web designer, there's a question you've most likely either asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly should I implement them?"Read More…
  • Code
    JavaScript & AJAX
    Events and Real-Time Messaging in Chrome Extensions Using SimperiumImg 400
    Recently I had the opportunity to look into Chrome Extension development.  The scenario was pretty simple, I had to notify a group of users when someone from the group was using a website. A Chrome Extension was an obvious choice and after a bit of documentation I came across Simperium, a service that I could use to send and receive data real-time in my extension.Read More…