admin管理员组

文章数量:1404624

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=".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 bees 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

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/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 bees 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

  • javascript
  • facebook
  • facebook-javascript-sdk
Share Improve this question edited Jun 16, 2012 at 15:59 Jason asked Jun 16, 2012 at 12:44 JasonJason 5426 silver badges24 bronze badges 2
  • You might to wait until FB.init pletes to call FB.Canvas.setSize() – rampr Commented Jun 21, 2012 at 6:38
  • did you have any luck with this? I can't make it work for me either... – Martin Schaer Commented Sep 29, 2012 at 20:09
Add a ment  | 

4 Answers 4

Reset to default 2

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./docs/reference/javascript/FB.Canvas.setDoneLoading/

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/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.

<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>

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.

本文标签： javascriptNeed help Facebook App and Page Tab height resizing using FBCanvassetSizeStack Overflow

版权声明：本文标题：javascript - Need help Facebook App and Page Tab height resizing using FB.Canvas.setSize - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744837697a2627732.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。