Class 11 – Brief Intro to Facebook Application Development

Posted: May 2nd, 2009 | Author: amos | Filed under: facebook | Tags: class 11 | No Comments »

As we saw in class today, Facebook Application development is not very much different from the sort of XHTML, CSS, PHP, and MySQL development we have been covering in class.

The main difference is that in addition to data that you store and retrieve from your own database, you have access to “social graph data” that comes from the Facebook Platform.

Here is the link to the official documentation for building Facebook Apps at http://developers.facebook.com

Application setup

To initially set up an application on Facebook, you’ll need to go to your personalized developer home page at http://facebook.com/developers.  There you need to click the “Set Up New Application” button, which will bring you to a page where you fill in a few details about your application.

The most important two bits of information that you need to fill in are your application’s “canvas URL”, and the “callback URL”.

Canvas URL

The term “canvas URL” refers to the URL that your application will have on the facebook site.  For example, http://apps.facebook.com/webdevspring/

Callback URL

The term “callback URL” refers to the actual location of your application if you were to access it directly in the browser.  For example, http://onepotcooking.com/examples/class11/facebook/.  However, users will not ever actually go to this page directly in their browser.  Instead, they will view your application as if it were on the Facebook site itself at the canvas URL.

When a user loads the canvas URL in their browser, Facebook serves as a sort of proxy.  Behind the scenes, Facebook loads the page from your callback URL, parses the code that it finds there and replaces any FBML it finds in that code with its XHTML equivalent.  Then it places the result of that parsing process into the main section of the Facebook page template.  So your page looks like it is hosted on the Facebook site, although you and I know that it is on our own server.

API Key & Secret

Once you have filled in all the required fields for the Application setup, Facebook will show a page that has your new application’s API Key and Application Secret.

These two bits of information are used for authentication, and are necessary for allowing your application’s code to make requests to Facebook’s Platform server.

You will need to use these two encoded strings to make a secure connection to Facebook’s servers on every page where your code interacts with the Facebook Platform.

FBML

Facebook’s proprietary markup language, FBML, is a subset of XML, like XHTML.  From the prefix, “fb:” that is prepended to every FBML tag, you should recognize that the tag names use their own XML namespace.

One of the reasons Facebook  created FBML is to make it easy for independent developers to place users’ photos and first and last names, and other bits of “social data” on a page, without Facebook having to give any random developer access to the database where that data is actually stored.  Giving independent developer’s database access would obviously be bad for security and performance of their site.

As an example of a typical use of FBML, to place a user’s profile photo on one of your application pages, you would use FBML like this somewhere embedded in your XHTML:

<fb:profile-pic uid=”112233″ size=”square” />

When Facebook parses the code from your callback URL, it will see that you are using FBML code, and it will replace this bit of code with the profile photo of user #112233, assuming there is such a user.

So when a user views the source code of any Facebook Application page, they will not see the FBML code – it will be parsed and removed by the Facebook server.

Facebook PHP Client

To get your code talking to the Facebook Platform, you will need to download the Facebook PHP Client Library, which is an object-oriented set of classes that provide some easy-to-use methods and properties for accessing Facebook user data, and some other common tasks that relate to your application interacting with their site.

You will need to include the Facebook PHP Client Library into your scripts by using the same require_once() function that we have been using to include our own files into our scripts.

Our example page

Let’s go line by line through a very simple application page that will display the profile photos of the logged-in user’s list of friends.
The first command just includes the Facebook PHP Client Library.

//include the Facebook API Client
require_once("facebook_client/facebook.php");

The next few lines set up our basic communication channel with the Facebook Platform, using the API Key and Application Secret that we got when we set up the application on Facebook.

You will recognize that we are creating an object from the Facebook class that is defined in the Facebook PHP Client we downloaded and include in this script.

//when we set up a new application on Facebook, they give us an API Key and API Secret for this app
//these will be different for each app
//we store them in variables and use these to set up communication with the Facebook API
$fb_api_key = "5a8c964c7f38f6aa53035f91133321d5";
$fb_api_secret = "00d997c03f7d342906b3aaa5da7956e5";

//INSTANTIATE FB API
//this creates a Facebook object, which we call $FB
//you can see that we are passing the API Key and Application Secret as required parameters to the Facebook class's constructor function
//this essentially authenticates a connection to the Facebook Platform and allows us to communicate with it in code
$FB = new Facebook($fb_api_key, $fb_api_secret);

So now we have an object called $FB, which is a Facebook object.  This object has all the properties and methods that Facebook has defined in their Facebook class definition.

One of those methods of the Facebook object is a method that requires the current user to be actually logged-in to the Facebook site.  We run that to make sure that user’s are logged in.

//REQUIRE USER TO BE LOGGED IN
$FB->require_login();

Then, we call a built-in method of the Facebook object that returns an array of all the user ids of the current user’s friends.  We store that array of friends’ ids in a variable called $arrFriendIds.

//GET A LIST OF THIS USER'S FRIENDS
$arrFriendIds = $FB->api_client->friends_get();

If you wanted to see the raw data that is contained within the Facebook object, you could, of course, use print_r() to output the contents of the $FB object.

//print_r($arrFriendIds);

In our example, we then use the data we have gathered from the $FB object and dislpay it using XHTMl and FBML:

<div class="container">
  <h1>Welcome, <fb:name uid="<?= $FB->user ?>" useyou="false" /></h1>
  <p>Here are your friends</p>
  <div id="friend_container">
    <?php foreach ($arrFriendIds as $friendId) : ?>
      <fb:profile-pic uid="<?= $friendId ?>" size="square" />  
    <?php endforeach ?>
  </div>
</div>

The Facebook property, $FB->user always holds the user id of the current user.  You can see that I have highlighted PHP code in green, and FBML code in red, to easily identify how each is being used in this simple example.
Notice that this XHTML & FBML code is just a code “snippet”, not a full XHTML document.  This is because Facebook will take this code and stick it inside their own XHTML document, so we should not redefine the <head>, <body>, or other basic tags that they will be creating for us on the page that shows our application.
We wrap the XHTML & FBML snippet inside of a div with id=”container”, just as we would on any other web page for the same reasons: this makes our part of the page easier to style and the layout easier to manage.

Conclusion

Obviously, this is just the beginning of developing for Facebook.  The interesting part of developing applications occurs when you combine the data that Facebook gives you through its Platform APIs with the user-generated content that you store in your own database.

For example, you could port your blog assignments to become Facebook applications by changing your code so that every time a user makes a post, you are storing the post along with their Facebook user id, found in the $FB->user property, not the user id that you automatically assigned to users when you made your stand-along blog site.

You would not have to perform any user authentication (i.e. registration or login), since Facebook would do all that for you when a user signs up for their site, so you would not need a “users” table at all in your database.  All user information is obtained through the Facebook Platform, and your database just stores everything else except that.

As another example, our earlier homemade social network example would be totally redundant if you ported it over to Facebook, since all “friend” information for Facebook apps is handled by the Facebook Platform, not by your own code.  So you wouldn’t have to keep track in your database of who is friends with whom.  You could leave those tasks to Facebook and concentrate on building out more interesting and compelling functionality on top of that.

You will be surprised at how many apps are just glorified message boards that store data in much the same way as some of your previous assignments.

For further reading, I recommend exploring the documentation linked to from the “Get Started” section of the Facebook Developers site.

Related posts:

1. Class 11 – Intro to Privacy on the Web

---