Facebook ActionScript API HOWTO
UPDATE!
This HOWTO is out-of-date. For a more up-to-date example please see this post.
I’ve spent a lot of time in the past few months working on an ActionScript 3 API for Facebook. Being a Flex dev I wanted easy access to the Facebook commands and the existing solutions didn’t fit with how I like to work. It’s no simple thing getting a Facebook app up and rolling so I’ve written a quick tutorial to get people started with my Facebook AS3 API.
The example below is written using Flex, however the API is agnostic; if you want to use it in a CS3 application it is fully compatible and should have no Flex dependencies.
This tutorial assumes that you have already created an application through the Facebook Developer application and have some server space in which to run this application. If you need help creating an application then visit the Facebook Developer site for more information.
This example demonstrates an application that runs inside of the Facebook site ONLY. It will NOT run locally (i.e. in debug mode). If you want to see an example of a hybrid/desktop application that can be tested locally, check out the source code in the API; a more complex example application is included. This example attempts to address most of the things that a normal application would address server-side (app installed checking, etc). Sometimes checking these kinds of things is better BEFORE your .swf is launched (for example in your php code). HOWEVER this demonstration does not do that.
If you would like to see this example application running then please check it out on Facebook: http://www.facebook.com/apps/application.php?id=7572943034
The entire project can be downloaded for your personal reference.
The first step of using the API is to get it. You can either use the compiled .swc file or the un-compiled source. Both of them can be downloaded from Google Code. Likewise you could pull down the SVN repo and use the most up-to-date version of the API. Whichever option you use, please keep in mind that this IS currently alpha software and the usage of any of the objects or commands could change. I’ll try not to do that, but sometimes it’s unavoidable.
If you’ve downloaded the .swc file, simply drop that in your /lib folder (or some other folder that your project scans for .swc files). If you’re using the source then it will need to be linked into your project.
Now let’s start with an empty application that calls an init() function when its created. Also let’s add in a few variables that we’ll need to get started. Your api_key and secret are needed as well as (for this example) the url to either your application’s ‘about’ page or a direct link to install the application.
We are also going to need an instance of the com.pbking.facebook.Facebook object which we will go ahead and make bindable.
<!–[CDATA[
import com.pbking.facebook.Facebook;
[Bindable]–>
The first thing we need to do is to check to make sure the user has added our application.
When a FB Canvas page (which is what we’re using for this example) loads a .swf (with the <fb:swf/> tag) is passes into the .swf a number of flashVars. These flasvars begin with “fb_sig” and will tell us a number of things. The API will hold and use these values, but before we even get started with our Facebook object we have to check one of them to make sure the user has added the app. For this we will look at the value of “fb_sig_added”. If it equals 1 then the user has added the app. 0 (or if it’s missing) and they haven’t.
In this example, if a user hasn’t added our application then we’re going to go to a special state prompting them to install the application. In some situations you may want to go ahead and give this user some functionality. You won’t be able to talk to the Facebook servers in this situation, but you could talk to your own and give them some value and a reason to add your app!
Once we determine that our user has indeed added our application then we will fire up the Facebook object by starting a new widget session (an application embedded in a Facebook page). In addition to starting a widget session we could also start a desktop session (an app on the user’s machine; for example an AIR app) and a website session (an application on a website other than Facebook’s). We’re listening for the COMPLETE event that will be broadcasted by the Facebook object once it has connected (or failed to connect).
private function init():void
{
//first thing, check the fb_sig_added flasVar to see if the app has been added
var flashVars:Object = Application.application.parameters;
var hasAddedApp:Boolean = Number(flashVars.fb_sig_added) == 1;
if(hasAddedApp)
{
facebook = new Facebook();
facebook.addEventListener(Event.COMPLETE, onFacebookSessionStarted);
facebook.startWidgetSession(api_key, secret);
}
else
{
currentState="notAdded";
}
}
. . .
<!–– application not added state ––>
When our function onFacebookSessionStarted() is called we first need to test to make sure we have connected. If we haven’t we’re just going to toss an alert to show why and stop there. You’ll probably want to use some more robust error handling here.
If we are connected we’ll set our state to “ready” (the items in the ready state are shown later) and we’re going to get some information about our user (so it can be displayed on the stage). We will call the facebook.users.getInfo() method to get the info we want about a user. We only want info about our “logged in” user and we only want their name so we will pass those two properties to the function in arrays. Arrays allow us to get multiple properties on multiple users in a single call. A GetUserInfo_delegate is returned from the call to which we will listen for the COMPLETE event. The COMPLETE event will be fired on sucessful and unsucessful calls alike.
This command will automatically populate our user with the info that we have requested.
[Bindable] private var user:FacebookUser;
private function onFacebookSessionStarted(e:Event):void
{
//first we have to test to make sure we connected ok
if(facebook.isConnected)
{
//yay! We’re all connected! Journey forth!
onFacebookReady();
}
else
{
//we didn’t connect like we should have. Alert the user.
Alert.show(facebook.connectionErrorMessage, "Error connecting");
}
}
private function onFacebookReady():void
{
currentState="ready";
//get some of the users info
user = facebook.user;
var d:GetUserInfo_delegate = facebook.users.getInfo([user], [UserFields.name]);
d.addEventListener(Event.COMPLETE, onGotUserInfo);
}
. . .
Our call has completed and we want to make sure it worked. To do this we will grab the delegate from the event and check the .success property.
If our call wasn’t successful we’re going to pass it on to a handleErrorDelegate() function which is just going to toss up an Alert to tell us why it failed. Again more robust error handling would be appropriate here, but doing at least this will let you know what/if something is going wrong.
If our call WAS successful then we’re going to get some MORE information. We want to get a list of all of our user’s friends. To do this we will call the facebook.friends.getFriends() method.
Instead of adding a listener to the delegate that is returned we are going to utilize the callback paramater that is an option on all of the facebook commands. The callback is just a shortcut way to have a method called once a delegate has completed its transaction. It also eliminates the need to remove the callback once the call has completed. Using a callback is the exact same as adding a COMPLETE event listener, it’s just a bit easier.
private function onGotUserInfo(e:Event):void
{
var d:GetUserInfo_delegate = e.target as GetUserInfo_delegate;
d.removeEventListener(Event.COMPLETE, onGotUserInfo);
//check to see if the call was sucessful
if(d.success)
{
//our user’s info has been updated and will show in our bindings
//now let’s get our user’s friends
facebook.friends.getFriends(onGotFriends);
}
else
{
handleErrorDelegate(d);
}
}
private function handleErrorDelegate(d:FacebookDelegate):void
{
//something went wrong. You should plan to handle this error better
//but for now we’re just going to throw up an alert and stop here.
Alert.show(d.errorCode + ":" + d.errorMessage, "Facebook Error . . .");
}
. . .
Now that we have our list of friends (an array of FacebookUser objects) we need to save them in our bindable “myFriends” class variable (so that we can list them) and get some more info about them. We’ll just use the facebook.users.getInfo() command again but this time we’re going to get info on all of our friends. Our friends .name property will be populated once this delegate has completed.
[Bindable] private var myFriends:ArrayCollection;
private function onGotFriends(e:Event):void
{
var d:GetFriends_delegate = e.target as GetFriends_delegate;
if(d.success)
{
//save my list of friends
myFriends = new ArrayCollection(d.friends);
//all we have of the friends right now is a uid
//get some more info on them so we can at least show their name
facebook.users.getInfo(myFriends.source, [UserFields.name], onGotFriendsName);
}
else
{
handleErrorDelegate(d);
}
}
private function onGotFriendsName(e:Event):void
{
var d:GetUserInfo_delegate = e.target as GetUserInfo_delegate;
if(d.success)
{
//we now have all of the user’s friends, and their names
}
else
{
handleErrorDelegate(d);
}
}
. . .
Now we have all kinds of info about our user and their friends. We just need to show it.
A Bunch of MXML goes here . . . rather boring stuff. Check out the example for more details.
. . .
When the friendList selection changes, it calls a selectFriend() method. This method is going to save the selected friend (so that other controlls can bind to it like the picture and about_me box) and populate that friend’s info with stuff we want to show.
[Bindable] private var currentFriend:FacebookUser;
private function selectFriend(friend:FacebookUser):void
{
//this method is called when a user selects a friend from the list
//save the friend.
this.currentFriend = friend;
//grab their info
facebook.users.getInfo([friend], [UserFields.pic_big, UserFields.about_me], onGotFriendInfo);
}
private function onGotFriendInfo(e:Event):void
{
var d:GetUserInfo_delegate = e.target as GetUserInfo_delegate;
if(d.success)
{
//our friends info will update and bind
}
else
{
handleErrorDelegate(d);
}
}
. . .
If you’ve gotten through all of that then you’re just about ready to go. All you’ll need now is a file from which to load your .swf. Our example is going to use a canvas page which will load our .swf via the <fb:swf> FBML tag. Make sure your application is setup to use a canvas (not an iFrame) and create a .php (or .asp or whatever) page that has something like the following:
Put both that page and your application.swf on your webserver and set your application callback (found in your application’s settings page in the developer section) to that file.
And you should have yourself a running application!
Obviously there is a LOT more you can do with the information that you can get from Facebook and a LOT better ways of displaying this information. Hopefully this will get you started using the Facebook ActionScript API. If you have questions or problems with this tutorial or API then please don’t hesitate to contact me.
Hey Jason,
Thanks for making this API. – Very cool. – I have a quick question for you. – When I try compiling your example locally (with all my keys switched out for me, etc.) – I get two errors: (1) Type was not found or was not a compile-time constant: FacebookDelegate. – line 121 and (2) Type was not found or was not a compile-time constant: FacebookUser. – line 160 – Is this because it can’t be debugged locally? – I tried changing your facebook.startWidgetSession(api_key, secret); to startDesktopSession to see if that would fix it – but it doesn’t. – Am I missing something obvious?
Thanks in advance!
- Chris
The FacebookDelegate and FacebookUser classes should be included both in the compiled .swc and in the source. First ensure that you have the .swc correctly installed (or the source correctly mapped). When in doubt use the source files.
If you’re still having problems getting your project to work then zip it up and email it to me and I’ll be happy to see if I can tell what’s wrong.
pgking,
Thanks for the quick reply. – You were right. I hadn’t pathed to the .swc correctly. – I had just placed it in the correct location but didn’t add it through the “library” tab in the properties menu. – It compiles perfectly now… – Now I just need to craft a believable PHP file. :-)
- C
Hi Jason, ur tutorial has left many holes.
I have added the developer app in Facebook I have a secret and a key but cannot submit ( need more than 5 users).
Now mwhen I run the app in flex and click on add app lication button ……. it asks for the addAppURL,
could u elaborate more on that and how to test the app locally on flex?
One more thing you mention that the api is not flex Dependant but in flash in your
HashableArrayCollection class it extends the ArrayCollcetion class which is flex specific, how can I bypass this to test your api in flash CS3
Jason,
I tried using your example to start off my own facebook app, thanks for putting it together. I do have a question though. When I put in my own api_key, secret and addAppURL (http://www.facebook.com/add.php?api_key=****), I get a endless loop of “you must first add this app before you use it”. Could you tell me what your application settings are in facebook? I think that’s where I’m getting confused.
My current setting for callback URL is: http://localhost/Facebook_API_Example/bin/Facebook_API_Example.html
Post Add URL: http://apps.facebook.com/appName
Thanks,
- N
It’s been brought to my attention that since I’m using the ArrayCollection class the API isn’t currently usable in Flash CS3. I started using that class after I had made my initial CS3 tests. I’ll be fixing this (and many other things) shortly in a new release.
For a more detailed example (and one to see how to test your application locally in “desktop” mode) see the example file in the API source.
Hi Jason,
Thanks for the api and tutorial. Could you add a zipped up copy of the complete tutorial file?
Thanks,
Ed
Sorry, didn’t see the link you already made!
Just passing through, and wishing to point out that the rpc package (missing from CS3) may give some trouble … you might find this useful:
http://cs3as3rpc.riaforge.org/
It’s a replacement for the rpc classes Adobe helpfully removed from the CS3 release of Flash.
Hi Jason,
Thanks for the API, but I would like to use this in CS3. When will the API be usable again for CS3?
Thanks!
I’m working on the CS3 modifications right now. I’ve got just about everything worked out except for the reading of FlashVars. Flex and Flash handle it differently so I’m trying to work out a way that can be common for both. Once that is done the CS3 compatable version will be out. Hopefully in the next couple of days.
Thanks for that! I appreciate it and looking forward to working with it.
I just thought I would drop a line here for anyone who is watching that the API has been recently updated to version 0.7.7. The source (via .zip as well as SVN) is available as is a precompiled .swc file.
I’ve got an instance of the library compiling in Flash CS3 though I’m not actually doing anything with it yet. A more detailed example should be coming soon, but if any of you come up with one PLEASE let me know; I would LOVE the help! Thanks for your patience all you Flash Hackers!
By the way, the example in this blog entry is STILL using the 0.7 version of the API which DOES have some differences. Please see the example that’s actually IN the API for the most up-to-date usage.
Thanks Jason! I’ll try to come up with an example..
Very Nice! Thanks!
Hi pbking but the swc file not loaded in Components window in Flash CS3 ? :( HELP Me …
Hi, I’m trying to make a leaderboard swf file to which I need to pass the profile pics and names etc. I get the picture URLs through ur API (or even by just passing it as flashvars). But I can’t seem to load the images from the facebook servers. It gives me a security sandbox violation msg when I try to load the picture URLs. But I’ve seen facebook flash games with leaderboards also made in flash showing the pictures etc. Any clues???
I was trying to use your example, but for some reason it will work the part of the connection but it wont the adquiring users and forward, this also happens on your already installed app, can you help me thanks.
how to get the friend’s mobile number and other number through this API.
I downloaded all the files and i’m using the un-compiled source. not the swc file.
i’m having trouble with the example files.
i already have my app in facebook and i’m trying to load this swf file in there but its not reading the flashvars as i need them.
how do you post a swf file in FBML and give it the flashvars you need for this swf file?
also, have you thought about doing a pure AS3 example of this?
i’d be interested in helping with taht if i could get my app working in the first place. jeje.
thanks!
i think i need to specify. i saw the example html file you gave in the files. I’m trying to replicate the same in the index.php file, but it’s not working so far. when i try to use a html file i get the “static error not found” or something like that.
also i’m tracing the flashvars given by facebook and i get the names alright but they are empty. or they are just strings with the name of the var and thats it. i don’t know. it’s weird.
CheerS!
I’ve seen that the notifications.sendEmail is not implemented.
any plans to add this functionality?
thanks
Hi,
I am not able to change api_key and secrete key for this application. Can any one help me to test this application with our own api_key and secrete key.
one more question Can we change
facebook.startJSBridgeSession() to facebook.startDesktopSession() and test this app?
please let me know any one knows ans for above queries.
Many thanks
eduser
Can any one help me to run this example successfully?
I tried to run both zip file and other way to copy all the code from this page and run app, but no luck.
1. downloaded zip file from above link and run. Getting always “api_key” is not valid.
When I hard coded my app_key and secrete key then it’s asking session and other parameters for startJSBridgeSession();
2. I created one more project and copied all above code and run. This time just going to init() method and displaying emptyTextArea. I used DesktopSession.
Please let me know any clear document to run this example and use this API.
Waiting for positive response ASAP.
Thanks
eduser
Jason,
Great work mate! I just created a simple app using it. Works great! Question: What about the api key and secret being embedded in the swf file? The swf can be reverse engineered? Any ideas how to deal with this issue ?
Thanks
uhhh…
Hi people
As a fresh pbking.com user i only wanted to say hi to everyone else who uses this site 8-)
Hi Jason,
Im stock with startWidgetSession(api_key, secret); // take me to this Error Incorrect numbre or Argument,,
Please can u help me, what is missing==
Thanx!!
Hi pbking,
I am using your application.It’s working for desktop session.But how to use that for WEB session to include as facebook app.
Will you please suggest any clue points on this?
Chanaka Thanx….
New to the blog & api – great resource!
I’ve gotten through day one of getting things to work as a Flex desktop-mode app in debug, but I’m having trouble getting it to actually launch from Facebook.
Specifically, I’m not sure what to do with the “Canvas Page URL”
Can anyone point me in the right direction?
Hey ppl, i’ve low pbking.com when i searched google
for a humane and salutary forum, and i inconsistent to what’s what here)
if you deem my english bad… so be it, i’m justifiable learning
Hi,
Thanks for posting the documentation and code. I’ve been trying to run the sample but the event listener never seems to fire.
As in the line:
facebook.addEventListener(Event.COMPLETE, onFacebookSessionStarted);
onFacebookSessionStarted() never gets fired even after we’ve logged into facebook and closed the browser window.
Any suggestions/ideas?
Thanks!
-Dan
Once the browser window is closed you have to “validate” the session by calling the facebook.validateDesktop() method ONLY AFTER the user has logged in. There is no way to do this validation automatically (except using AIR and an internal HTML browser window).
Hello.
I’m new there
Nice forum!
hello.
i cannot get an air application to work. can you give me a small sample code to start this? i am getting like hundreds of errors like “type not found, CloseEvent” in which is obviously included .. i need help fast cause i have a sweet idea for an app!
http://facebook-actionscript-api.googlecode.com/svn/examples/air/
That is an example of using the API with AIR. It’s not secure (the secret must be compiled in) but it does work.
-JC
Новый способ давления на кандидата на пост Главы г. Химки
Новый способ “наказать” тех, кто посмел участвовать в выборной кампании не на стороне действующей власти изобрели правоохранительные органы г.о. Химки.
Руководствуясь не нормой закона, а чьей-то “волей” сотрудники милиции решили “проверить” все фирмы, внесшие денежные средства в избирательный фонд неудобных кандидатов.
Начались “проверки” с телефонных звонков – где директор, сколько человек работает на фирме. После чего последовали “письма счастья” с просьбой предоставить всю бухгалтерскую документацию, учредительные документы фирмы, и даже, план экспликации БТИ.
Такие запросы химкинским фирмам рассылает 1 отдел Оперативно-розыскной части № 9 Управления по налоговым преступлениям ГУВД Московской области за подписью начальника подполковника милиции Д.В. Языкова.
И всё это в то время, когда Президент дал прямое указание правоохранительным органам о прекращении всех незаконных проверок малого и среднего бизнеса. С это целью внесены изменения в Федеральный закон “О милиции” – из статьи 11 этого закона исключены пункты 25 и 35, на основании которых ранее правоохранительные органы имели право проверять финансово-хозяйственную деятельность предприятий.
Видно, об изменениях действующего законодательства местные правоохранительные органы не уведомлены. И не смотрят телепередачи с выступлениями Президента.
Может быть, эта публикация подвигнет их к исполнению указаний Президента, а также к изучению и соблюдению действующего законодательства
Hey… sorry for my english, where I can download XRumer 5.0 Palladium FOR FREE??? Thanks!!!
It’s perfect software for promo and SEO, but cant find any crack for it((
cracked XRumer 2.9 and XRumer 3.0 are too old, Im need FRESH!
глянцевые натяжные потолки
very intresting
Hi, I really need to get out of this problem, because I don’t understand…..I’m using the method “startWidgetSession” but using the session secret passed when i use the fbml:swf tag. But then when I get connected my app returns me the error 104 “Incorrect signature”?? Why??
And when I use the secret key parameter in the startWidgetSession function, everything goes nice!…and theres no problem….
Is it possible to have source code of this application because I want to make an application facebook with Flash and I don’t arrive to have source like this.
Please help !
Thanks
Hi, I don’t know if you are still looking at this blog post. In case you are: I found your tutorial very helpful and I have one more thing that I need a bit of help with. My Flash Facebook app is working great and now I just want it to talk to my server in order to keep track of the user’s state in my DB, for example when the user gets a new digital item, I want to record that for posterity in the DB.
In order to make sure that people do not mess with the system by sending all sorts of weird calls to my server, I want to share the user’s authenticated Facebook session with my server and then use it and my API_KEY to determine the correct user using a server-side Facebook API.
My problem is that I don’t know how to share the session data with the server when I am in Flash. When I made HTML/javascript based Facebook apps, the session data was passed seamlessly to the server when I POSTed to the server using AJAX calls. I would like to get this sort of behavior with Flash. I use the following code to make my requests:
public static function SendData(url:String, variables:URLVariables, callBack){
var request:URLRequest = new URLRequest(url);
request.method = URLRequestMethod.POST;
request.data = variables;
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
loader.addEventListener(Event.COMPLETE, callBack);
loader.load(request);
}
Can I pass something in? Any help would be much appreciated.
Thanks!!!
Hi guys,
My PC worked not correctly, too much mistakes and buggs. Please, help me to fix buggs on my computer.
My operation system is Win Vista.
With best regards,
nicbervehorce
Hi All,
I am not able to download the source file of the face_book_API_example_project.zip.
Please let me know the problem or where can i get this source.
Not Found
The requested URL /projects/facebook-api/example/Facebook_API_Example_Project.zip was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
I want to get all friends user id , and album in flex . can any one help me?
Появилась новая интересная фича, называется <a href=http://dnevnik.bigmir.net/article/945091 с помощью камеры мобильного просветить одежду!
Читал о подобных разработках ранее.
Сегодня нашол интересное приложение для телефона. мобильный сканер> загружаешь на аппарат с камерой, наводишь на девушку всинтетической одежды и получаете девушку без одежды.
Революционная программа для мобильного телефона.
мобильный сканер
просветить одежду
Посмотри что они скрывают под своей синтетической одеждой.!!!
мобильный сканер
просветить одежду
то доступно всем, нужно иметь только телефон с камерой.!!!
мобильный сканер
просветить одежду
мобильный сканер
просветить одежду</url
мобильный сканер<
просветить одежду
А вот еще у них как бонус идет мобильный рентген, это тоже клевая штука. Показывает весь скелет человека)))
мобильный сканер
просветить одежду
Hi,
I am facing a problem in following code. I want my application and login screen should open in same browser window. Using this code It always opens in new window. Will anybody please tell me how to achieve it?
Again the code in if/else block in the function Init() never gets executed. It directly goes to session.login() and opens new window.
Please help me.
public function Init():void
{
session = new FacebookSessionUtil(“MY_API_KEY”,”MY_SECRET_KEY”,loaderInfo);
session.addEventListener(FacebookEvent.CONNECT, handle_Connect);
fbook=session.facebook;
trace(“initial login”);
if(loaderInfo.parameters.fb_sig_added == true)
{
session.verifySession();
}
else if(loaderInfo.parameters.fb_sig_added == false)
{
navigateToURL(new URLRequest(“http://www.facebook.com/login.php?api_key=” +loaderInfo.parameters.fb_sig_api_key), “_top”);
}
else{
session.login();
onConfirmLogin();
}
}
public function handle_Connect(event:FacebookEvent):void
{
trace(“handle_Connect”);
var call1:FacebookCall = fbook.post(new GetInfo([fbook.uid],[GetInfoFieldValues.ALL_VALUES]));
call1.addEventListener(FacebookEvent.COMPLETE,handle_getinfoComplete);
}
public function onConfirmLogin():void
{
trace(“onConfirmLogin”);
session.validateLogin();
}
public function handle_getinfoComplete(event:FacebookEvent):void
{
trace(“handle_getinfoComplete”);
user=(event.data as GetInfoData).userCollection.getItemAt(0) as FacebookUser;
if( user == null )
{
trace(“handle_getinfoComplete,onConfirmLogin”);
onConfirmLogin();
}
else
{
trace(“hi”,user.first_name+” “+user.last_name);
StartGame();
}
}
I have issue regarding facebook actionscript api.
i am not able to get response from facebook.com at the time of login.
i want to allow publish permission after login.
can anybody have any idea?