How to resize Facebook Canvas app (iFrame) correctly?

Question

I need to adjust canvas size after updating content of a page. I can do it explicitly by

FB.Canvas.setSize({ width: 760, height: 1480 });

howev

Answer 1

We have pages in our iframe that append content to the page and then allow the user to refresh the content within the page in place. In these cases, we saw the same thing, where the content would not shrink when appropriate.

FB.Canvas.setSize() calls _computeContentSize, which is shown below:

_computeContentSize: function() {
  var body = document.body,
      docElement = document.documentElement,
      right = 0,
      bottom = Math.max(
        Math.max(body.offsetHeight, body.scrollHeight) +
          body.offsetTop,
        Math.max(docElement.offsetHeight, docElement.scrollHeight) +
          docElement.offsetTop);

  if (body.offsetWidth < body.scrollWidth) {
    right = body.scrollWidth + body.offsetLeft;
  } else {
    FB.Array.forEach(body.childNodes, function(child) {
      var childRight = child.offsetWidth + child.offsetLeft;
      if (childRight > right) {
        right = childRight;
      }
    });
  }
  if (docElement.clientLeft > 0) {
    right += (docElement.clientLeft * 2);
  }
  if (docElement.clientTop > 0) {
    bottom += (docElement.clientTop * 2);
  }

  return {height: bottom, width: right};
},

The problematic line is here:

bottom = Math.max(
      Math.max(body.offsetHeight, body.scrollHeight) +
        body.offsetTop,
      Math.max(docElement.offsetHeight, docElement.scrollHeight) +
        docElement.offsetTop);

Even if the content inside your iframe has shrunk, the value of body.offsetHeight will not shrink.

To solve this, we made a custom version of the computeContentSize function that only consults the docElement for height, like so:

function rfComputeContentSize() {
  var body = document.body,
      docElement = document.documentElement,
      right = 0,
      bottom = Math.max(docElement.offsetHeight, docElement.scrollHeight) + docElement.offsetTop;

  if (body.offsetWidth < body.scrollWidth) {
    right = body.scrollWidth + body.offsetLeft;
  } else {
    FB.Array.forEach(body.childNodes, function(child) {
      var childRight = child.offsetWidth + child.offsetLeft;
      if (childRight > right) {
        right = childRight;
      }
    });
  }
  if (docElement.clientLeft > 0) {
    right += (docElement.clientLeft * 2);
  }
  if (docElement.clientTop > 0) {
    bottom += (docElement.clientTop * 2);
  }

  return {height: bottom, width: right};
}

Anytime we want to resize and know that the content could shrink we'll use the custom function to pass content to setSize (e.g. FB.Canvas.setSize(rfComputeContentSize())), and anytime we know that the content will only grow, we'll use the standard FB.Canvas.setSize() function.

Note that we were using setAutoGrow() and I didn't check, but am assuming that it uses the same function to determine size. We disabled our call to setAutoGrow() and will have to be vigilant about calling setSize() at approrpriate times.

Logged this bug with Facebook: https://developers.facebook.com/bugs/228704057203827

Answer 2

We ran into an issue where their FB.Canvas functions didn't work, although everything was properly initialized, because they’re using ‘IFRAME’ instead of iframe in their cross-domain JS setup, hence no XHTML compatibility.

We fixed this by prototyping our own createElement function and overriding theirs. Just put this right after you include Facebooks all.js:

document.__createElement = document.createElement;
document.createElement = function(tagName) {
            return document.__createElement(tagName.toLowerCase());
}

Answer 3

Bobby's answer is very good. Only thing I would add to it is that some people have had success getting the page to shrink by doing the following:

FB.Canvas.setSize({ width: 760, height: 10 });

And then follow it with:

FB.Canvas.setAutoResize();

You don't have to use 10, just something smaller than the minimum size of your page. Then the FB.Canvas.setAutoResize() should go ahead and make it the proper height again and continue to update. The only time you need to call FB.Canvas.setSize({ width: 760, height: 10 }); again would be if the content shrunk again.

The danger of doing this is that if the FB.Canvas.setAutoResize(); doesn't work, you could have content that is cut off.

Answer 4

I tried to use FB.Canvas.setSize(e); to resize my app, but it did not resize at all.

I took a look in the Facebook Javascript and found out, that FB.Canvas.setSize calls the FB.Arbiter.inform('setSize',e) function.

If I call the FB.Arbiter.inform('setSize',{ width: 760, height: 1480 }) function right from my code, the canvas resizes correctly.

Answer 5

None of this worked for me. Make sure to type this before the closing tag.

<div id="fb-root"></div>
<script type="text/javascript"> 
 window.fbAsyncInit = function() {

 //Der folgende Code ändert die Grösse des iFrames alle 100ms 
FB.Canvas.setAutoResize(100);

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

</script>    

Answer 6

Don't write your own function for timed Auto-resize. Fb has one:

FB.Canvas.setAutoResize();

If you know when you need to resize it use

FB.Canvas.setSize()

So, if you want to make is smaller when you click a link, stick it in a function and then call that function later like:

function sizeChangeCallback() {
    FB.Canvas.setSize();
  }

//start some function or on click event - here i used jquery
$("#something").click(function() {
  sizeChangeCallback()
});

You don't need to set an explicit height, but sometimes you can have trouble with dynamic xfbml elements like the comments plugin. Try using an event subscribe callback:

   FB.Event.subscribe('xfbml.render', function(response) {
    FB.Canvas.setAutoResize();
  });

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

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

http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/