CODEWITHSUNDEEP
facebookcanvassdk
Dan H
Dan H

Reputation: 3623

Change Facebook canvas size after its already been set with Canvas.setSize

This is not a scrollbars question. Here is the thing:

  1. You load your Facebook canvas app and do a FB.Canvas.setSize({height:900}); (works)

  2. You move to another section of your app (some link) and then do a FB.Canvas.setSize({height:1300});

  3. The second step doesn't work. The app iframe remains at 900px height.

What I need, is to change the canvas height dynamically after it has already been set. According to the Facebook documentation, this should work. They do not specify if you can or cannot change the canvas height once it has been set.

I've tried the same method on page tabs and it works, I can properly resize the height of the tab using setSize(), however, it seems like canvas pages behave differently (?).

This is the code I am using, right after opening the body tag:

<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
    FB.init({appId: "XXXXXXXXXXXXXXXXXXXXX",
                       status: true,
                       cookie: true,
                       xfbml: true});       
};
(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);
}());   
window.fbAsyncInit = function() {
    FB.Canvas.setSize({height:1300});
}
//-->
</script>

The designer made a Canvas app using different heights and so far its has been a pain to implement.

Upvotes: 0

Views: 898

Answers (1)

Floyd Wilburn
Floyd Wilburn

Reputation: 1842

You're assigning different things to window.fbAsyncInit in two different places. You should just get rid of the second assignment and move the FB.Canvas.setSize call to right after the FB.init call (or replace the FB.init call, as you don't need it if you're only using the SDK for resizing; obviously keep it if you are doing auth stuff with it as well).

Upvotes: 1

Related Questions