CODEWITHSUNDEEP
facebookresize
bflemi3
bflemi3

Reputation: 6790

facebook: FB.Canvas.setSize not working

I have created a facebook app that will be displayed on my companies fan page as a tab. The app renders at 951px so it doesn't fit in the default height of the fan page tab. I've read facebook's horrible documentation for their js sdk and have tried so many different variations - all of them not working at all. Here's my current attempt to resize the fan page tab to fit my app...

<head>
    <!-- css / js / meta info here -->
    <script type="text/javascript">
        window.fbAsyncInit = function() {
            FB.Canvas.setSize();
        }
        function sizeChangeCallback() {
            FB.Canvas.setSize();
        }
    </script>
</head>
<body>
    <!-- content goes here -->
    <div id="fb-root">
        <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
        <script type="text/javascript">
            FB.init({
                appId:'xxxxxxxxxx',
                status:true,
                cookie:true,
                xfbml:true,
            });
        </script>
    </div>

</body>

I've also tried async init and using setAutoResize() with no luck.

Thanks for any and all suggestions... B

Upvotes: 9

Views: 21800

Answers (10)

Luis Ortega Araneda
Luis Ortega Araneda

Reputation: 875

This is how I initialise my facebook applications:

<div id="fb-root"></div>
<script type="text/javascript" charset="utf-8">
  window.fbAsyncInit = function() {
    FB.init({
      appId  : appId,
      status : true,
      cookie : true, 
      xfbml  : true  
    });
    // Additional initialization code such as adding Event Listeners goes here
    FB.Canvas.setSize({ width: 810, height: 620 }); // ******* THIS WORKS.
  };
  (function(d) {
    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
  }(document));
</script>

Upvotes: 0

Philip
Philip

Reputation: 1

Found a solution to reduce the height again if the content sites of your App have different heights. Usually the height increases easily but doesn't decrease to a smaller site again. 

<head>

<script type="text/javascript">
    window.fbAsyncInit = function()
    {
        FB.Canvas.setSize({ width: 810, height: 920 });  
        /*{ set here the needed site height }*/
    }
</script>
</head>

<body>

<div id="fb-root"></div>
   <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
   <script type="text/javascript">

   FB.init({
       appId: 'App ID', /*{ set here your App ID }*/
       status: true, 
       cookie: true, 
       xfbml: true
   });

  /* Init fb Resize window */

   /* Completly removed now in JS SDK*/
   FB.Canvas.setAutoResize(7); 

   /* As of Jan 2012 you need to use */
   FB.Canvas.setAutoGrow(7);

</script>
</body>

Upvotes: 0

sbaechler
sbaechler

Reputation: 1429

It usually works if Facebook can calculate the height of your page. However if you have a responsive design this is not possible. I am using a hack that does the job using jQuery to calculate the height of the wrapper div and then explicitly set it:

FB.Canvas.setDoneLoading( function(result) {
    FB.Canvas.setSize({height: $('#wrapper').height() });
});

This should go in your FB.init() method.

Upvotes: 2

joost
joost

Reputation: 6659

You might need to wait for images to be loaded. Otherwise the FB.Canvas.setSize(); might fire too soon and not include image sizes.

With jQuery use:

$(window).load(function(){
  FB.Canvas.setSize();
});

Upvotes: 0

Kita
Kita

Reputation: 1558

I just spent over an hour trying to fix this in my app and I wanted to mention a couple of basics that you have to follow for this to work.

  • You have to include a div with an id of fb-root before you include the all.js file and before any JS code using the FB object.
  • The all.js file should be included below the fb-root div and above any actual JS code using the FB object
  • Finally, any JS code using the FB object should be below the fb-root div and the all.js include

There were no errors in my code, but it was refusing to work because I was including all.js and my JS code in the <head> element and my fb-root div was in the <body>. Here's what I had to change it to:

