Home/ Questions/Q 9233615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T06:35:48+00:00

I have the problem that my facebook app page doesn’t resize the height. I

  • 0

I have the problem that my facebook app page doesn’t resize the height. I know there are a lot of questions from people that have similar problems. But I’ve tried setting FB.Canvas.setSize(), FB.Canvas.setAutoGrow() and a function that “should” resize the canvas page each 2 seconds and nothing works.

EDIT

I now tried it with a minimal code that should work (as fas as I understand it) but it don’t.

Here is the code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">body { overflow: hidden; }</style>
    </head>
    <body>
        <div id="fb-root"></div>
        <script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script> 
        <script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({
                    appId: "xxxxxxxxxxxx",
                    cookie: true
                });
            };
            window.onload = function() {
                FB.Canvas.setAutoGrow(100);
            }
        </script>
        <div style="height: 1000px; width: 20px; background-color: #006;"></div>
        <div>End</div>
    </body>
</html>

Here is a screenshot of the app settings:

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I could solve this issue and this are the changes I mage:

    • Removing the script tag that loads the facebook lib.
    • Adding the JS code to load the facebook lib.
    • Moving this code right below the starting body tag.

    I don’t know whether all of those steps are necessary.

    Here is the code that works:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">body { overflow: hidden; }</style>
    </head>
    <body>
        <div id="fb-root"></div>
        <script>
            window.fbAsyncInit = function() {
                FB.init({
                    appId: "xxxxxxx",
                    status : true,
                    cookie: true
                });
                FB.Canvas.setAutoGrow();
            };

            (function(d, debug){
                var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
                if (d.getElementById(id)) {return;}
                js = d.createElement('script'); js.id = id; js.async = true;
                js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
                ref.parentNode.insertBefore(js, ref);
            }(document, /*debug*/ true));
        </script>
        <!-- page content -->
    </body>
</html>
    • 0