Facebook ActionScript API - Creating a Canvas/Project

In my last post, I talked about some prerequisites and things you might want to think about before integrating a Flash app using the ActionScript API. Now let's take a look at how to configure a Facebook canvas and get your local project set up.

The first thing you need to do to get started is to add the Facebook developer application by going to www.facebook.com/developers. This is just a Facebook application that allows you to register your application.


Once you've allowed access to the Facebook developer application, it's time to create your application and canvas. Give it a name and agree to the terms.


Once you've created your application, go in to Edit Application and you'll see that Facebook created an API Key and Secret for you. We'll talk about those later, but remember that you never want to give out your Application Key and Secret for security reasons. When the app is deployed we will be using a session-specific key created for us by Facebook when making our API calls, but during testing, we can use these codes to perform the calls locally.



Now we need to set up our Facebook Canvas. First in the box for the Canvas Page URL, give it the name you want your application to have on Facebook (apps.facebook.com/[yourappname]) in all lowercase. Then set the Callback URL... this is the path to YOUR server where the swf will be located. (It should be contained within an HTML wrapper page that we'll get from Adobe). We will be creating an IFrame application - in other words the page on our site will be "sucked into" an IFrame on our Facebook canvas page.


When we release, our application type will be Web, but for coding/testing/debugging purposes, make the application type Desktop, so we can just pop up a window to allow access, and test our Facebook API calls locally.


Now we need to download a few files from Adobe to set up our application in Flex (0r Flash).
First, get the Facebook-ActionScript-API from Google Code (http://code.google.com/p/facebook-actionscript-api/downloads/list).



Then get the iframe wrapper from http://download.macromedia.com/pub/developer/flexfb_iframe_wrapper.zip . After you unzip the file, you'll see it contains an html wrapper page for your swf, plus swfobject.js. We'll look later at what this html wrapper page does.


Now we need to go ahead and create our project in Flex Builder, make sure it's a web application.


In the libs folder, go ahead and add the Facebook library you downloaded from Google Code.


...Now you're all set to start development on your Facebook Flash application. That's a lot for one blog post, so next time we'll take a look at really Grok-ing how and where everything goes, as well as looking at other Flash-Facebook architectures as well. (A much more in-depth walk through is available on the Adobe devnet site).