Back to News for Developers

How-To: Build an app on Facebook with Fluid Canvas

August 30, 2011ByConstantin Koumouzelis

A few weeks ago we announced Fluid Canvas which allows you to expand the size of your apps based on the user’s screen resolution. It makes your app left aligned so it takes up the full height and width of the user’s browser. You can see some of the implementations in our games gallery.

Earlier this week we rolled this out to all our users, and are now making some changes to the app settings as well as providing a How-To to make it easy for you to get started with taking advantage of Fluid Canvas.

Dev App Settings

First we are changing the names of the app settings to make them clearer. You can access these settings in the Dev App, in the Advanced Tab under Canvas settings. Note that none of these changes should effect your existing app functionality or defaults as they are simply renames of the existing settings.



Canvas Width

You can set your Canvas Width to "Fixed (760px)", the default setting, which makes your app have a fixed width of 760 pixels. You can also set your width to "Fluid" which means that we set the iframe width to 100%. Your content will then be left-aligned and resize to fill the page as the user changes the width of their browser.

Canvas Height

You can set the Canvas Height to Fluid, the default setting, in which case the iframe height is set to 100% which means that it grows the fill the page and shows scroll-bars if your content exceeds the height of the page.

You can also set the Height to ‘Settable’ in which case the height of the Canvas defaults to 800 pixels. You can change the height of the iframe by calling the FB.Canvas.setSize() method to fit your content. You can also call FB.Canvas.setAutoResize() to enable the ‘Auto-resize’ functionality where we will poll for the height of your content and adjust the height of the parent iframe to match accordingly. Note these method only work with Canvas Height set to Settable.

Enabling Fluid Canvas for your App

To enable your app on Facebook to take advantage of Fluid Canvas you should first set both Canvas Width and Canvas Height fields to ‘Fluid’ in the app settings. Then you need to make certain changes to your app to ensure that your content can accommodate Fluid Canvas.

HTML example

If you are writing a HTML app, then you basically need to set the height of your div to 100%. Here is a simple example that enables a Fluid Canvas in HTML. If you need to reorient any UI elements within your HTML app, you can do so via the window.onresize event as with a normal HTML page.

<html>
 <head>
   <title>Fluid Width HTML Example </title>
 </head>

 <body style="margin:0; padding:0; border:0; background-color:#000000">
 
     <div id="allContent" style="background-color: #0000FF; height:100%">
        <div id="output" style="color: #FFFFFF;" />
     </div>

     <div id="fb-root"></div>
     <script src="http://connect.facebook.net/en_US/all.js"></script>
     <script type="text/javascript">
     FB.init({
            appId  : 'APP ID',
        });

     function echoSize() {
              document.getElementById('output').innerHTML = 
                 "HTML Content Width: " + window.innerWidth + 
                 " Height: " + window.innerHeight;
              console.log(window.innerWidth + ' x ' + window.innerHeight);
        }

       echoSize();
       window.onresize = echoSize;
     </script>
  </body>
</html>

Below are some screenshots illustrating the results of using both Canvas Height and Canvas Width settings as "Fluid". The blue content is a <div> with height set explicitly via CSS, the body background color is set to black.

 <div id="allContent" style="background-color: #000FF; height:xxxx">
    <div id="output" style="color: #ffffff;" />
 </div>
Height of divCanvasResult
100%The div fills the entire space available
300pxThe div fills only part of the space available
2000pxThe div fills the entire space and user sees a scrollbar for the overflow content.

Flash example

If you are building a Flash app you will first need to set the dimensions of your <object> tag to 100% for both Height and Width, this will allow your Flash SWF to fill the entire space available to it. Next in your Actionscript code you need to handle the Event.RESIZE event for the stage object which is invoked every time the user changes the size of the SWF and then orientate your UI elements accordingly.

Canvas Page HTML:

<html>
 <head>
     <title>Fluid Width Flash Example</title>
 </head>

 <body style="margin:0; padding:0; border:0; background-color: #000000">
   <div id="allContent">
     <div  id="flashContent">
             <h1>Example SWF</h1>
             <p>Alternative content</p>
             <p><a href="http://www.adobe.com/go/getflashplayer"><img 
                  src="http://www.adobe.com/images/shared/
                         download_buttons/get_flash_player.gif"
                  alt="Get Adobe Flash player" /></a></p>
     </div>
   </div>   

   <div id="fb-root"></div>
   <script 
    src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" 
    type="text/javascript">
   </script>
   <script src="http://connect.facebook.net/en_US/all.js"></script>
   <script type="text/javascript">
    FB.init({
            appId  : 'APP ID',
        });

       function echoSize() {
            document.getElementById('allContent').style.height = "100%";
            console.log(window.innerWidth + ' x ' + window.innerHeight);
     }

    window.onresize = echoSize;

    //Flash display
    var flashvars = {};
    var params = {
            menu: "false",
            scale: "noScale",
            allowFullscreen: "true",
            allowScriptAccess: "always",
            bgcolor: "#FF0000"
         };
    var attributes = {
            id:"ExampleSWF"
        };
     
    swfobject.embedSWF(
            "example.swf",
            "flashContent",
            "100%",
            "100%",
            "10.0.0",
            "expressInstall.swf",
            flashvars,
            params,
            attributes
       );
   </script>
 </body>
</html>

Actionscript:

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.text.TextFormat;

    public class Main extends Sprite {
    private var _textBox:TextField = null;
    public function Main():void {
          if (stage) {
         init();
          }
           else {
          addEventListener(Event.ADDED_TO_STAGE, init);
          }
       }
        
        private function init(e:Event = null):void {
       removeEventListener(Event.ADDED_TO_STAGE, init);
            
       this._textBox = new TextField();
       this._textBox.x = 10;
       this._textBox.y = 10;
       this._textBox.textColor = 0xFFFFFF;
       this._textBox.width = 200;
            
       this.addChild(this._textBox);
       echoSize();
            
       stage.scaleMode = StageScaleMode.NO_SCALE;
       stage.align = StageAlign.TOP_LEFT;
       stage.addEventListener(Event.RESIZE, this.echoSize);
          }
        
       private function echoSize(e:Event = null):void {
     this._textBox.text = "SWF Width: " + stage.stageWidth
             + " Height: " + stage.stageHeight;     
     var myTextFormat:TextFormat = new TextFormat(null, 16);
     this._textBox.setTextFormat(myTextFormat);
        }   
    }
}

We hope the above How-To and changes to Dev App will enable you to start building with Fluid Canvas and help create more engaging and immersive experiences for your users. Please provide feedback or other thoughts in the comments below.


Tags: