Adobe
Sign in My orders My Adobe

by Jeanette Stallons

Jeanette Stallons

Content

Modified

26 September 2011

Page tools

application Facebook Flash Builder Flex social networking

Prerequisite knowledge

A basic knowledge of web technologies and object-oriented programming principles is helpful.

 

You also need:

- A Facebook account: Sign up

- A registered Facebook application: See Part 1

- ActionScript 3 SDK for Facebook Platform

- A publicly available web server (not localhost) for testing a Flex and Facebook web application.

User level

Beginning

Required products

Sample files

Note: This tutorial series was updated September 2011 to use the Adobe ActionScript 3 SDK for Facebook Platform, which uses OAuth 2.0. Facebook is requiring all applications to use OAuth 2.0 by October 1, 2011.

This tutorial series steps you through the process of building and deploying desktop and web applications that retrieve, display, and post Facebook data. In Part 3, you built and deployed a web application on your own web server. In this part, Part 4, you will modify the web application so it can also be accessed on the Facebook website.

In this tutorial, you will:

  • Edit settings for the application in the Facebook Developer application.
  • Create two new application states for when the application is accessed on the Facebook website that do not contain the login or logout buttons.
  • Determine if the application is being accessed as an external website or on the Facebook website.
  • Modify the login functionality so that if the application is accessed on Facebook.com, the browser is redirected to the Facebook login and/or authentication pages instead of displaying them in pop-up windows.
  • Deploy the application to a web server.
  • Browse to the application on the Facebook website and successfully log in, authorize the application, see your user information, and send a status message.
  • Debug the remote application on Facebook using Flash Builder.

Note: Facebook frequently changes to the site's user interface and API. This makes it difficult to keep this tutorial 100% up-to-date. Please be sure to add and read the comments at the end of this tutorial for any user interface or API modifications that might have occurred.

Edit the application settings on Facebook

Start by editing the application's properties in the Facebook Developer application so that it can be accessed on the Facebook website.

Set up a Canvas Page

Assign a Facebook URL for a page that loads the application from your server into an iFrame in a Facebook web page.

  1. Return to the Developer application on Facebook.
  2. Click the link for the YourLastName User Status application.
  3. Click the Edit App button or the Settings link.
  4. Under Basic Info, enter an App Namespace (see Figure 1). This is the app name a user uses to browse the application on Facebook. For example, for an app namespace of stallonsuserdemo, you access the app at http://apps.facebook.com/stallonsuserdemo/. The App Namespace can only contain lowercase letters, dashes, and underscores.
Figure 1. Enter an App Namespace.
Figure 1. Enter an App Namespace.
  1. Under Canvas Settings, enter a Canvas URL. This is the URL for the application on your web server. For example, http://stallons.com/facebook/userstatusweb/ (see Figure 2). You can use the same URL you used in Part 2 for the external web application. You are going to modify that application so it works when it is acessed externally or on Facebook.com.
Figure 2. Enter a canvas URL and a secure canvas URL.
Figure 2. Enter a canvas URL and a secure canvas URL.
  1. Click the Save Changes button.

De-authorize the application

This application has already been authorized with Facebook (when you logged into it as a external web application) so to test it as a web application on Facebook.com, you need to first de-authorize it.

  1. In Facebook, select Home > Account Settings.
  2. Click the Apps link in the left-hand navigation.
  3. Click the x next to the YourLastName User Status appliction (see Figure 3)
De-authorize the application.
Figure 3. De-authorize the application.
  1. In the Remove dialog box, click Remove.
  2. In the Application Removed dialog box, click Okay.
  3. Select Home > Log Out to log out from Facebook so you can test the login functionality of the web application when it is accessed on Facebook.com.

Modify the login code

Login functionality is provided by the Facebook init() and login() methods just as it was in the external web appliction with one difference: if the user is not logged in or the application has not been authenticated, you want to redirect the browser window to the Facebook log in and/or authentication pages instead of displaying them in pop-up windows. To accomplish this, you will determine if the application is being acessed on the Facebook website and if it is, then when a user needs to log in or authorize the application, you call a JavaScript method in the wrapper page to redirect the browser.

Get a starting project

To complete this tutorial, you need a working web application as it was at the end of Part 3.

  1. If you completed Part 3 of the tutorial series, use that Flash Builder project and Facebook application.
  2. If you did not complete Part 3 or you do not have a working web application for any reason, do the following:

Create two new application states

If the application is accessed on the Facebook website, it does not need to contain login and logout buttons. Make two new application states, loggedinonfacebook and loggedoutonfacebook, that do not contain the buttons.

  1. Open FacebookUserStatusWeb.mxml in the FacebookUserStatusWeb project.
  2. Switch to Design mode.
  3. In the States view, select the loggedin state and then click the New State button (see Figure 4).
