Search code examples
asp.netfacebookfacebook-c#-sdkfacebook-iframe

Facebook application height issue

In my facebook iframe application, my home page is little long (about 1500px) but the secondary pages are smaller in height.

I see there is a lot of white space between my footer and the facebook's footer in the secondary pages.

I checked the iframe source and found the height property is set correctly, but there is another height value inside style tag which is retaining the homepage height.

<iframe class="canvas_iframe_util noresize" frameborder="0" scrolling="no" id="iframe_canvas" name="iframe_canvas" src='javascript:""' height="600px" style="height: 1566px; overflow-y: hidden; "></iframe>

Below is the code I am using to resize the frame (which is in the master page)

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({
        appId: 'my app',
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true// parse XFBML
    });

    FB.Canvas.setAutoResize(7);

 </script>

My secondary pages are dynamic in size, so I can not use a fixed height. Any help to get ride the extra white space on my secondary pages are highly appreciated.

Thanks

Solution

  • I did a Facebook Canvas App the other day and I wrote this little code to take care of the height issue.

    <script>
    FB.Canvas.setSize({ height: document.getElementById('wrapper').offsetHeight });
</script>

    Of course this code demands a <div id="wrapper"></div> to wrap the whole page. You have to make sure all the things in the DOM has loaded before you fire it tho. That's why I put it just before the </body>. But there can sometimes be a bit of a problem with images with unspecified height. So either you specify the height of all your images or you could fire it with the help of jQuery and document.ready().