...
<head>
<!-- include jQuery so we can use window.load below -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
...
</head>
<body>
    <!-- the div has to come first which forces the JS include and code to be put below it -->
    <div id="fb-root"></div>
    <!-- then we have to include the all.js file -->
    <script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <!-- and finally we can use the FB JS SDK and it will actually work :) -->
    <script type="text/javascript" charset="utf-8">
        FB.init({
            appId: '...', 
            status: true, 
            cookie: true, 
            xfbml: true
        });

        jQuery(window).load(function(){
            //resize our tab app canvas after our content has finished loading
            FB.Canvas.setSize();
        });
    </script>
...

Obviously the 3 elements I mentioned don't have to be right after each other, but they do have to show up in this order in your source code. This really threw me for a loop so hopefully this will save someone some time and frustration :)

Upvotes: 7

Waqar Alamgir
Waqar Alamgir

Reputation: 9968

<head>
<script type="text/javascript">
window.fbAsyncInit = function()
{
    FB.Canvas.setSize();
}
</script>
</head>

.
.
.
.

    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
    <script type="text/javascript">

    FB.init({
        appId: 'xxxxxxxx', 
        status: true, 
        cookie: true, 
        xfbml: true
    });

    /* Init fb Resize window */

    /* Completly removed now in JS SDK*/
    /* FB.Canvas.setAutoResize(7); */

    /* As of Jan 2012 you need to use */
    FB.Canvas.setAutoGrow(7);

    </script>
</body>
</html>

Upvotes: 17

350D
350D

Reputation: 11439

I'm found the solution for fix issues when using jQuery and FB.setSize() - if you set vars definition before $(function(){}) (jQuery DOM ready) - setSize doesn't work. If all vars definition located inside $(function(){ all vars HERE }) - setSize starts working!

Upvotes: 0

Ricebandit
Ricebandit

Reputation: 353

I also noticed the setSize call fails if the user's "Secure Browsing" setting is disabled. This may not be an issue for most, since the setting is enabled by default, but if you're running into this issue and now have an almost-bald head (like I do), check this setting on the account you're testing with.

Upvotes: -1

salexch
salexch

Reputation: 2704

if for some reason window.name is set the FB.setAutoSize wont work, http://bugs.developers.facebook.net/show_bug.cgi?id=19720 in my case its connected somehow to jquery $.data

    window.fbAsyncInit=function(){

        FB.Canvas.setSize = function(b) { 
            if (typeof b!="object") 
                b={};
            b=b||{};
            if (b.width==null||b.height==null)
                b=FB.copy(b,FB.Canvas._computeContentSize());
            b=FB.copy(b,{frame:'iframe_canvas'});
            if (FB.Canvas._lastSize[b.frame]) {
                var a=FB.Canvas._lastSize[b.frame].height;
                if(FB.Canvas._lastSize[b.frame].width==b.width&&(b.height<=a&&(Math.abs(a-b.height)<=16)))
                    return false;
            }
            FB.Canvas._lastSize[b.frame]=b;FB.Arbiter.inform('setSize',b);
            return true;
        }

        FB.init({
            appId:APP_ID, //your app id (Numeric)
            status:true,
            cookie:true,
            xfbml:true
        });

        FB.Canvas.setAutoResize()
    };

Upvotes: 0

Sascha Galley
Sascha Galley

Reputation: 16091

here is what I use:

<head>
    ...
    <script type="text/javascript">
        function facebookInit(appId) {
            FB.init({
                appId  : appId,
                status : true,
                cookie : true,
                xfbml  : true
            });
        }

        function increaseIframeSize(w,h) {
            var obj = new Object;
            obj.width=w;
            obj.height=h;
            FB.Canvas.setSize(obj);
        }
    </script>
    <script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
</head>

<body>
    <script>
        increaseIframeSize(720,800);
        facebookInit(appId);
    </script>
    ...
</body>

Upvotes: -1

Related Questions