FB.Canvas.setSize is not working

Question

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

 <body style="margin:0; padding:0; border:0; background-color:#000000;width:1500px">

    <div id="fb-root"></div>
            <script>
              window.fbAsyncInit = function() {
                 FB.init({
                   appId  : 'xxxxxxxxxxxxx',
                  status : true, // check login status
                  cookie : true, // enable cookies to allow the server to access the session
                  xfbml  : true,  // parse XFBML
                   // channelUrl  : 'http://www.yourdomain.com/channel.html', // Custom Channel URL
                   oauth : true //enables OAuth 2.0
                });

                FB.Canvas.setSize({width:1200});

               };

              (function() {
                var e = document.createElement('script');
                e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);
              }());
            </script>

     <div id="allContent" style="background-color: #0000FF; height:50%;width:100%">
        <div id="output" style="color: #FFFFFF;" />
     </div>

  </body>
</html>

I would like to expand my canvas page width to 1200, but my code seems fails to work, because the canvas width is still 760 (I did set 'Canvas Width' to fluid in Canvas setting), can anyone tell me what mistakes I'd made? my code is as below:-

Thanks everyone, and have a nice day.

score 1 · Answer 1 · answered Apr 13 '12 at 02:43

SetSize hasn't been deprecated but SetAutosize has.

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/

There does however seem to be a bug where SetSize and SetAutoGrow isn't working properly, details can be found here: http://developers.facebook.com/bugs/322561887802154. It is all rather frustrating!

score 0 · Answer 2 · edited Apr 13 '12 at 18:51

0

Most people forget to set up their secure https:

Page Tab URL:            http://...
Secure Page Tab URL:     https://...

Check your url, just in case

edited Apr 13 '12 at 18:51

Msonic

1,456
15
25

answered Apr 13 '12 at 17:01

test

2,429
15
44
81

score 0 · Answer 3 · answered Mar 07 '12 at 06:44

0

I think that setSize has been deprecated, try using autoGrow and setting the width of you page using CSS.

window.fbAsyncInit = function () {
     FB.init({
         appId  : 'xxxxxxxxxxxxx',
         status : true, // check login status
         cookie : true, // enable cookies to allow the server to access the session
         xfbml  : true,  // parse XFBML
      // channelUrl  : 'http://www.yourdomain.com/channel.html', // Custom Channel URL
         oauth : true //enables OAuth 2.0
      });

        FB.Canvas.setAutoGrow(true);
    };

Then You can set your body width to 1200 in your css.

answered Mar 07 '12 at 06:44

Ben

2,661
28
31

I'd tried your coding, but the result is still the same...is anything I didn't do before the coding? – 風吟月 Mar 07 '12 at 07:44
you must also set the canvas width and height to "fluid" inside your app settings (under Advanced). You can also increase the timeout before autoGrow runs - if you page takes a long time to load. You can pass in the number of miliseconds to wait - by default it's 100. e.g: FB.Canvas.setAutoGrow(200); – Ben Mar 07 '12 at 11:55

FB.Canvas.setSize is not working

3 Answers3