Well it’s been a while since I promised a Facebook tutorial and finally it is here. Well Part One at least. :-)
In this first part I will go through the process of creating a very simple Facebook application focusing on the adding the application and the embedded profile application itself.
I will be using PHP5 throughout the course of this tutorial in conjunction with the Facebook PHP5 Client Library.
download the facebook client library
tutorial
Once you have download the Facebook Client Library and extracted the contents you will be presented with a facebook-platform folder and within this a client folder (The PHP 5 client and the code base we will be using for this tutorial), footprints (A Facebook demo application) and a php4client folder (The PHP 4 client).
To start off with we will create a folder called “tutorial” within the root “facebook-platform” folder.
Next we need to create to PHP files; index.php and config.inc.php. The contents of these files are displayed below:
index.php
The index.php provides the foundation for the entire application. This is where the initial add page is created along with the embedded application.
- First of all we need to include the facebook client library and the config.inc.php.
// the facebook client library
include_once ‘../client/facebook.php’;
// this defines some of your basic setup
include_once ‘config.inc.php’;
- Next we instantiate an instance of the facebook class and force the user authentication before logging in.
$facebook = new Facebook($api_key, $secret);
$facebook->require_frame();
$user = $facebook->require_login();
- Now we create an add application screen to be initially displayed when a user clicks to see your applications hompage. This code includes two simple facebook variables to display the users facebook username and to add the facebook add url for the application.
<div style="padding: 10px;background-color:#FFFFFF;">
<h2 style="font-family:arial;font-size:14px;">Hi <fb:name firstnameonly="true" uid="<?=$user?>" useyou="false"/>!</h2><br/>
<div style="width:255px;float:left;border-right:1px solid #FFFFFF;background-color:#333333;height:100px;padding: 10px;"><a href="http://www.andrewsellick.com"><img src="http://news.andrewsellick.com/facebook-platform/asellick/images/logo.gif" alt="AndrewSellick.com" title="AndrewSellick.com" style="border:0px solid #FFFFFF;" /></a></div>
<div style="width:330px;float:left;background-color:#333333;height:70px;color:#FFFFFF;padding: 25px 10px 25px 10px;font-family:arial;">
<p style="margin:0px 0px 8px 0px;">Welcome to the AndrewSellick.com Facebook App. If you want to know all the latest news on AndrewSellick.com feel free to add this application to your profile.</p>
<p style="margin:0px 0px 0px 0px;"> <a style="color:#FFFFFF;text-decoration:underline;" href="<?= $facebook->get_add_url() ?>">Add AndrewSellick.com</a>. Enjoy…</p>
</div>
<div style="clear: both;"/>
<p><a href="<?= $facebook->get_add_url() ?>">Put AndrewSellick.com in your profile</a>, if you haven’t already!</p>
<div style="clear: both;"/>
</div>
- Finally we create the FBML code. This is the code that will be displayed for the embedded application. The code is very simple and is added using a Facebook Client API call $facebook->api_client->profile_setFBML(); This set the FBML when the Facebook application is added.
<?php
// Create the FBML code for the embeded application
$fbml .= ‘<div style="width:100%;">’;
$fbml .= ‘<div style="width:133px;float:left;border-right:1px solid #FFFFFF;background-color:#333333;height:100px;padding: 10px;"><a href="http://www.andrewsellick.com"><img src="http://news.andrewsellick.com/facebook-platform/asellick/images/logo-small.gif" alt="AndrewSellick.com" title="AndrewSellick.com" style="border:0px solid #FFFFFF;" /></a></div>’;
$fbml .= ‘<div style="width:200px;float:left;background-color:#333333;height:100px;color:#FFFFFF;padding: 10px;font-family:arial;font-size:12px;">Welcome to the AndrewSellick.com Facebook App. This application provides you with the latest news from AndrewSellick.com. <br /><br /><a style="color:#FFFFFF;text-decoration:underline;" href="http://www.andrewsellick.com">Visit AndrewSellick.com</a></div>’;
$fbml .= ‘<div style="clear: both;"/>’;
$fbml .= ‘<div style="width:371px; border:1px solid #333333;background-image:url(http://www.andrewsellick.com/wp-content/themes/unsleepable/images/sub-nav-bg.gif);background-repeat:repeat-x;position:top left;" id="andrewsellick-feed">’;
$fbml .= ‘<div style="padding:10px;font-family:verdana;font-size:11px;">’;
$fbml .= ‘<p style="margin:0px 0px 8px 0px;color:#666666;"><a style="color:#DA1074;" href="http://www.andrewsellick.com/">Link One</a> – </p>’;
$fbml .= ‘<p style="margin:0px 0px 8px 0px;color:#666666;"><a style="color:#DA1074;" href="http://www.andrewsellick.com/">Link Two</a> – </p>’;
$fbml .= ‘<p style="margin:0px 0px 8px 0px;color:#666666;"><a style="color:#DA1074;" href="http://www.andrewsellick.com/">Link Three</a> – </p>’;
$fbml .= ‘<p style="margin:0px 0px 8px 0px;color:#666666;"><a style="color:#DA1074;" href="http://www.andrewsellick.com/">Link Four</a> – </p>’;
$fbml .= ‘<p style="margin:0px 0px 8px 0px;color:#666666;"><a style="color:#DA1074;" href="http://www.andrewsellick.com/">Link Five</a> – </p>’;
$fbml .= ‘</div>’;
$fbml .= ‘</div>’;
$fbml .= ‘<div style="background-color:#333333;width:373px;font-family:arial;font-size:12px;">’;
$fbml .= ‘<p style="padding:10px;margin:0px;"><a style="color:#FFFFFF;" href="’.$facebook->get_add_url().’">Put AndrewSellick.com in your profile</a></p>’;
$fbml .= ‘</div>’;
$fbml .= ‘</div>’;
$facebook->api_client->profile_setFBML($fbml, $user);
?>
config.inc.php
In this tutorial the config.inc.php will remain very simple and only includes two variables for the Facebook API key and a secret key. These are provided when you create your Facebook application in within the Facebook developer area (Detailed later in this tutorial).
$api_key = ‘INSERT THE API KEY HERE’;
$secret = ‘INSERT THE SECRET HERE’;
download the tutorial code
Download the facebook application development tutorial code.
integrating the application with facebook
To actually add the application to Facebook you will need to go through the follwing procedures.
- Upload the code within the facebook-platform folder to a PHP5 hosting environment.
- Log in to Facebook and navigate to the Facebook developer page (http://www.facebook.com/developers/).
- Click the “Set Up a New Application” button on the top right of the page.
- Insert your desired application name and submit.
- On setting up the application you will presented with an overview which displays basic application information including the API key and Secret required in your config.inc.php. Copy these two keys and insert them in your config file and then re-upload the file.
- Next on the overview page click to edit your newly created application.
- Next we need to insert the application details as follows:
To test it out navigate to the Canvas Page URL in your browser. You should then be able to go through the process of adding the application and finally seeing it displayed on your profile page.
notes
This is a very basic example so I wouldn’t recommend users start to advertise their applications off the back of this tutorial. There will be more tutorials to come introducing more features and discussions on the Facebook Cache, its potential pitfalls and how to overcome them.
Feel free to play with the code and adapt it for your requirements and let me know how you get on…
I hope this has helped. 
Well it’s finally happened… The BBC have released a new version of their now famous homepage in beta and guess what?? They’ve jumped on the Web 2.0 bandwagon.