Hybrid Hacking

Subscribe

 

Hybrid Hacking provides tutorials on how to integrate with some of today's hottest web services.

 

 

Hybrid Hacking

 

Links

RIApedia
Ryan Stewart
AllFacebook
TechCrunch

 BlogTutorialsAbout 

Building Facebook Applications with Flex

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:

Building Facebook Applications with Flex

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: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:Script>

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

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

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

</mx:Application>

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

5. Testing

Sample Facebook Flex ApplicationTo 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.

Comments

Hey there, after following all your steps in Flex Builder 3. I paste the code and get this error:

Severity and Description Path Resource Location Creation Time Id
1046: Type was not found or was not a compile-time constant: Facebook. FbAPI/src FbAPI.mxml line 9 1191938952421 146

That line is: [Bindable] private var facebook:Facebook;
This also happens here, facebook = new Facebook();
and here, var delegate:GetAlbums_delegate = event.target as GetAlbums_delegate;

Any clue what's going on?

Fixed that. This tut doesn't really work 100% with Flex Builder 3. The "com" folder needs to be inside the "src" folder generated by Flex. That's the tip I have there.

Second question: I keep getting a Error 100 from Facebook. Even though my APIkey and secret are correct, it says missing/not supplied parameters. Essentially this means nothing works. The app brings up a browser window and I enter my user/password... but after that nothing works.

Question: How to load this application from facebook profile? Can you show the settings? Thanks.

Hi is there anywhere that this api of Jason Crist of Terralever has been explained for better understanding of how to use it or any tips on how to learn the api.

thanks

Thanks, Jason Crist
At last I found this article... I didn't found how to use at google code..

Thanks for the exposure!

I just wanted to drop a note to say that I've made a lot of progress on the Facebook AS3 API since this was posted. I'm up to version 0.7 and there is a LOT more functionality. I've created a tutorial on how to use the API as well as the new features.

Please don't hesitate to contact me if you have any questions or problems.

i have a question. i want to test this application on facebook but i cant seem to test it. how does one test their own application. its driving me nuts :(

Excellent article. Really good resource for those learning to use flex in building facebook apps!

Alex

keep "com" folder in your flex builder application..
thank you..

Is there any reason for the change from:

com.terralever.facebook.

to

com.pbking.facebook ?

Just curious...

-R

how to get the friend's mobile number and other number through this API.

Hi,

I am trying to run this tutorial but getting following errors. I did same thing as mentioned in above steps but no luck.
As Mike said I kept "com" folder inside "Src" folder but still getting errors.
Errors:
1. Severity and Description Path Resource Location Creation Time Id
1046: Type was not found or was not a compile-time constant: Facebook. FacebookTest/src FacebookTest.mxml line 9 1220537778785 292

2. Severity and Description Path Resource Location Creation Time Id
1046: Type was not found or was not a compile-time constant: GetAlbums_delegate. FacebookTest/src FacebookTest.mxml line 26 1220537778788 294

Can any one help me to make it work.

Many Thanks
ed

Hello, i have this error : "error_code":104,"error_msg":"Incorrect signature".

How can i solve that?

I managed to get it working using this code and version 0.9.2 of the API:

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


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

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

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

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

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

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


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

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

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

</mx:Application>

Note the application needs to be a desktop application for this to work.

The desktop session is deprecated according to Facebook. It is supposed this code is not working anymore....

I am getting an Incorrect signature as well as some readers. I know that developer session has been deprecated. How can I solve this?

thanks in advance

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/".

mpcoc

how to upload this to facebook

What would be the proper technique to store your api_key and secret such that it can still be passed to FB, but not be read from decompiling the application?

Thanks!

Thanks for this! Great help!

I would like to know how I can create a facebook app with flex but do not require a pop-up login windows (i.e. like any ordinary facebook apps that only requires you to authorize at your first time use)

Thank you very much!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
2 + 1 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
 

Copyright © 2007