Categories: Tutorials

Flash Player Application’s HTML Template for Facebook Integration

5 min read

Flash Facebook Cookbook

Over 100 recipes for integrating the Flash Platform applications with the Graph API and Facebook.

Read more about this book

(For more resources on this subject, see here.)

The reader will be benefit from referring the previous article on Getting Started with Flash and Facebook.

The Facebook JavaScript SDK is what makes it possible for our Flash Player application to obtain details of any active Facebook sessions, and it allows our application to perform actions such as prompting for authentication or requesting additional permissions.

Getting ready

For our Flash Player application to integrate with Facebook, we will need some form of HTTP server, so that we can run our application from an http://-based URL, rather than simply launching a file from a local folder on your computer. Ideally we need a live, publicly-accessible domain under our control, and we’ll configure our Facebook Application to use pages on that domain as the basis for our Canvas and Tab applications.

In addition, if we can, it would be most efficient (but not essential) to have an HTTP server set up on our local machine—allowing us to test and debug our Flash Player applications locally, without having to re-upload files to a remote site every time we need to test new functionality.

How to do it…

The first thing we’ll need is a web-based Flash Player application, which we can get by specifying Web (runs in Adobe Flash Player) when we create our Flex project:
Open the folder in your project named html-template. If that folder doesn’t exist, open your project settings, and make sure that the option Generate HTML wrapper file under the Flex compiler section is checked.
The first change we’re going to make to our file is to import the Facebook JavaScript SDK. Into the head section of the HTML page (between the opening <head> and closing </head> tags) add the following code:
```
<script type="text/javascript" 
src="http://connect.facebook.net/en_US/all.js"></script>
```
This script tag imports the JavaScript SDK into our HTML page, but to activate it we need to add a specific HTML element—a div element with a specific ID. Jump to the bottom of the page, before the penultimate closing tag, </body>, and add a new DIV element, with the ID of fb-root:
```
<div id="fb-root"></div>
```

With these additions, our final HTML code for the entire page template should be similar to this (with our additions to the HTML highlighted):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html  lang="en" xml:
lang="en">
 <head>
  <title>${title}</title>
  <style type="text/css" media="screen">
              html, body { height:100%; }
              body { margin:0; padding:0; overflow:auto; 
text-align:center; background-color: ${bgcolor}; }
              #flashContent { display:none; }
  </style>
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript">
    var swfVersionStr = "${version_major}.${version
_minor}.${version_revision}";
    var xiSwfUrlStr = "${expressInstallSwf}";
    var flashvars = {};
    var params = {};
    params.quality = "high";
    params.bgcolor = "${bgcolor}";
    params.allowscriptaccess = "sameDomain";
    params.allowfullscreen = "true";
    var attributes = {};
    attributes.id = "${application}";
    attributes.name = "${application}";
    attributes.align = "middle";
    swfobject.embedSWF(
        "${swf}.swf", "flashContent",
        "${width}", "${height}",
        swfVersionStr, xiSwfUrlStr,
        flashvars, params, attributes);
            swfobject.createCSS("#flashContent",
            "display:block;text-align:left;");
  </script>
  <script type="text/javascript"
   src="http://connect.facebook.net/en_US/all.js"></script>
 </head>
 <body>
    <div id="flashContent">
        <p>To view this page ensure that Adobe Flash 
Player version ${version_major}.${version_minor}.
${version_revision} or greater is installed.</p>
    </div>
    <div id="fb-root">
    </div>
 </body>
</html>

These additions are all we need to attempt communication with the Graph API from a technical point of view, but before our API requests are successful, we must make sure that our application is configured correctly on Facebook.com.
Open the Facebook Developer center, from the URL:
http://www.facebook.com/developers/apps.php
Edit our existing application, and switch the Web Site tab, which contains two key fields—Site URL and Site Domain:
Our Site URL will be the location of our application when we upload it to a publicly-accessible HTTP server, and should be expressed as an URL (starting with http://).
The Site Domain (expressed without the http:// prefix) allows us to control the domain and subdomains that are allowed to access the Graph API, while identifying as our application. Once this property is set, only requests that appear to come from that specified URL (or part URL) will be allowed to make requests, and all others will be summarily rejected by the Graph API with the error message:
Given URL is not allowed by the Application configuration.
Change the Site URL property to point at our Flash application’s live location, such as: http://facebook.psyked.co.uk/packt/.
Change the Site Domain property so that it lists the main domain of our application’s live location, for example: psyked.co.uk.
Now, with the Site’s URL and Domain settings established, our next step should be to upload our application and its HTML files to the location we’ve specified in the Site URL field. Once those files are uploaded and available from the domain we specified in the Site Domain field, we should see no more of those Given URL is not allowed… errors.
Finally, to test our application we will need to upload our HTML and SWF files to a live web server—one that is able to serve up our application’s HTML file from within the domain that we specified in the Site Domain setting in the Facebook Developer center. For example, http://psyked.co.uk/packt/Facebook.html.