CODEWITHSUNDEEP
javascriptfacebookfacebook-javascript-sdk
Jason
Jason

Reputation: 542

Need help Facebook App and Page Tab height resizing using FB.Canvas.setSize

I want to resize the Facebook app height and page tab height automatically upon page load, but it isn't working.

I'm sure there's something simple I'm doing wrong, but I can't identify it.

Here is the simplified code I'm using: (++++ indicates cut out code)

<!DOCTYPE ++++ >
<html>
 <head>++++</head>
 <body>
  <div id="container">++++</div>
  <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: '++++', status: true, cookie: true, xfbml: true });
   FB.Canvas.setSize();
  </script>
 </body>
</html>

Thanks in advance!

Update:

Under Settings, Advanced, Canvas Settings, Canvas Height, I checked the fixed option. (As far as I can see, there is no longer a Settable option, presumably it has been renamed.)

My app has fully loaded by the time I called that method.

From a little investigation, I can see that the app height, and page tab height becomes the correct size to begin with, then increases almost immediately to a height of 1200px. (And my fixed height is set at 600px.

Update: On the iframe code it says the following: <iframe src="++ommited++?signed_request=++ommited++" frameborder="0" scrolling="AUTO" style="width:810px; height:1200px;padding:0px; margin:0px" marginheight="0px" marginwidth="0px"></iframe>. As you can see it says height:1200px; which appears to be the problem.

Update: It appears that the app defaults to the size set in my app settings, then it immediately resizes to 1200px. This occurs even when I remove the Facebook code for changing the app and page tab height.

Any suggestions? Thanks

Upvotes: 2

Views: 6846

Answers (4)

Elminson De Oleo Baez
Elminson De Oleo Baez

Reputation: 620

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame {
    zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}
</style>

Upvotes: 1

Philip
Philip

Reputation: 5021

You have to check if Canvas is loaded with FB.Canvas.setDoneLoading()

FB.Canvas.setDoneLoading( function(response) {
    console.log(response.time_delta_ms);
    FB.Canvas.setAutoGrow();
});

FB Documentation: https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setDoneLoading/

Upvotes: 2

Shekhar
Shekhar

Reputation: 50

I have had this type of issue to resize my page tab inside an FB Page. In my case I did the following changes in my website's page, which I wanted to be rendered on my FB Page, as tab:

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

<body>
    ......
    ......
    ......
    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
    <script type="text/javascript">
        FB.init({
        appId: 'Your_App_Id', 
        status: true, 
        cookie: true, 
        xfbml: true
        });
        FB.Canvas.setAutoGrow();
    </script>
</body>
</html>

Hope it may help you.

Upvotes: 1

C3roe
C3roe

Reputation: 96316

First of all, make sure you have the canvas height set to „Settable (Default: 800px)” in your app settings, otherwise it’s not supposed to work.

Then, has your app fully loaded by the point you’re calling the method (in regards to all images, css etc. that may influence the page height)?

Otherwise, you might try FB.Canvas.setAutoGrow – that periodically checks your page’s height and adapts the iframe height.

Upvotes: 0

Related Questions