Create a new state.
Figure 4. Create a new state.
  1. Make a new state called loggedinonfacebook as a copy of the loggedin state and click OK (see Figure 5).
Create the loggedinonfacebook state.
Figure 5. Create the loggedinonfacebook state.
  1. With the loggedinonfacebook state selected, delete the logout button in the design area.
  2. Select the loggedout state and then click the New State button.
  3. Make a new state called loggedoutonfacebook as a copy of the loggedout state and click OK. You should now have four states (see Figure 6).
View the four application states.
Figure 6. View the four application states.
  1. With the loggedoutonfacebook state selected, delete the login button.

Check if the application is being accessed on Facebook

When an application is accessed on the Facebook website, it is loaded into an iFrame. You can determine if the application has been loaded into an iFrame or not by using JavaScript to check the URL of the top window. If you assign a variable the value of the top window location, it will be assigned a value when the application is acessed on your own server but will not have a value when the application is accessed on the Facebook website.

  1. Inside the Script block, define a new variable called topURL of type String.
protected var topURL:String;
  1. Use the static call() method of Flash Player's ExternalInterface class to execute some JavaScript to retrieve the URL of the top window.
protected var topURL:String=ExternalInterface.call('top.location.toString');
  1. Inside application1_creationCompleteHandler(), set the currentState so that it is set to loggedout or loggedoutonfacebook depending upon if the user is accessing the application on Facebook or not.
protected function application1_creationCompleteHandler():void { Facebook.init("YOUR APPLICATION ID HERE",loginHandler); currentState = (topURL) ? "loggedout": "loggedoutonfacebook"; }

This code uses the ternary operator for brevity. The equivalent code using if/else statements would be the following:

if (topURL){ currentState="loggedout"; } else{ currentState="loggedoutonfacebook"; }
  1. Inside the first if block in loginHandler(), change the currentState assignment so that it is set to loggedin or loggedinonfacebook depending upon if the user is accessing the application on Facebook or not.
