CODEWITHSUNDEEP
facebook
Erik Smith
Erik Smith

Reputation: 261

Facebook Canvas APP (Iframed) Auto-Height Resize

Been running into an issue lately with Facebook canvas iframe applications. I've set our settings to "auto-resize" and implemented the correct FB JS call to do the resizing of the height (to avoid unwanted scrollbars), but it doesn't seem to be working.

Has anyone else had this issue or come up with a solution?

Thanks!

Erik

Upvotes: 12

Views: 15540

Answers (7)

Roozbeh15
Roozbeh15

Reputation: 4167

Auto-resize doesn't work. It's a major bug that facebook has not fixed yet.

However, here's the code work around for the problem:

<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
    };
    (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
    </script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'>
</div>
<script type="text/javascript">
  window.onload = function(){
    FB_RequireFeatures(['CanvasUtil'], function(){
      FB.CanvasClient.setCanvasHeight('1500px');
    });
  };
</script>

Upvotes: 0

wesbos
wesbos

Reputation: 26317

If anyone is still having this problem, its because your FB.init() is never being called. In my case, I had it inside my jQuery document.ready function. dont do that!

Put this outside of your jQuery:

$(function() { ... jquery here... });

// do FB stuff
FB.init({appId: 'APP_ID', status: true, cookie: true });
FB.Canvas.setAutoGrow();

Upvotes: 0

gautamlakum
gautamlakum

Reputation: 12015

Before </body> tag, I have written following code.

<div id="fb-root"></div>
<script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({
                    appId: '<?php echo YOUR_APP_ID ?>',
                    cookie: true,
                    xfbml: true,
                    oauth: true
                });
                FB.Canvas.setAutoGrow(true);
            };
            (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>

And it is working fine for me.

It doesn't matter whether height is Fixed or Fluid in Advanced application settings.

FB.Canvas.setAutoGrow(true); was not working in my application, but I found that I missed the <div id="fb-root"></div> code. I just put it before <script type="text/javascript"> and got the issue resolved.

Upvotes: 15

Kon
Kon

Reputation: 27441

Roozbeh is on the right path with his answer. However, his code will most likely produce an error (at least in Firefox), as both the old and new SDKs are being referenced (and they don't play well with each other).

Also, just using the new SDK to adjust the height is super simple:

<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function () {
        FB.init({ appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true });
        FB.Canvas.setSize({ height: 890 });
    };
    (function () {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    } ());
</script>

Official documentation available here.

Upvotes: 2

Shaun Baker
Shaun Baker

Reputation: 591

Expanding on a couple of points noted already:

window.fbAsyncInit = function () {
        FB.init({ 
           appId: 'YOUR APP ID', 
           status: true, 
           cookie: true, 
           xfbml: true, 
           oauth: true 
        });
        FB.Canvas.setAutoGrow(true);
    };

This will allow dynamic changes in the applications height. Also setting an explicit width in your css like so can help as well:

html {
   width: 760px;
   overflow: hidden;
}

Upvotes: 3

barbolo
barbolo

Reputation: 3887

FB.Canvas.setAutoResize will be deprecated and you should use FB.Canvas.setAutoGrow as it does exactly what you want.

Upvotes: 2

Roy Toledo
Roy Toledo

Reputation: 643

Well ... auto-resize is buggy and only sometimes work

you can set it manually like this: FB.Canvas.setSize({ height: $('body').height() });

Upvotes: 0

Related Questions