Vinod_danims Blog

Since the public release of the Facebook API there has been a huge rush of developers building Facebook applications. There are official PHP and Java libraries available via the developer resources pages, but no official ActionScript library as of this writing. Tim Whitman has created a great (unofficial) ActionScript 2 library for people developing in Flash.

If you are looking to create a Flex application that connects to Facebook, the AS2 library won’t help much since Flex is based on ActionScript 3.

Luckily there has been some great work by a few ActionScript developers on Facebook. This tutorial demonstrates how to get up and running using Jason Crist’s AS3 Facebook Library.

The application you will build in this tutorial will simply list all of your Facebook albums inside a Flex component. This should be enough to get you started and give you a taste of how to connect to the Facebook API.

Step 1: Add the Facebook Developer Application

The first thing you need to do is add the Facebook Developer Application. Once you add this application to your Facebook profile you will be able to create new applications and access other developer resources.

Step 2: Apply for a Facebook API Key

After adding the Developer application, click on the “Create one” link to create a new application.

Type in your application name and click the agree box if you accept the terms and conditions. Under the Optional Fields tab, you need to set the callback URL. This will normally point to a file on your web server, but for this simple demo we can put “http://example.com/”.

When you click submit you will see a new application listed:

Take note of the API key and secret key. You will need to put these strings into your Flex code shortly.

3. Download the Library

Visit the Facebook ActionScript API Google Code Project, then click on Downloads and download the “facebook_as3_api_v0.1.zip” file.

Thanks to Jason Crist of Terralever for providing this library to the development community.

Create a new “FacebookTest” folder on your desktop and extract the “com” folder of the ZIP file there.

4. Create The Flex Application

Start Flex Builder and create a new Flex project called “FacebookTest”. Don’t name your MXML file Facebook.mxml as it will conflict with classes in the library.

Set the path to the “FacebookTest” folder you created on the desktop.

Notice the com folder is in the project from when you extracted it earlier.

Paste this code into your MXML file:

< ?xml version="1.0" encoding="utf-8"?>
<mx :Application  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
	</mx><mx :Script>
		< ![CDATA[
			import com.terralever.facebook.Facebook;
			import com.terralever.facebook.data.photos.FacebookAlbum;
			import com.terralever.facebook.delegates.photos.GetAlbums_delegate;

			[Bindable] private var facebook:Facebook;
			[Bindable] private var photoAlbums:Array;

			private var api_key:String = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
			private var secret:String  = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

			private function init():void {
				facebook = new Facebook();
				facebook.addEventListener("ready", onFacebookReady);
				facebook.startDesktopSession(api_key, secret);
			}

			private function onFacebookReady(event:Event):void {
				showAlbumsButton.enabled = true;
			}

			private function getAlbumsReply(event:Event):void {
				var delegate:GetAlbums_delegate = event.target as GetAlbums_delegate;
				photoAlbums = delegate.albums;
			}

			private function getAlbums():void {
				facebook.photos_getAlbums(facebook.user, getAlbumsReply);
			}
		]]>
	</mx>

<mx :Button x="10" y="10" label="Start using Facebook API" click="facebook.validateDesktopSession();" id="startButton" width="166"/>

<mx  ataGrid x="10" y="87" dataProvider="{photoAlbums}" width="166" height="170">
	</mx><mx :columns>
		<mx  ataGridColumn headerText="Album Name" dataField="name"/>
	</mx>

<mx :Button x="10" y="40" label="Show Albums" id="showAlbumsButton" click="getAlbums()" enabled="false"  width="166"/>

<pre>

Replace the API and secret key with the keys specific to your own Facebook application.

5. Testing

To make sure that everything is working properly follow these directions:

1. Run the application
2. Sign in when the Facebook window pops up
3. Close the Facebook window after sign up
4. Click “Start Facebook Application”
5. Click “Show Albums”
6. View the listing of your Facebook photo albums

6. Conclusion

Since an SWF can be decompiled and your secret key exposed, this is not the recommended way to build an application for public use. This example is meant for personal testing and to get an idea of the basics of creating a Flex-based Facebook application.

Download the code for this tutorial – Facebook-Flex-Example-1.zip (30KB).

Hopefully you found this tutorial to be a quick and easy way to get a Flex application connecting to the Facebook API. If you have any problems or questions please leave a comment below.