protected function loginHandler(success:Object,fail:Object):void { if(success){ currentState = (topURL) ? "loggedin": "loggedinonfacebook"; Facebook.api("/me",getMeHandler); //more code

Modify the login code

Lastly, modify the login code to redirect the browser to the Facebook login and/or authorization pages when the user is accessing the application on Facebook.com.

  1. In the Package Explorer, right-click index.html and select Open With > Text Editor.
  2. Add the following redirect() function to the script block. It redirects the browser window to the Facebook authorization page and passes to it as URL variables the application ID (the client ID), a list of extended permissions, the redirect URI (the URL for your application on Facebook), and all other existing URL variables.
function redirect(id,perms,uri) { var params = window.location.toString().slice(window.location.toString().indexOf('?')); top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+id+'&scope='+perms+'&redirect_uri='+uri+params; }
  1. Inside loginHandler(), add an else if block that checks to see if the login failed and if topURL is not defined.
protected function loginHandler(success:Object,fail:Object):void { if(success){ //existing code } else if(!success && !topURL){ } }
  1. Inside the else if block, make a call to the JavaScript redirect() method in the index.html wrapper file and pass to it the application ID, the list of extended permissions, and the Canvas Page URL for your application on Facebook.
else if(!success && !topURL){ ExternalInterface.call("redirect","YOUR APPLICATION ID HERE", "user_birthday,read_stream,publish_stream","http://apps.facebook.com/stallonsuserstatus/"); }

Note: Because the application ID is now being used in two places, you may want to define a variable to hold its value and then use that in the various places in your code.

  1. Save the file.

Test and debug the application on Facebook.com

You are now ready to upload and run your application on Facebook and debug it with Flash Builder.

  1. Using an FTP client, upload the contents of your projects's bin-debug folder to the folder on your webserver you used in part 3 of the tutorial series (see Figure 7). Although you can, you do not need to upload the images folder.

Figure 7. Upload the application files to your web server.
Figure 7. Upload the application files to your web server.

    Note: Later in the tutorial, after you are finished testing and debugging the web application, you will create and upload a release version of the SWF to replace this debug version. At that time, you can also remove the Flex framework SWF files from the server.

  1. Return to Flash Builder and click the arrow to the right of the Run button and select Run Configurations (or go to Run > Run Configurations).
  2. Right-click the FacebookUserStatusWeb configuration under Web Application and select Duplicate (see Figure 8).
Figure 8. Create a duplicate run configuration.
Figure 8. Create a duplicate run configuration.
  1. Change the name to FacebookUserStatusWeb on Facebook and change the URL or path to launch to the canvas URL you set for your application on Facebook, for example, http://apps.facebook.com/stallonsuserdemo (see Figure 9).
Figure 9. Set properties for the new run configuration.
Figure 9. Set properties for the new run configuration.
  1. Click the Run button. Your application will launch on Facebook and you will one of the following:
  • Be redirected to a Facebook login page (see Figure 10).
  • Get an application login page if you are already logged in to Facebook (see Figure 11).
  • Or get an error message  (see Figure 12). You will get this error if your server is not set up to allow a POST to a file with an .html extension; to fix this you can simply change the index page's extension from .html to .php or another depending upon the server platform you are using.
Figure 10. Run and be redirected to a login page.
Figure 10. Run and be redirected to a login page.
Figure 11. Run and get a request to log in to the application.
Figure 11. Run and get a request to log in to the application.
Figure 12. Run and get an error message.
Figure 12. Run and get an error message.
  1. If you got the error message shown in Figure 12, return to Flash Builder and rename the index.html page to index.php or an appropriate file extension for your server (see Figure 13), replace the index.html file for the application on your web server with this index.php (or other server extension) file, and run the application again.
Figure 13. If necessary, modify the file extension of the index page.
Figure 13. If necessary, modify the file extension of the index page.
  1. Log in to Facebook (see Figure 10) and then the application (see Figure 11).
  2. On the next page, click Allow to give the application additional permissions. You should now see your application on Facebook (see Figure 14).
Figure 14. See your application on Facebook.
Figure 14. See your application on Facebook.
  1. Enter a new status and click Submit. You should see your new status; the application works as before.
  2. Return to Flash Builder and place a breakpoint inside the application1_creationCompleteHandler() function (see Figure 15).
Figure 15. Add a breakpoint.
Figure 15. Add a breakpoint.
  1. Right-click the topURL variable anywhere in the code and select Create Watch expression.
  2. Debug the application (see Figure 16). Your application will launch in a browser window, application execution will be suspended, and you will automatically be returned to Flash Builder.
Figure 16. Debug the application.
Figure 16. Debug the application.
  1. In Flash Builder, go to the Expressions view and look at the value of topURL; it should be null (see Figure 17).
Figure 17. Debug the application running on Facebook.
Figure 17. Debug the application running on Facebook.
  1. Stop the debugger.
  2. Debug the external web application (see Figure 18). Your application will launch in a browser window, application execution will be suspended, and you will automatically be returned to Flash Builder.
Figure 18. Debug the application running as an external web application.
Figure 18. Debug the application running as an external web application.
  1. In Flash Builder, go to the Expressions view and look at the value of topURL; it should no longer be null (see Figure 19).
Figure 19. Debug the application running on an external web server.
Figure 19. Debug the application running on an external web server.
  1. Stop the debugger.

A normal development workflow for working with a Flex and Facebook web application on Facebook is the following:

  • Make changes to your code.
  • Upload the bin-debug folder to your web server (or once the other files are already uploaded, just the modified SWF).
  • Run/browse the application on Facebook.
  • Debug the application. You can use Flash Builder to debug the Flex code. To debug the JavaScript code, you can add and display Alert boxes or HTML text. You can also use a tool to examine the network responses from Facebook (like Firebug for Firefox).
  • When done with development, create a release build and upload the final SWF and SWZ files to your server.

Compile and upload the application

Once you are done testing and debugging the application, you should create and upload a release version of the application SWF file. The SWF file that has been generated up to now (and stored in the bin-debug folder and uploaded to your web server) contains extra information for debugging the application during development.

  1. In Flash Builder, select Project > Export Release Build.
  2. Make sure your project and application are selected and then change the Export to folder field to the name of the folder you would like to store your application files in on your server; for example, userstatusweb.
  3. Click the Finish button.
  4. In the Package Explorer, locate your new folder (see Figure 20) and files and upload this folder to your web server.
Figure 20. Locate your new folder and upload it to your web server.
Figure 20. Locate your new folder and upload it to your web server.

Where to go from here

In this tutorial, you modified a Flex and Facebook external web application so that it could also be accessed on the Facebook website. The first step was to edit the application's settings on Facebook.com and assign it a Canvas Page and Canvas URL. Next, you modified the existing web application code. You created two new application states that did not contain login or logout buttons for use when the application is accessed on the Facebook website. You used JavaScript to check the value of top.location to determine from where the application is being accessed. You modified the login functionality so that if the application is accessed on Facebook.com, the browser is redirected to the Facebook login and/or authentication pages instead of displaying them in pop-up windows. And finally, you deployed the application to your server and then browsed to and debugged the application on Facebook.com.

For examples and details of applications using additional types of interaction with Facebook, see the Facebook Graph API documentation and sample code.

To learn more about creating and customizing Flex applications, see the Flex documentation and the Adobe Flex Developer Center.

More Like This

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company

Choose your region

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy Policy and Cookies (Updated)

Reviewed by TRUSTe: site privacy statement