Question

Let’s start from the beginning.

The situation:

I have an app. When I go to the app searching by name (smart city project) from the Facebook main search bar, I see the app loaded inside Facebook, and a single scroll bar to navigate the content (https://apps.facebook.com/smartcityproject/). All OK here.

When I go to the page (https://www.facebook.com/smartCanada) and click the app tab, it takes me to the app inside Facebook too, but this Facebook context is diferent (https://www.facebook.com/smartCanada/app_253415468099353). Here we have a main scroll from Facebook, and a inner scroll from the page iframe.

The problem:

I must get only one scroll.

The documentation (and several posts, blogs and forums) says I can use FB.Canvas.setSize or setAutoGrow (https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/), but I get the following javascript error from using those methods:

Uncaught TypeError: Object #<Object> has no method 'setAutoResize'

in file connect.facebook.net/en_US/all.js, line 74

Questions:

Anyone knows what I’m doing wrong? That ‘setAutoResize’ method souldn’t be in Facebook libraries? I must wait some script to load? Is the method actually working or it isn’t? Is there another way to change that iframe height?

Thanks.

Answer 1

The problem is your script stops working when it comes to this block of code:

<script type="text/javascript">
    var userLanguage = '';

    window.fbAsyncInit = function(){

        // ...

        FB.Canvas.setAutoResize();

        // ...
    };

    // Load the SDK Asynchronously
    // ...
</script>

FB.Canvas.setAutoResize(); is deprecated by now, so the JavaScript throws an error. You need to replace this line with FB.Canvas.setAutoGrow();, or remove it.

Also there’s a second error in your script, when it comes to:

<script type="text/javascript">
    jQuery(document).ready(function() {
        FB.Canvas.setAutoGrow();
    }
</script>

Change it to:

<script type="text/javascript">
    jQuery(document).ready(function() {
        FB.Canvas.setAutoGrow();
    })
    // Closing brace was missing!!
</script>