What is the maximum iframe width of a facebook page? (July 2011)

Question

What is the maximum iframe width of a facebook page?

Solution 1

It was 520px.

As with a Canvas Page, the amount of space available to your app is bounded by the outer context of Facebook. Since your app is also loaded inside of Facebook Page, the space is smaller (520 pixels) than what is available to on a Canvas Page.

from FB docs (yes i know that doc about canvas and it's only mentions iframes, but i cannot find quickly reference to full iframe documentation)

Important Update

On the March 30th 2012, Facebook changed this to 810px, to match the new design of timeline.

And here you have a screenshot of the Facebook app, with width 810px.

Solution 2

It's 810 px wide. You don't have to worry about scrollbars if you use the following code...

<!--in head section-->
<script type="text/javascript">    
  window.fbAsyncInit = function() {    
    FB.Canvas.setSize();    
  }    
  // Do things that will sometimes call sizeChangeCallback()    
  function sizeChangeCallback() {    
    FB.Canvas.setSize();    
  }    
</script>

<!--at the bottom of your page right before the closing body tag-->

<div id="fb-root"></div>

<script src="http://connect.facebook.net/en_US/all.js"></script>

<script>    
  FB.init({    
    appId : '320332891360172',    
    status : true, // check login status  
    cookie : true, // this allow the server to access the session  
    xfbml : true // parse XFBML    
  });    
</script>

Solution 3

For future reference, you can set the frame width to be floating inside advanced settings of app. This allows you to have any width for your app. See http://developers.facebook.com/blog/post/549/

Comments

[Tomkay]

Its 520px with Overflow: Hidden (in the body). 503px if you use a vertical-scrollbar. –

[3Dom]

This is wrong. You cannot have a body width of 810px, or you will get horizontal scrollbars. This doesn't account for the additional margins imposed by Facebook. So dumb how nobody knows the answers to any of these facebook issues.

[Igor Milla]

@3Dom especially for you adding a screenshot of some test facebook app, with body width 810px, and as you can see no horizontal scrollbars.