The Morphic Group

For the Morphic Group's Facebook page we wanted to repurpose the featured projects part of our current website into a Facebook page tab. After looking at a series of tutorials and poking and prodding till it worked, here is how we did it.

What you will need:

- A webserver or hosting account that can run PHP
- A Facebook account
- The Facebook Developer app installed in your Facebook account
- If your Flash app needs to load xml or images from your hosted domain, access to your crossdomain xml file at hosted domain

Part 1 Setup your Flash Application on your Server

1. Create a directory on your web server for all of your files. For TMG, I created a directory "facebook" and inside that folder I created another folder "portfolio."

2. Upload your Flash app swf and its supporting files. In my case, since my app was built with Flex this consisted of my images and xml assets folder, the generated HTML file, and the compiled swf for my app.

3. Create a "tab" folder. In the "portfolio" folder I previously created, I added a "tab" folder. We need this folder for when a user makes your Facebook app into a tab. When an app is made into a tab, Facebook will want a different set of files to use. This is because developers sometimes want their apps to look or behave differently if their app is implemented as a tab.

4. Copy the files Facebook should use when your application gets implemented as a tab. In my case, I just copied the same files from the "portfolio" directory into the "tab" directory.

Part 2 Setup your Application in Facebook

1. Click on the "Developer" app button under the "Applications" button in your Facebook control bar at the bottom of the page.

2. Click "Set Up New Application" in the upper right of the Developer page.

3. Type in your Application name, accept the Facebook Terms, and click "Save Changes."

4. You will now be taken to the "Basic" tab of your application. In this tab, you can edit the Application Name, Description, Icon/Logo, Developer Contact Email, and auxilary URLs for your app. For our interactive portfolio, we just updated our description and icon/logo. When done, click "Save Changes."

5. Next click on "Authentication" on the left. Be sure to check "Users" and "Facebook Pages." For the Post-Authorize and Post-Remove Callback URLs, enter the following:
http://www2.themorphicgroup.com/{the directory your swf is hosted at on your sever}/index.php

For the TMG portfolio app it is:

http://www2.themorphicgroup.com/facebook/portfolio/index.php

Click "Save Changes" when you are done.

6. To setup our tab configuration, click "Profiles" in the left menu. Enter in your Tab Name and tab URL. For example, we entered "TMG Portfolio" as the tab name and "tab/tab.php" for the "Tab URL." The "Tab URL" field basically tells Facebook where to find the files to use for the tab. Click "Save Changes."

7. Click "Canvas" on the menu to the left. Enter your "Canvas Page URL" (ex: "tmgportfolio".) Next, enter the "Canvas Callback URL" for your app. This should be the full URL path to where your Flash app resides. For the TMG Portfolio app it is:

http://www2.themorphicgroup.com/facebook/portfolio/

8. Make sure "IFrame" is selected for "Render Method" and then click "Save Changes."

Part 3 Setup the PHP on your Server

1. Click "Back to My Applications" at the top of the Developer UI.

2. Click "Download the Client Library" link at the bottom of the Developer UI. Once download, extract the files and then upload them to your Flash app's web directory. For the TMG app this directory was:
/facebook/portfolio/

3. Click on the "example code" link three quarters of the way down the page. Follow Step 2: Create an "index.php" File in the "Quick Creation Guide" popup.

4. Modify the index.php file for your Flash app. For TMG Portfolio app this is the only PHP I had:

<?php
// Copyright 2007 Facebook Corp. All Rights Reserved.
//
// Application: The Morphic Group Portfolio
// File: 'index.php'
// This is a sample skeleton for your application.
//

require_once 'facebook.php';

$appapikey = '#########################';
$appsecret = '##########################';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();

?>

After the PHP block, I cut and pasted in the HTML for my Flash app that was generated by Flex. Note: I removed the api key and secret for privacy reason.

5. Create your tab.php file. This will be the PHP that will be used to render the tab version of your applicaiton. For our application, this is only one line:
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www2.themorphicgroup.com/facebook/portfolio/TMG_FB_Portfolio.swf' imgsrc='http://www2.themorphicgroup.com/facebook/portfolio/fbSplash.jpg' width='600' height='570' />

FBML is a markup language that Facebook uses to render apps. In this example note that we specify an "imgsrc" attribute in addition to the "swfsrc" attribute. The image specified is used as a splash graphic of sorts, because a Flash swf in a tab is not activated until a user clicks on it.

Part 4 Test and Implement Application

1. Click on the link under "Step 3: Test Your Application" in the "Quick Creation Guide" popup, or you can go to your canvas URL directly (ex: http://apps.facebook.com/tmgportfolio.)

2. You should now see your application running in Facebook.

3. Go back to your application's page in "My Applications" and click on "View Application Profile" in the menu on the right.

4. Once on the application's profile page, click "More" in the menu to the left. You should see an option "Add to my Page." After clicking, you will be asked what page you would like this to be added to.

5. After selecting the appropriate page, your application should now be visible as a tab.

 

There you have it. If all went well and I didn't miss anything in this tutorial, you should now have a cooler Facebook page. If there is anything I missed, or if you run into any issues that aren't covered here, please leave a comment and I'll update this blog post.

Posted in ActionScript, Facebook Applications, Flash, Flex, PHP, Technology

This entry was posted on Thursday, July 9th, 2009 at 11:22 am and is filed under ActionScript, Facebook Applications, Flash, Flex, PHP, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.