Facebook: Fluid Canvas Layout f. Apps & Games

Two weeks ago Facebook announced support for fluid canvas-layouts on their blog. Since not all developers have this new option available yet (it seems to be rolled out together with the new real-time app-activity-stream in the right sidebar), here’s a quick overview on these changes.

Since the beginning of time (or rather since platform was first made available in 2007), the Facebook application-canvas has always been fixed to 760px width, content has been centered if the browser window was any larger. Fluid layouts abolish this limitation for the first time. To activate fluid layouts, go to the developer-app:

You’ll notice new Canvas settings to set both “width” & “height” to fluid. The “height”-setting basically corresponds to the old setting for “auto-resizing iframes”, so you will most probably already have this set to “fluid” (you’ll still need the JavaScript-call FB.Canvas.setAutoResize(); to do the actual vertical resizing tough). The “width”-setting is entirely new, and has to be set to “fluid” to enable flexible layouts (fixed layouts still we be the default).

So, how do fluid canvas layouts look and feel? We’ve prepared a Demo-App at http://apps.facebook.com/superfluidappcanvas/, however if the new layout-option hasn’t been rolled out for your user-account, this app will still be displayed in fixed, 760px width! If fluid layouts are enabled, the content will be rendered like this:

  • Content of canvas is left-aligned
  • Canvas grows dynamically with size of browser window (width of canvas = width of viewport – 256px for the sidebar)
  • No Margin on left, top or right (which takes a bit getting used to)

If you decrease the browser window’s width, the canvas-width is reduced down to 774px minimum:

Again, here is how the canvas would look with fixed-layout enabled (or, if fluid layouts are not enabled for you yet):

While we think the no-margins canvas, which btw. is also changing for fixed width apps, looks a bit strange (especially with rounded corners on your canvas-layout), the new fluid layout certainly gives developers more flexiblity. While it probably is mostly aimed at games, it might be a good solution to integrate existing web-apps/sites which can’t be easily trimmed down to 760px. What do you think, are you going to use fluid layouts on your Facebook-apps?

About Author

Michael Kamleitner

Michael Kamleitner is CEO & Product Manager at Swat.io, a Social Media Management solution that’s helping companies to improve their customer support & content management on Facebook, Twitter, Instagram and others. Swat.io is currently used by companies such as 3Österreich, Hitradio Ö3, ÖBB, Focus Online and Burda Intermedia. Follow Michael on Twitter, Facebook or Google+!

Comments

    • Hi Bobby!

      Of course, media queries work within fb iframes as expected, as long as the fb-iframe itself is resizeable.

      do you have any specific problems?

    • The article you linked to is about seamless iframes. This does not apply to the Facebook app iframe, because it does not have the “seamless” attribute set.

      In case you are not talking about the Facebook iframes, but about an iframe that you have control over, the solution is very simple: Remove the “seamless” attribute!

      • By bobbynkolev on

        It’s about FB iframe and issue is not the same, but similar. @media queries are not working because they detect the width of the fb container of the iframe, which is set to min-width: 1020px…

Leave a Reply

Facebook Twitter Google+ Foursquare SlideShare

Send this to friend