Facebook iFrame app - getting rid of vertical scrollbars?

Asked 8/5, 2011 at 16:31 Answered 22/7, 2014 at 15:48

Solved php facebook iframe scrollbar facebook-iframe

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: ....');?

Enfeeble answered 8/5, 2011 at 16:31 Comment(0)

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).

Quinonez answered 9/5, 2011 at 16:28 Comment(0)

Ok, I've found the solution:

<html>
<head>
<script type="text/javascript">
window.fbAsyncInit = function() {
        FB.Canvas.setSize();
}

function sizeChangeCallback() {
        FB.Canvas.setSize();
}
</script>
</head>
<body>
......

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
        appId  : '<?php print(FB_API_ID); ?>',
        status : true,
        cookie : true,
        xfbml  : true
});
</script>
</body>
</html>

and set IFrame Size to Auto-resize in the settings tab.

And header('Location: ' . $url); won't work for whatever reason.

Enfeeble answered 8/5, 2011 at 20:33 Comment(8)

1) header won't work because you are working inside an iframe 2) you should wrap all FB related JS functions inside the window.fbAsyncInit method (I mean here the FB.init) – Quinonez 9/5, 2011 at 7:57

Unfortunately, not: I've tried your fbAsyncInit-suggestion (coming from developers.facebook.com/docs/reference/javascript ?) and it does not work with Google Chrome: the iframe content is just cut off at the bottom. – Enfeeble 9/5, 2011 at 8:11

+1 for your persistency, I will try your suggestion later, thank you – Enfeeble 9/5, 2011 at 9:6

And I also wonder, if the document.getElementById() that you suggest is a good choice for all browsers. Google Chrome prints a warning about it in the console. Maybe <script src="connect.facebook.net/en_US/all.js"> is on a safer side? – Enfeeble 9/5, 2011 at 9:17

A lot of browsers will complain about various things, but I suppose it's safe to use it like so and it would assure that the resize function will actually execute when the JS library is loaded. If this works for you tell me to add it as a solution – Quinonez 9/5, 2011 at 10:28

FB.Canvas.SetAutoResize, why did you put setSize only? – Caudill 9/5, 2011 at 11:7

@dragonjet, developers.facebook.com/docs/reference/javascript/… says, FB.Canvas.SetAutoResize is for cases, when content changes over time - and I only have a static logo pic, static flash game and 3 HTML-links. So I don't think I need it, seems to work ok without. – Enfeeble 9/5, 2011 at 11:39

@ifaour, tried your solution and it seems to work too - please post it as solution and you'll get the "candy" :-) – Enfeeble 9/5, 2011 at 11:45

I just put together a quite extensive tutorial on my blog, also using the PHP-SDK. Besides getting rid of those scrollbars I also show how to create a Fan-Gate and a simple Share-Button. I hope I can help some of you guys with that:

http://net-bites.de/facebook/tutorial-how-to-create-facebook-iframe-pages-for-timeline-width-810px-with-fan-gate-and-share-button/

Hawn answered 5/8, 2012 at 18:8 Comment(1)

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Gelya 28/9, 2012 at 11:17

My Sollution works every time! Make your body overflow hidden then before add this.

<div id="fb-root" class="fb_reset"><script async="" src="https://connect.facebook.net/en_US/all.js"></script></div>
   <script type="text/javascript">
       window.fbAsyncInit = function() {
           FB.init({appId: '293887700673244', status: true, cookie: true, xfbml: true, oauth: true});
           window.setTimeout(function() {
               FB.Canvas.setAutoGrow(); }, 250);
       };

       (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>

Rufusrug answered 22/7, 2014 at 15:48 Comment(0)

Recommended topics

Hot tags