We recently ported a Flash-based game to Facebook and were faced with some of the challenges of the Facebook platform imposes on Flash apps, mainly the limitations Flash applications have when communicating with their “container” (the Facebook canvas page).

When building and integrated a Flash app with its container, many situations come up that require you to pass information into the Flash application (via Javascript or Flashvars) and get information out of the Flash application (via Javascript or a redirected URL and a query string). Anyone who has build a more complex Flash application knows what I am talking about! Unfortunately, Facebook doesn’t support the type of communication.

Since Facebook doesn’t support external communication via Javascript or FBJS, and since Facebook doesn’t support navigation by the Flash application (via navigateToUrl or getURL), it becomes difficult to convert more complex Flash/Flex applications and widgets into Facebook application.

Since we do a lot of Flash to Facebook porting work for clients, we have to develop workarounds to many of the problems that plague Flash apps on Facebook. Here is one such solution:

Enabling Flash to Facebook Book to Flash Communication:

1. Put your Flash application in an IFRAME within your Facebook Canvas Page
   You can pass information to your Flash application (located in the IFRAME) by passing a query string (<IFRAME src=”flash.php?value=x”…>). The PHP page in which your Flash application sits, picks up query string (“value=x”) and passes the parameters as a Flashvars to the Flash application (<EMBED src=”..” flashvars=”value=x” …>).
2. Your Flash application communicates back to your Facebook Application using getURL(“..”,”_top”,”GET”)
   Since your Flash application is in an IFRAME, navigateToUrl or getURL will work! The trick is to make sure you get using GET and setting the target to “_top”, the URL should be a URL to a Facebook Canvas Page (http://app.facebook.com/myapp, i.e.). This way your Flash application can pass information via a query string to your Facebook Canvas Page.
3. Your Flash Canvas Page picks up the information from the query string
   Voila you are done! You passed information into your Flash application (such a a username, i.e.), and you got information back from your Flash application (use as the high score, or test results, i.e.)! Complete 360!

If you having problems porting your Flash apps and widgets to Facebook, let us know! At Metablocks, we love solving hard problems, especially Facebook related ones!

Tags: facebook, flash