Q:

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

A:

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. 

A:

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;
}

