Solving the “break-out” issue in iFrame Facebook applications

I’ve tinkered with Facebook apps enough to find out what works and what doesn’t. The most frustrating things I’ve had to deal with is when I’ve developed a Facebook app in an iframe. Using the canvas page rather than an iframe is great. You’ll encounter little to no weirdness. But if you’re like me, you want full control over your app, and that’s accomplished by going the iframe route.

Probably the single most frustrating thing about using the iframe is the “break-out” problem. Basically when a user visits your application, they are suddenly thrown out of Facebook completely into a new window and all sorts of crazy things can happen from there, the least of which are some errors displaying on the page, or the app doesn’t work. The worst I’ve seen is when a new window opens with the application inside and the browser window begins shrinking until it becomes nothing greater than a 20 x 20 pixel box. Closing the browser, well.. closes it. But when you reopen your browser it is the same small size. This is just unacceptable, and frankly it’s embarrasing for the developer.

So, how to solve it?

After weeks of avoiding the issues, and finally hours of surfing the net I came across a genius snippet of code, miracle code in fact. The following code will help those of you out there with some experience in writing Facebook apps. As for the rest of you… you’re SOL, for the moment. I plan on writing a few tutorials in the future that show how to develop Facebook applications.

function get_facebook_vars() {
    $fbvars = "";
    foreach ($_GET as $key=>$value) {
        if (strpos($key, "fb_sig") !== false) {
            $fbvars .= "$key=$value&";
        }
    }
    if ( empty($fbvars)) {
        return false;
    }
    return $fbvars;
}
 
// IMPORTANT!
// There have been instances where the iframe has broken out of the Facebook application.  This is BAD!
// We must be sure that we have all the needed junk in the querystring from FB,
// and if we don't then we redirect to the FB app page
$fbvars = get_facebook_vars();
 
if ($fbvars !== false) {
 
    // Include the Facebook API file.  You can download this from the developers section of FB.
    require_once ("facebook.php");
 
    // Create a Facebook object
    $facebook = new Facebook($key, $secret);
 
    // Attempt to get a logged in user id.
    // This will redirect us to the FB login page if the user is not logged in.
    $user = $facebook->require_login();
 
}