Facebook Graph API Development with Flash
Build social Flash applications fully integrated with the Facebook Graph API
- Build your own interactive applications and games that integrate with Facebook
- Add social features to your AS3 projects without having to build a new social network from scratch
- Learn how to retrieve information from Facebook’s database
- A hands-on guide with step-by-step instructions and clear explanation that encourages experimentation and play
Accessing the Graph API through a Browser
We’ll dive right in by taking a look at how the Graph API represents the information from a public Page.
When I talk about a Page with a capital P, I don’t just mean any web page within the Facebook site; I’m referring to a specific type of page, also known as a public profile. Every Facebook user has their own personal profile; you can see yours by logging in to Facebook and clicking on the “Profile” link in the navigation bar at the top of the site. Public profiles look similar, but are designed to be used by businesses, bands, products, organizations, and public figures, as a way of having a presence on Facebook.
This means that many people have both a personal profile and a public profile. For example, Mark Zuckerberg, the CEO of Facebook, has a personal profile at http://www.facebook.com/zuck and a public profile (a Page) at http://www.facebook.com/markzuckerberg. This way, he can use his personal profile to keep in touch with his friends and family, while using his public profile to connect with his fans and supporters.
There is a second type of Page: a Community Page. Again, these look very similar to personal profiles; the difference is that these are based on topics, experience, and causes, rather than entities. Also, they automatically retrieve information about the topic from Wikipedia, where relevant, and contain a live feed of wall posts talking about the topic.
All this can feel a little confusing – don’t worry about it! Once you start using it, it all makes sense.
Time for action – loading a Page
Browse to http://www.facebook.com/PacktPub to load Packt Publishing’s Facebook Page. You’ll see a list of recent wall posts, an Info tab, some photo albums (mostly containing book covers), a profile picture, and a list of fans and links.
That’s how website users view the information. How will our code “see” it? Take a look at how the Graph API represents Packt Publishing’s Page by pointing your web browser at https://graph.facebook.com/PacktPub. This is called a Graph URL – note that it’s the same URL as the Page itself, but with a secure https connection, and using the graph sub domain, rather than www.
What you’ll see is as follows:
{
“id”: “204603129458”,
“name”: “Packt Publishing”,
“picture”: “http://profile.ak.fbcdn.net/hprofile-ak-snc4/
hs302.ash1/23274_204603129458_7460_s.jpg”,
“link”: “http://www.facebook.com/PacktPub”,
“category”: “Products_other”,
“username”: “PacktPub”,
“company_overview”: “Packt is a modern, IT focused book publisher,
specializing in producing cutting-edge books for communities of
developers, administrators, and newbies alike.nnPackt
published its first book, Mastering phpMyAdmin for MySQL
Management in April 2004.”,
“fan_count”: 412
}
What just happened?
You just fetched the Graph API’s representation of the Packt Publishing Page in your browser.
The Graph API is designed to be easy to pick up – practically self-documenting – and you can see that it’s a success in that respect. It’s pretty clear that the previous data is a list of fields and their values.
The one field that’s perhaps not clear is id; this number is what Facebook uses internally to refer to the Page. This means Pages can have two IDs: the numeric one assigned automatically by Facebook, and an alphanumeric one chosen by the Page’s owner. The two IDs are equivalent: if you browse to https://graph.facebook.com/204603129458, you’ll see exactly the same data as if you browse to https://graph.facebook.com/PacktPub.
Have a go hero – exploring other objects
Of course, the Packt Publishing Page is not the only Page you can explore with the Graph API in your browser. Find some other Pages through the Facebook website in your browser, then, using the https://graph.facebook.com/id format, take a look at their Graph API representations. Do they have more information, or less?
Next, move on to other types of Facebook objects: personal profiles, events, groups. For personal profiles, the id may be alphanumeric (if the person has signed up for a custom Facebook Username at http://www.facebook.com/username/), but in general the id will be numeric, and auto-assigned by Facebook when the user signed up.
For certain types of objects (like photo albums), the value of id will not be obvious from the URL within the Facebook website.
In some cases, you’ll get an error message, like:
{
“error”: {
“type”: “OAuthAccessTokenException”,
“message”: “An access token is required to request
this resource.”
}
}
Accessing the Graph API through AS3
Now that you’ve got an idea of how easy it is to access and read Facebook data in a browser, we’ll see how to fetch it in AS3.
Time for action – retrieving a Page’s information in AS3
Set up the project. Check that the project compiles with no errors (there may be a few warnings, depending on your IDE). You should see a 640 x 480 px SWF, all white, with just three buttons in the top-left corner: Zoom In, Zoom Out, and Reset View:
This project is the basis for a Rich Internet Application (RIA) that will be able to explore all of the information on Facebook using the Graph API. All the code for the UI is in place, just waiting for some Graph data to render. Our job is to write code to retrieve the data and pass it on to the renderers.
I’m not going to break down the entire project and explain what every class does. What you need to know at the moment is a single instance of the controllers. CustomGraphContainerController class is created when the project is initialized, and it is responsible for directing the flow of data to and from Facebook. It inherits some useful methods for this purpose from the controllers.GCController class; we’ll make use of these later on.
Open the CustomGraphContainerController class in your IDE. It can be found in srccontrollersCustomGraphContainerController.as, and should look like the listing below:
package controllers
{
import ui.GraphControlContainer;
public class CustomGraphContainerController extends GCController
{
public function CustomGraphContainerController
(a_graphControlContainer:GraphControlContainer)
{
super(a_graphControlContainer);
}
}
}
The first thing we’ll do is grab the Graph API’s representation of Packt Publishing’s Page via a Graph URL, like we did using the web browser. For this we can use a URLLoader.
The URLLoader and URLRequest classes are used together to download data from a URL. The data can be text, binary data, or URL-encoded variables. The download is triggered by passing a URLRequest object, whose url property contains the requested URL, to the load() method of a URLLoader. Once the required data has finished downloading, the URLLoader dispatches a COMPLETE event. The data can then be retrieved from its data property.
Modify CustomGraphContainerController.as like so (the highlighted lines are new):
package controllers
{
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import ui.GraphControlContainer;
public class CustomGraphContainerController extends GCController
{
public function CustomGraphContainerController
(a_graphControlContainer:GraphControlContainer)
{
super(a_graphControlContainer);
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest();
//Specify which Graph URL to load
request.url = “https://graph.facebook.com/PacktPub”;
loader.addEventListener(Event.COMPLETE,
onGraphDataLoadComplete);
//Start the actual loading process
loader.load(request);
}
private function onGraphDataLoadComplete(a_event:Event):void
{
var loader:URLLoader = a_event.target as URLLoader;
//obtain whatever data was loaded, and trace it
var graphData:String = loader.data;
trace(graphData);
}
}
}
All we’re doing here is downloading whatever information is at https://graph.facebook.com/PackPub and tracing it to the output window.
Test your project, and take a look at your output window. You should see the following data:
{“id”:”204603129458″,”name”:”Packt Publishing”,”picture”:”http://
profile.ak.fbcdn.net/hprofile-ak-snc4/hs302.
ash1/23274_204603129458_7460_s.jpg”,”link”:”http://www.facebook.
com/PacktPub”,”category”:”Products_other”,”username”:”PacktPub”,
“company_overview”:”Packt is a modern, IT focused book publisher,
specializing in producing cutting-edge books for communities of
developers, administrators, and newbies alike.nnPackt published
its first book, Mastering phpMyAdmin for MySQL Management in April
2004.”,”fan_count”:412}
If you get an error, check that your code matches the previously mentioned code. If you see nothing in your output window, make sure that you are connected to the Internet. If you still don’t see anything, it’s possible that your security settings prevent you from accessing the Internet via Flash, so check those.
