Get Started with Facebook Application Development

Introduction

Facebook is a massive part of millions of web users lives, even my nan has a Facebook account and she's 80. So how can you build something that these users can enjoy and possibly use to make a profit?

In this tutorial I'll be going over the basic steps that will get you on your way to creating the next big app that everyone will be bugging their friends to join.

If you don't want to learn how the process works and would just like to use a template there is a Facebook Application Template available at gimpneek.com/releases. Just drop the folder into the directory on your server you want your application to reside in and then follow the application set-up steps and you will have a fully functioning app, all you need to do is add your own content.

What you'll need

• A web server with PHP 5
• A basic knowledge of PHP
• A Facebook account with the Developer Application installed
• A copy of the Facebook Client Library Download now!
• A killer idea for an awesome Application
• Patience

Steps

Setting up your directory on your Server

1. You will want to create a folder somewhere called "facebook". This will help you remember where your files are being stored when you go to tell Facebook where to look.
2. I find it helps to have a separate folder for each Application I'm making. In the facebook folder create another folder called "test_app".
3. This folder will be where all your Facebook files will be stored. Copy over the Facebook Client Library. These files allow you to grab the user data from Facebook.
4. Now let's create our "index page", this is the page we'll be developing our App on and the page Facebook will be displaying. Create a file called "index.php", you can leave it blank for now, we just want to have something there for the moment.
5. Let's also add a style sheet so we can style our App's data. Create a file called "style.css", yet again this can be left blank for now.
6. These 2 files will hold your App though you can have other files to handle different functions (like putting data into XML files);

Setting up the App in Facebook

1. Go to the developers page Here
2. Press the "Set Up New Application" button
3. You will be asked to name your application (this is the name displayed on your developer page). Name it something easy to rememeber.

Screenshot 1

1. Now you can edit the name of your App, the description, add logos and set the decumentation for the App

Screenshot 2

1. Now set where the App can be viewed by pressing the Authentication tab, is it going to be displayed on the user's profile? Set the Post-Authorisation address to the index.php in your directory

Screenshot 3

1. Now set up the link to your files by pressing the Canvas Tab. Here you need to choose the Facebook URL for your App, you can also add URL's for saying thanks for adding the App. Though these links need to be relative to your Canvas URL

Screenshot 4

1. Now when people go to the Canvas URL it will display the HTML from your PHP file on your server.

Coding Your App

1. Let's get started on making the part the user will actually see. Open up your "index.php" file. And add the open and close PHP tags.

Screenshot 5

1. First Thing to do is link to the Facebook Client Library this will allow us to add the Facebook interaction. In between your PHP tags add this line require_once ('facebook/facebook.php'); If your facebook.php file isn't in the directory stated, link it to right directory.

Screenshot 6

1. Now lets add the variables that will hold your API key and Application secret. Your API key and Application secret are displayed on the developer page.

Screenshot 7

1. For the Application to use the Facebook Platform we need to create an new Facebook class. To do this we declare the variable we want to call the class with and the create a new class and add in our API key and the Application secret. The code looks like this.

$facebook = new Facebook($appapikey, $appsecret);

Screenshot 8

1. We want the Application to make sure that only logged in Facebook users can see the Application. This also helps with the authentication of the App. Add this code $user = $facebook->require_login();

Screenshot 9

1. We now need to declare a variable that will let us redirect to our App's Canvas page when the user is logged in and has added the App. Add this code $appcallbackurl = 'http://www.gimpneek.com/facebook/webmonkey/index.php';

Screenshot 10

1. Now we add a fun little piece of code which tries to catch any errors we might encounter during the authentication process. All it is doing is telling Facebook to send people who haven't used the App before to add the App and if there's a problem then clear the cookies and send them back to the login screen. Add this code:

try{
if (!$facebook->api_client->users_isAppUser()){
$facebook->redirect($facebook->get_add_url());
}
}
catch (Exception $ex){
//this will clear cookies for your application and redirect them to a login prompt
$facebook->set_user(null, null);
$facebook->redirect($appcallbackurl);
}

Screenshot 11

1. Finally for this example we will want to grab the user's userID (uid) so we can display their name using FBML (Facebook's Mark Up Language) to do this we just ask Facebook who the logged in user is, this comes back with the userID and we can then echo that into our FBML. Add this code: $userID = $facebook->get_loggedin_user();

Screenshot 12

1. That's it for the boring "getting it to work" stuff. Now lets add some actual stuff to the page. As we're going to be using HTML, FBML and Javascript we need to be adding this after the PHP close tag (If we need to use php again we can just add the open and close tags in line).

The most important part about writing your content (if your using the FBML render method) is that you just use div tags (so now html,head,body tags like in normal HTML documents) this is because your file is being imported into Facebook so the page it's being displayed on already has these tags. You may want to set up your file differently to how I have mine set up. I have my Javascript and CSS links all over the place but you can just define them at the start to stop any confusion.

1. So let's add ourselves a title for the App using the h1 tag

Screenshot 13

1. Now let's link to our style sheet, we'll be using inline PHP here. Add this code

<style type="text/css">
	<?php require('style.css'); ?>
</style>

Screenshot 14

1. Now we've got our style sheet set up, let's add a paragraph that will just say I "enter name" built this and you "enter name" are viewing it. This will use the fb:name FBML tag, this tag has 2 arguments the users uid and useyou (which tells Facebook to use you instead of your full name). This example uses 2 methods of getting the uid, manually entering it into the FBML (how I get my name) and by using the userID variable we got earlier. Add this code:

   <div id="description"> 
   

<p>I<fb:name uid="573940391" useyou="false" />built this app and you (<fb:name uid"<?php echo $userID ?>" useyou="false" />) are viewing it. </p>

This will then say "I Colin Danger Wren built this app and you (Webmonkey User) are viewing it".

Screenshot 15

1. Now just add some CSS to the style sheet, maybe have the bg of the description be red. Add this code:

#description { background-color: #ff0006; }

And Your Done!

• Let's have a butch at the final output

Screenshot 16

Alternate methods

Enhancements

• try putting your content in a js-string tag and using buttons to show and hide it.

<div id="outside_location">
<a onclick="outside_location.setInnerFBML(display_human);">Friends</a>
I think you should totally click on the link for Javascript awesomeness
</div>
<fb:js-string var="empty">
<a onclick="outside_location.setInnerFBML(display_human);">Friends</a>
</fb:js-string>
<fb:js-string var="display_human">
<div >
<a  onclick="outside_location.setInnerFBML(empty);">Hide Friends</a><br />
This is content
</div>
</fb:js-string>

<script type="text/javascript" charset="utf-8">
  var outside_location = document.getElementById('outside_location')
</script>

Suggested readings

Style your external pages like Facebook (for easy intergration) How I developed my First Facebook App List of FBML tags Official Documentation