While I’m learning silverlight behind the screen, I thought I’d put a little article together about setting up your development environment for the Facebook Development platform. This little example is for use with a PHP setup. Its really pretty easy and quick to get everything up and running. Just read the article and if you feel the need leave me some comment love.

What you’re going to need:

• A Host that supports PHP
• The Facebook PHP Client Libraries (download)
• A code or text editor. I prefer to use DreamWeaver for my PHP editting.
• A way to upload files to your host (FTP or browser based is fine)
• You will also need to get yourself some Developer API Keys (discussed later)

Thats pretty much it, I told you it wasn’t that complicated!

Now that you have downloaded the client library from facebook you will want to decompress/unzip it. You will find yourself with two folders one is called Footprints – this is the Facebook sample application and its very helpful for examples on how to do things. But you do not need to upload it, unless you want to follow the Facebook tutorials. (which isn’t a bad idea). The other folder, labelled PHP is the one we want. I renamed mine to “fbLib” before uploading it to my host, but thats all a matter of preference.

Once I renamed the library folder I uploaded it to the directory I was building my application in. You should do the same right now. Don’t worry we’ll still be here when you get back.

Now that you have uploaded the library its time to set up some files and get into some code.  Please keep in mind there are many ways to set up your code, this is just the way I like to do it. Also, I am not including any error handling at this point.

So create a new php file and name it config.php then start typing the following – go ahead and be lazy and copy and paste it. LOL

<?php

define('API_KEY', 'YOUR API KEY GOES HERE');
define('API_SECRET', 'YOUR API SECRET GOES HERE');
// Get these from http://developers.facebook.com

// Connect your app to the facebook client library
include_once 'fbLib/facebook.php';

?>

Next we need to create our index.php so go ahead and create a new php file and name it index. In that file write the following code.

<?php
include_once 'config.php'; 

$fb = new Facebook(API_KEY, API_SECRET);

//The following line forces the person using your app to sign into facebook
//and will ask them to grant your application access to their facebook information.
$user_id = $fb->require_login();

//The call to $fb->api_client->users_getInfo returns an array of user specific information and can pass
//a list of what information is desired to be returned.
$user_details = $fb->api_client->users_getInfo($user_id, 'last_name, first_name, pic_square, sex');
$user['first_name'] = $user_details[0]['first_name'];
$user['last_name'] = $user_details[0]['last_name'];
$user['pic_square'] = $user_details[0]['pic_square'];
$user['sex'] = $user_details[0]['sex'];

?>

For a full list of available user information that can be returned check out this page on the Facebook Developer Wiki

Now that we’ve requested the user to sign in and grant us access to their info, we want to write some display code with fbml (facebooks display language). Lets make Hello World example here that greets the user with their first name.

So back into your index.php code and after your closing php bracket “?>” put this…

 

<fb:header>The title of your page...</fb:header>

Welcome to my new Application <fb:name uid="<?php echo $user_id; ?>" linked="false" /><br />

You’ll notice that I used the <fb:name /> tag here and passed it the users id this will return the users name from facebook with very little effort.

But wait! Didn’t we store the users name and other information into our $user[] array?
Yes we did. So we could have just as easily done something like this and not used the fbml tag.

<fb:header>The title of your page...</fb:header>

Welcome to my new Application <?php echo $user['first_name']; ?> <br />

The results will pretty much be the same, so its really up to you which way you approach the solution. But I wanted to show at least a couple of the fbml tags here.

Now that you have this all set up, upload your files to your server.

Then you need to go back to facebook and actually sign up for your developer account.  To start this process go here Start a new app here . 

1) Give your application a name and copy and paste your Authentication Key and Secret into your config.php file.

2) Then go to the Canvas Tab in the application administrative area . (see the image below for example)

Canvas Page URL: This should be http://apps.facebook.com/YOUR_APP_NAME (how people access your app on facebook)

Canvas Callback URL: This is the address to the code we just created on your server. And should be something like this:
http://www.YOURSITE.COM/your_facebook_application_directory (if its not the root of the site that is.)

*NOTE: you do not want to put the absolute path to the page we created in the Callback url, as it could cause problems for you later.

3) Now you should be all set to navigate to your application on facebook and check it out!

As always, questions, comments are more than welcome!

- Fickle Frank