|Read more about this book|
(For more resources on this subject, see here.)
All third-party systems that work with data from Facebook do so through the Facebook API, which is a combination of REST-style techniques, OAuth 2.0, and an ever-evolving combination of web technologies, collectively titled by Facebook as the Graph API.
You might think, having looked at the SDKs officially listed by Facebook in their developer portal, that you'd need to build a code library yourself but luckily for us, there's already an existing, officially supported, ActionScript 3 library for working with the Graph API. This library, the Facebook ActionScript 3 SDK, is supported by both Adobe and Facebook, so you can be assured that it will be kept up-to-date and fully functional, even if there is a significant overhaul of the Facebook APIs—after all, who better to support this SDK than Adobe and Facebook themselves?
There's no sense in recreating the wheel, as they say, so the examples in this article will be using the existing Facebook ActionScript 3 SDK almost exclusively for its recipes. We'll also be using the Flex SDK 4.0 for our examples, as it's a quick and easy way to construct user interfaces and put together working prototypes for our recipes. However, using Flex isn't a requirement for the Facebook ActionScript 3 SDK to work—it's just for the examples in this article. Integrating the Facebook SDK with a normal ActionScript-only project or a Flash Professional-based project is entirely possible—it will just inevitably require a little more time creating the interface, but the ActionScript 3 code behind it all will work pretty much the same.
Setting up a new application on Facebook
To access the full range of data available from the Facebook API, you need an API key, and for that, you need to set up an application on Facebook itself. To do this you need to set up an account on Facebook, and use that account to join the Facebook developer program.
As well as giving you the ability to use more features of the API, setting up your Flash project as an application and promoting it through Facebook greatly improves the chance that users will discover your application organically through the social network. For example, status updates created by your application will all link back to the application's Fan Page.
In this section, we're going to go through the necessary steps to register a new application on Facebook, and what we actually need is the API Key, Application ID, and an Application Secret for Flash.
You can set up your application as soon as you're registered as a developer with Facebook. To register as a developer you first need a Facebook profile. You've probably already got one, but you'll probably want to create at least one other Facebook account for development or testing purposes. I'm sure your existing Facebook friends won't appreciate a wave of "test message" spam in the near future.
Once you've logged in with the Facebook account you want to use for development, go to URL: http://www.facebook.com/developers/ to add the Facebook Developer application to your profile.
From the Facebook Developer center you can see the latest news from the Facebook developer blog, as well as useful links for developers (Documentation, Privacy Polices, Rules, and so on).
Click on the link + Set Up New App or go to the following website address: http://www.facebook.com/developers/createapp.php to start the application setup process.
How to do it...
If you just want to get up and run as fast as possible, the minimal amount of data that's needed to register a new application is its name.
Your application name does not need to be unique—even for yourself. It's acceptable to name two (or more!) of your applications exactly the same, as Facebook assigns every application its own unique Application ID. Good thing to, really—otherwise all the good names would likely be taken in a frantic bout of application name-squatting.
There's far more information you can add, such as application icons, description, contact e-mail addresses, and support URLs—all pretty simple stuff, and you can always return to the settings screen to change or update things later on.
Once you've entered your application name (and any other information you wish) save your changes and you'll get a screen containing the following information:
Now that we've got ourselves an API Key, we can start using it in requests to the Facebook Graph API. We'll also need the Application ID, so make a note of that, but the Application Secret is something we don't actually need for any of the recipes covered in this article.
How it works...
All applications that integrate with Facebook aren't actually part of Facebook; they're an external application, and that's true for every third-party application that you might have seen appear within the Facebook interface (these are known as Canvas or Tab applications, depending on whether they're on their own page, or a Tab on another page). Technically, they are external websites that are loaded into the Facebook interface using an iframe element in HTML.
Without the API Key an application can't do anything other than retrieve the information that is publicly available. All other actions—such as requesting news feeds or publishing information to Facebook—require the end user to give your application the explicit permission to perform that action, with the API Key being what the Graph API relies upon when generating access tokens and authorizing requests.
Our application can request new permissions at any point, and similarly the end user can modify or reject our application permissions at any point, so generating an access token and passing it in all data requests is an easy way for Facebook to maintain the user's control over their data access.
To get a broader overview of the settings that can be changed for a Facebook application, the best place to look is the Developer Documentation, which is available online on the Facebook Developer center: http://developers.facebook.com/docs/.
There's no single page which gives a description of the settings, but rather the information is distributed around the pages where it's actually relevant.
When we set up an application on Facebook, it also sets up a Profile Page specifically for that application—similar to a Facebook page (but not exactly the same)—and devoted to our new application.
Downloading the Facebook ActionScript 3 SDK
There are two ways to get the source code for the Facebook ActionScript SDK—one is simply download a precompiled version of the source code, and for that all you need is an Internet connection.
The other way to obtain the source code is to download the very latest version directly from a source control repository.
There are in fact two main versions of the Facebook ActionScript 3 SDK. One is the 'Official' version of the SDK, hosted in a Subversion repository on Google code, maintained and updated by teams associated with Adobe and Facebook; and the other is more of a community-driven effort, stored in a Git repository and hosted on GitHub.
In this recipe and all of the recipes in this article, we will be working with a branch of the community-driven version of the Facebook ActionScript 3 SDK, rather than the 'Official' version of the SDK.
To download the SDK from Git, we need to have Git installed on your computer, which can be downloaded and installed from the URL: http://git-scm.com/.
How to do it...
- If you have no desire to work with code which includes version-control information, both the precompiled SWC files and the raw ActionScript source code for the Facebook ActionScript 3 SDK can be downloaded from the following URLs:
- Within the pages at these URLs, select the Downloads button that appears in the top-left of the page, and you'll get popup containing the download options:
- To download the raw ActionScript files, select the Download .zip option—listed under the DOWNLOAD SOURCE heading—or to download the precompiled SWC file, select the Facebook Web SDK.swc (or the Facebook Desktop SDK.swc) file—listed under the DOWNLOAD PACKAGES heading.
- Alternatively, if you have Git installed, you can clone the entire repository, including its past history and references to its original source location, with the following command-line statement:
git clone firstname.lastname@example.org:psyked/facebook-actionscript-api.git
git clone email@example.com:psyked/facebook-air-api.git
This command will create a new folder with the name 'facebook-actionscript-api' and within that, create three key folders—docs, examples, and src. Unsurprisingly, these folders contain the source code for the library, the documentation for the library, and several sample applications, respectively.
How it works...
The download locations for this recipe, and the source code for the Facebook SDKs which form the backbone of the recipes in this cookbook, point to Git repositories which are hosted by GitHub.
The source code for this repository is itself originally based on the official version of the SDK which is hosted on Google code, but it has been extended and expanded by other developers, (primarily Mark Walters, of http://yourpalmark.com/). The advantage of using our community-driven version of the SDK over the official one is that the source code is traditionally updated much more frequently, and includes a wide array of value-object classes, which the official version of the SDK does not yet include.
Not sure which version of the SDK is best for your project?
The Flash Player version, or the AIR version of the SDK?
In addition to the different download options, there are also two different versions of the Facebook ActionScript 3 SDK, and the one which we will use depends on whether we're building desktop applications that run in Adobe AIR, or browser-based applications that use the Flash Player.
What if I want to build my own Facebook library?
There's nothing 'magical' about this Facebook ActionScript API—everything it can do is built on standard capabilities of ActionScript 3 and the Flash Player. If you wanted to, it's entirely possible to write your own code that works with Facebook without using this library, but why, as mentioned in the introduction, should you re-invent the wheel?
That doesn't mean that the official API isn't subject to an occasional change—the move by Facebook to the 'Open Graph' in 2010 is evidence of that—but it does mean that there's always going to be someone maintaining the project and making sure it works with the latest version of the Facebook API.
|Read more about this book|
(For more resources on this subject, see here.)
Including the Facebook ActionScript 3 SDK in a Flash Builder project
Your situation, experience, personal preferences and the complexity of your final project dictate exactly how you'll integrate the Facebook ActionScript 3 SDK into your project. In this recipe we're going to use the precompiled SWC files that we've downloaded in our earlier recipe, Downloading the Facebook ActionScript 3 SDK, and integrate them with a new Flash Builder project.
How to do it...
Within your project structure you will, by default, have a libs folder. Copy your downloaded SWC file into that folder, and at a basic level, that's all there is to it.
The classes from the Facebook ActionScript 3 SDK will now be available to your project—you should get auto-complete code suggestions as you type, and more importantly, be able to compile your code!
How it works...
An SWC file is a compiled set of source files—which could be ActionScript source code or symbols and images—and is a useful way of making your source code available for others to use, while still protecting the actual original code. Anyone with the SWC can get access to the classes it contains and all their properties and methods, but can't actually see the code behind those methods. Of course, protecting the code isn't a huge concern for the Facebook ActionScript 3 SDK, as we can get all of the source code from other sources anyway.
The great thing about using a SWC file is that it minimizes the clutter of source files in your project—you don't need to include anything more than the SWC, whereas if you wanted to use the actual source files, you'd need to add 20-odd additional ActionScript files. That might not sound bad, but when you start using the source-code versions of multiple ActionScript libraries, you can easily end up with 10, 20, 50, or more ActionScript files that aren't actually written by you for this project.
Another little plus with SWC files are that they're precompiled, which theoretically means lower compile times for your project. I don't think it actually makes much of a difference for this SDK, but every little bit helps I guess!
What about the downsides of SWC files? Well, the main downside of a SWC file is also partially the reason it exists—that you can't see the actual source code. If you want to browse through the source code, but still get the advantages of using a SWC file in your project, follow the next recipe Including the Facebook ActionScript 3 SDK as a Flash Builder library project.
If you're using a SWC exclusively then you'll be flying blind if you should trigger errors on the classes you don't have the source code for, and will be presented with a dialog similar to this:
Informative, but really not helpful when you're trying to find out where your code is breaking down. Luckily there's a solution for that, and it is by linking source files to an included SWC.
Of course, when it comes to Runtime Errors, it's more likely that the error is in your code, rather than the Facebook ActionScript 3 SDK. Linking to the source is more about helping you find and debug your own errors, rather than searching for errors in the SWC.
Linking source files to an included SWC
Before we start out, it's important to note that linking source files to an included SWC file doesn't actually have any effect on the SWC itself. Instead, what we're doing is giving Flash Builder the location of the SWC's source files.
When Flash Builder tries to open your project in debug mode it will use this information, but it won't magically enable Flash Builder to recreate the SWC file for you—for that you need to set up the code as a Flash Builder library project (which is, coincidentally, the subject of the next recipe).
Once you've downloaded the Facebook ActionScript 3 SDK source files, place them in a sensible location somewhere on your computer—it doesn't matter where exactly, only that you remember the location.
Open your project preferences screen, and switch to the tab Flex Build Path and within that, Library path:
In the preceding screenshot, you can see the GraphAPI_Web_1_0.swc file, and underneath that you can see there is a Source attachment option—double-click on that to open a new window, labeled Edit Folder Path:
From this dialog you can select the location of the source files for the SWC. There won't be any visual confirmation whether the location you've selected is correct or not, but when you start coding or debugging, you should be able to explore the source code of the classes in the SWC, and see far less of the Code Navigation Error dialog.
Including the Facebook ActionScript 3 SDK as a Flash Builder library project
An alternative to including the Facebook AS3 SDK in its precompiled SWC form is to set up the SDK as a Flash Builder library project.
The end result, as far as the compiler and the user are concerned, is no different, but our own way of developing, reusing, and exploring the code is a little simpler. And unlike the precompiled SWC files that can be downloaded from the GitHub repositories, by using a Flash Builder library project, we can make modifications to the source code.
Using a Flash Builder library project makes it easy to reuse the code in the library in multiple other projects, and for the remaining recipes in this article we're going to be linking to the library projects that we set up in this recipe.
There are two versions of the Facebook ActionScript 3 SDK, and just as there are two versions of the precompiled SWC to download, we will also need to create two Flash Builder library projects. In this recipe we're going to cover setting both of these library projects up and linking to these library projects from other projects.
How to do it...
- Create a new library project in Flash Builder, using the basic Flex SDK only (don't include the Adobe AIR libraries), and call it Facebook Web SDK.
- Copy the files and folders from the downloaded facebook-actionscript-api folder to the root folder of our project, setting up the following folder structure:
That will create a library project which we can use in basic Flash Player-based web projects. Next, we'll create a project that gives us the Adobe AIR version of the SDK.
- Keep the Facebook SDK Web project open, and create a new Flash Builder library project; call it the 'Facebook Desktop SDK', only this time, be sure to include the Adobe AIR libraries in your project.
- As with the web version of the SDK, copy the files you've downloaded from the facebook-air-api folder into our new library project, creating the following folder structure:
Not much to see in terms of source code, is there? Unlike the web version of the SDK, the desktop version isn't completely standalone; it relies on core classes from the web project—so what we need to do now is add the web project to the desktop project as a linked library.
- Open your project preferences, go to the Flex Library Build Path and then the Library path' tab, then click Add Project... and select the Facebook Web SDK project.
Once the web project is added as a library for the desktop library project, both of those projects should be able to compile, and that's it for this recipe.
How it works...
The complexity in this setup is just realizing that the Desktop version of the SDK is not a standalone library, and does, in fact, require all of the code from the web version. The source code files aren't duplicated for both versions because that would make things more complex to manage, and rather than merging the two sets into a single library project, we have to set things up in a way that keeps all of the AIR-specific source code in its own project.
Both versions of the Facebook ActionScript 3 SDK—Web and Desktop—rely on a core set of classes. The source code for the web version of the library contains all of these classes, whereas the desktop version of the library contains only the classes that require the AIR libraries, which is why it needs to be set up like this—to inherit those core files from the web project.
This will be covered in the next article on Preparing your Flash Player application's HTML template for Facebook integration.
- Flash Player Application's HTML Template for Facebook Integration [Article]
- Introduction to Developing Facebook Applications [Article]
- Integrating phpList 2 with Facebook [Article]
- Facebook Application Development with Ruby on Rails [Article]