Embedding a Flex Facebook application in an IFrame

I started, like a lot of people following the excellent tutorial:
Create your first Facebook application with Flex
Sure enough, you are able to create an application in Flex that opens a popup window to login to Facebook and add your new Facebook application. You can then access your photos, friends, profile info, etc. and do what you will.

The obvious next step is to embed the application right in Facebook, like most Facebook apps. So, on to the next tutorial:
Deploy your first Flex application on Facebook

The only problem, is that it doesn’t work. The application will be embedded in Facebook, but will still open up that annoying popup window to add the application to the user profile.

The reason being is that if the logged in user has not already added the application, then the variables passed to the SWF by Facebook does not include the session key, and other information needed to create a WebSession directly. From looking through the FacebookSessionUtil code, I believe that the popup window is the result on this code trying to open a JSSession instead of a WebSession.

The solution that I have found is to handle the application approval through the Facebook PHP Client Library.
What you need to do is:

  • Download client library from the link above (you will need the files facebook.php, facebookapi_php5_restlib.php, and the jsonwrapper directory
  • Convert your index.htm that you created in the tutorial above to index.php and add the following code to the top of this file (make sure there are no lines above this code)
  • <?php

    //include facebook api etc.

    require_once(“facebook.php”);

    //create new facebook instance

    $facebook = new Facebook(“YOUR API KEY”, “YOUR APPLICATION SECRET”);

    //prompt the user to login

    $fb_user = $facebook->require_login();

    //check if the user has added the app

    if (!$facebook->api_client->users_isAppUser()) {

    //if not, redirect him to add it

    $facebook->redirect($facebook->get_add_url());

    }

    ?>

What this does is redirect the user to allow the application before actually loading the SWF. The SWF is only embedded in the IFrame after the logged in user has added the application and the session is established.

I hope this helps some people out as I spent a lot of time mucking around with this!

One Response to “Embedding a Flex Facebook application in an IFrame”

Leave a Reply

*

Get Adobe Flash player