When you develop and deploy an app or game on Facebook you need to invoke the Facebook API to login as well as to get details about the user, friends, photos, and other information. There are currently several official SDKs that you can use to perform such tasks via the Facebook Graph API. This article will guide you through the basics of using the JavaScript SDK with ActionScript 3.

The Facebook API is simple and supports rapid extensibility without API changes, via the Graph API.

A good place to begin is with these three Facebook JavaScript API calls:

FB.init – initialize Facebook API
FB.login - login to Facebook
FB.api - perform a Graph API call on Facebook

You can call the JavaScript wrappers from ActionScript using flash.external.ExternalInterface. This provides access to the Facebook API from the Flash runtime and enables you to be always up-to-date whenever Facebook changes or updates their official JavaScript APIs (see Figure 1).

Figure 1. Accessing Facebook from ActionScript via the JavaScript SDK.

To try this out yourself, you need to complete following steps, which are outlined below:

Set up communication between Flash and JavaScript
Set up a development server for the Flash app
Create a new Facebook app
Initialize the Facebook JavaScript SDK
Login to Facebook and get some data

Step 1: Set up communication between Flash and JavaScript

To call the Facebook JavaScript SDK from the Flash runtime, you first need to establish communication between the two layers using ExternalInterface.

Add these three functions into your main ActionScript 3 class and call the init() function from the constructor:

        private function init():void{
    ExternalInterface.addCallback("myFlashcall",myFlashcall);
    stage.addEventListener(MouseEvent.CLICK, onClick);
}

private function myFlashcall(str:String):void{
    trace("myFlashcall: "+str);
}
protected function onClick(event:MouseEvent):void{
    if(ExternalInterface.available){
        trace("onClick");
        ExternalInterface.call("myFBcall");
    }
}
    

Then add this code to your HTML file inside the <head> element (if you are using Flash Builder, add it to index.template.html):

        <script>
function myFBcall(){
    alert("test");
    // should work in every modern browser
	document.getElementById("NAME_OF_YOUR_FLASH_ELEMENT").myFlashcall(“test string”);
}
</script>
    

Replace NAME_OF_YOUR_FLASH_ELEMENT with an actual name, for example the name of your main class. I used "FacebookDemo" (my main class is named FacebookDemo.as).

Run the app. If you click anywhere on the stage inside the Flash content, it should make a JavaScript call, display an alert, and call back into ActionScript to trace a string.

Step 2: Set up a development server for the Flash app

You can develop your app online or set up a server on localhost. I prefer using localhost for development. On Mac OS X you can use the MAMP server, and on Windows you can use the WAMP server.

My MAMP server is set up with port 8888 and the web root is /Applications/MAMP/htdocs.

Add a fbdemo folder in the htdocs folder.
To simplify the development process, configure Flash Builder to compile into your htdocs/fbdemo folder and run (or debug) the app on your server (see Figure 2).

Figure 2. Configuring the Output Folder and Output Folder URL in Flash Builder.

Verify that your app runs from your server.

Step 3: Create a new Facebook app

The next step is to create a Facebook app.

Navigate to https://developers.facebook.com/apps/ and click Create New App.
For the App Domain, type localhost.
Select Website With Facebook Login, and type your Site URL, http://localhost:8888/fbdemo (see Figure 3).
Once your app is created, remember the API key/App ID. You will need it next.

Figure 3. Creating a new Facebook app.

Step 4: Initialize the Facebook JS SDK

For details on the Facebook JavaScript SDK, visit https://developers.facebook.com/docs/reference/javascript/.

To initialize the SDK, include the following code within your HTML <head> element and replace YOUR_APP_ID with the App ID you noted in the previous step. (If you are using Flash Builder, add this code to index.template.html.)

        <script>
    window.fbAsyncInit = function() {
        // init the FB JS SDK
        FB.init({
            appId : 'YOUR_APP_ID', // App ID from the App Dashboard
channelUrl : 'www.YOUR_DOMAIN.COM/channel.html', //Channel File for x-domain communication, replace YOUR_DOMAIN.COM with your domain
             status : true, // check the login status upon init?
            cookie : true, // set sessions cookies to allow your server to access the session?
            xfbml  : true  // parse XFBML tags on this page?
        });

    // Additional initialization code such as adding Event Listeners goes here
    };

    // Load the SDK's source Asynchronously
    // Note that the debug version is being actively developed and 
    // might contain some type checks that are overly strict. 
    // Please report such bugs using the bugs tool.
    (function(d, debug){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
        ref.parentNode.insertBefore(js, ref);
    }(document, /*debug*/ false));
</script>
    

Next add a fb-root div to your <body> element.

<div id="fb-root"></div>

Step 5: Login to Facebook and get some data

Now you’re ready to login to Facebook and start making API calls to retrieve data.

Edit the myFBcall function, and replace its contents with the following code. This code will login to Facebook, fetch your name, display it in an alert, and send it back to the Flash runtime.

        <script>
    function myFBcall(){
        FB.login(function(response) {
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                FB.api('/me', function(response) {
                    alert('Your name is ' + response.name);
                    document.getElementById("FacebookDemo").myFlashcall(response.name);
});
            } else {
                console.log('User cancelled login or did not fully authorize.');
            }
        });
    }
</script>
    

Now you have set up basic communication from Flash Player to JavaScript to Facebook and back.

The code above calls the FB.login function and creates an anonymous function callback, which checks for the actual authResponse status. It then calls FB.api function, which calls the Facebook Graph API. To get information about the current user, it simply passes '/me' as a parameter.

Once you have logged in, you can just call FB.api("command") alone without the need for FB.login; for example:

        function getProfilePicture(){
    FB.api("/me/picture", function(response) {
        // DO SOMETHING
    });
}
    

To verify that you are currently logged in, you can call FB.getLoginStatus.

Refer to the developer documentation on Facebook for more information.

Where to go from here

To understand the Graph API better and test your commands before you deploy them, use the Graph API Explorer.

You should also check out the Graph API documentation, which has all the information you need to properly form your FB.api commands.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Getting started with the Facebook SDK and ActionScript 3

by Tom Krcha

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Step 1: Set up communication between Flash and JavaScript

Step 2: Set up a development server for the Flash app

Step 3: Create a new Facebook app

Step 4: Initialize the Facebook JS SDK

Step 5: Login to Facebook and get some data

Where to go from here

Products

Download

Support & Learning

Buy

Company