The iPhone has recently opened up its application development platform, making it the most recent joiner in a massive campaign of user submitted content for different platforms. While platforms such as iPhone, Bebo, Myspace, Friendster, etc. have moved to this model, the Facebook development platform was something of a pioneer for this concept. Nearly a year has gone by since Facebook opened up its platform for live development and they have taken the time to develop a fairly robust platform and have had some very successful applications setup shop in their directory.
With all of the hype (and venture capital) being thrown around to promote the service, developers around the world have begun to flock to Facebook to show off their application building skills. With a year under its belt, the Facebook platform has become pretty simple to develop for. In this article I will go over a developer’s view on how to get an application setup and running. In subsequent articles, I will elaborate on some of the cooler features of building and maintaining (not to mention marketing) a Facebook application.
What are we building?
A colleague came to me and asked if there was a way we could somehow post our blog entries to our Toggle Networks Facebook page. With that in mind, for this example Facebook application, I am going to build a simple RSS feed reader to do just that. I will then walk through (in a later post) how to integrate said application into our Toggle Networks Facebook page.
Step 1 - Install the Developer Application
In a smart move to get people familiar with the application install process, Facebook has made it’s management tool for its platform an application itself. The first thing you need to do to get started is install the Developer application. Login to Facebook and proceed to this link:
http://www.facebook.com/developers
Step 2 - Create a New Application
Once you have the developer application installed to your Facebook account, it will appear as a link on the left hand navigation bar of Facebook beside all of your other applications. Click it to go to the Developer application.
Next, click the “Set Up New Application” button at the top of the Developer application. You will be given a box to fill out so that you can name your application. In this case, since we are building an RSS feed reader, I will call our application “Toggle RSS Feed Reader”. Deal with the terms and decide if you want to accept them by checking the box. Now, drop down the optional fields information.
Now, you will be presented with a list of new options. A few of them are very important. Enter your email preferences, then have a look at the Callback URL field. This field will dictate where you are going to place the code for your application. Since Facebook does not actually host the code for your application, you will have to have a server setup where you will host your own code. In my case, I am going to host my code at:
http://www.codewriter.ca/facebook/togglerss/index.php
The next order of importance is the Canvas Page URL. As you might expect, this will be your application’s home on Facebook. This is akin to finding a URL these days, you may have to get creative. I am going to use togglerss so my official Facebook application URL would then be http://apps.facebook.com/togglerss . You will then have to choose whether you want an iFrame application or an FBML application. There are benefits / issues with both solutions. I look at it this way. If you never plan to leave the Facebook platform (IE: you will never port this application to a new platform or website), then choose FBML. FBML provides some very easy ways to perform functionality (such as friend invites) and ensures your applications will stick to the Facebook aesthetic. It is also much easier to develop for. However, if you want ultimate flexibility, choose the iFrame option as it will allow you to completely control your application and make it look however you want. You will have access to Facebook API with whichever option you choose so the choice is ultimately yours.
If you wish to have the classic setup for Facebook applications, choose “Desktop” as your application type, a list of new options should now appear. The most important of these is the question “Can your application be added on Facebook”. Since I don’t mind if someone wants to add the Toggle feed, I will select “Yes” for this option. Once you click this option, a whole slew of new options will become available.
I am not going to go over most of these options now as they are merely ways to extend your application and are not required to get moving. I will however note that you should dictate who can add your application as this will become very important should anyone try to add it. In this case I have chosen “Users” and “All Pages”. You may want to check the “Developer Mode” box to on while you develop so that no one adds your application before it is ready.
If you have done everything correctly, you should now see something like the screen above. Note that I have blacked out my api key and secret key. As the names suggest, you should keep these private, you will make use of them in your code.
Step 3 - Let’s Get Coding!
If you were to go to my Facebook application URL at this point, you would see the above screenshot. This is because I have not put any code yet to where my callback URL will resolve. In other words, I need to actually develop this application at this point so that the callback URL can resolve. Facebook makes it easy for you to develop in whatever language you are comfortable with. Facebook even provides libraries and such for getting started. Since I am a PHP guy and Facebook has a highly usable PHP client library, I recommend you go ahead and download that one. Here is the link:
http://developer.facebook.com/resources.php
Once you have the platform downloaded, create a new file. In my case, I am naming it index.php. Include in the facebook.php file into your index.php file and then upload all files (facebook.php, facebookapi_php5_restlib.php and index.php) to your server and you will have the bare minimum to get your URL resolving. Your code should look something like this:
<?php
require_once (”facebook.php”);
?>
Now, we need to get the base information in so that Facebook knows whose application this is and get some authentication in place. I like to break my configuration options out into a separate file so I created a file called config.php. In this config.php file, you need to specify your api key and secret code (that were dictated to you when you first created your application). To view them, you can simply click on the Developer application and then click on see “My Apps”. My config file looks like this:
<?php
$apikey = “XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”;
$secret = “XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”;
?>
Now, to make use of the Facebook API, you must create an instance of the Facebook class. Then, you can call the require_login method to obtain the user id of the current user and force them to install your application if they wish to use it. The following code now takes up my index.php file:
<?php
require_once (”config.php”);
require_once (”facebook.php”);
$facebook = new Facebook ($apikey,$secret);
$user = $facebook->require_login();
?>
<fb:mediaheader uid=”<?=$user?>”></fb:mediaheader>
If you navigate to your application now, it will ask you to install it. Do so.
Next, we need to actually display something. Since I am using FBML for this particular application, this part will be easy. FBML provides a ton of little code widgets you can use to build your application very rapidly. A full listing of them can be found on Facebook’s developer wiki here:
http://wiki.developers.facebook.com/index.php/FBML
I have decided to put in a “Media Header” which puts a nice little header in at the top, feel free to experiment and put in what you would like. Now, you simply need to put in whatever code you desire. In this case, I created a class called rssReader, the code for which you can download here:
Then, with the code downloaded, you can simply instantiate the class and call the showFeed() method to achieve the following results.
Conclusion
The previous article has brought you through how to create a basic Facebook application. In future articles, I will start detailing some of the cooler Facebook specific functionality starting with how to integrate a Facebook application into a Facebook page.
