Search code examples
phpfacebookiframescrollbarfacebook-iframe

Facebook iFrame app - getting rid of vertical scrollbars?

I've converted a Facebook app from FBML to iFrame (with PHP SDK) and now have vertical scrollbars displayed for the same amount of content I had before (a logo, a flash game and a line with 3 links below). But earlier I didn't have any scrollbars.

If I set the app setting Auto-Resize, then the lower part of content isn't displayed at all - which is bad, the flash game is unplayable then.

I've searched around and all suggested solutions involve Javascript, but I'm actually using PHP SDK. Isn't there a solution for PHP/CSS only?

Below my current code:

<?php

require_once('facebook.php');

define('FB_API_ID', 'XXX');
define('FB_AUTH_SECRET', 'XXX');

$facebook = new Facebook(array(
            'appId'  => FB_API_ID,
            'secret' => FB_AUTH_SECRET,
            'cookie' => true,
            ));

if (! $facebook->getSession()) {
    printf('<script type="text/javascript">top.location.href="%s";</script>',
        $facebook->getLoginUrl(
                array('canvas'    => 1,
                      'fbconnect' => 0,
                      #'req_perms' => 'user_location',
        )));
    exit();
} else {
    try {
        $me = $facebook->api('/me');

        $first_name = $me['first_name'];
        $city       = $me['location']['name'];
        $female     = ($me['gender'] == 'male' ? 0 : 1);
        $avatar     = 'http://graph.facebook.com/' . $me['id'] . '/picture?type=large';

    } catch (FacebookApiException $e) {
        exit('Facebook error: ' . $e);
    }
}

# print the logo, the flash game and 3 links

?>

Also I'm not sure if my PHP-script is supposed to print 

<html>
<body> 
.....
</body>
</html>

? Currently I only print what's inside the body.

And I wonder if it is a good idea to replace top.location.href=.... in my code by PHP's header('Location: ....');?

Solution

  • If you are going to use the Asynchronous method, it's recommended that you put as much of FB code within it. Something like the below should work: 

    <html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
    FB.Canvas.setSize();
};

function sizeChangeCallback() {
    FB.Canvas.setSize();
}
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
  '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>

    Now you will call the sizeChangeCallback() function whenever you make a change to the layout (clicking new tab, loading Ajax content...etc).