开发者

iframe height for Facebook page

The maximum height for an i开发者_高级运维frame page in Facebook appears to be 800px. Are there any options for changing that? I have seen some pages/apps that are deeper than 800px


This note has directions on how to do this. Set the app settings to auto-resize:

iframe height for Facebook page

Then call FB.Canvas.setSize() or FB.setAutoResize() to remove the scroll bars if they are still appearing.


Try this to the end of your iframe content:

      <div id="fb-root"></div>
  <script type="text/javascript"> 
   window.fbAsyncInit = function() {

   //Der folgende Code ändert die Grösse des iFrames alle 100ms 
    FB.Canvas.setAutoResize(100);

   };
   (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);  
   }());

  </script>


Andrew Smart: I was able to replicate your error here as per the height of a page app.

Using on of my page apps @ http://www.facebook.com/anotherfeed?sk=app_135669679827333

I used javascript to calulate the inner page height 7 seconds "7000ms" after the page is done loading to avoid errors. At the bottom of the page tab app you will see...

This page took 1.724007 seconds to load. W:520 x H:800 where the actual iframe is 5704px in height.

<iframe name="app_runner_4e581c03cfc387e71622269" id="app_runner_4e581c03cfc387e71622269" style="width: 520px; height: 5704px; " frameborder="0" src="http://static.ak.facebook.com/platform/page_proxy.php?v=4#app_runner_4e581c03cfc387e71622269"></iframe>

The page seems to return 800px as the height no matter how long the page is, i beleive this to be an error in the page_proxy.php, and a bug might be worth submitting to bugzilla.

The code i used for the page height:

<div id="pagestats"></div>
<script>
<!--                               Hide from non-JS browsers
    var scnWid,scnHei;
    if (self.innerHeight) // all except Explorer
    {
        scnWid = self.innerWidth;
        scnHei = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight)
        // Explorer 6 Strict Mode
    {
        scnWid = document.documentElement.clientWidth;
        scnHei = document.documentElement.clientHeight;
    }
    else if (document.body) // other Explorers
    {
        scnWid = document.body.clientWidth;
        scnHei = document.body.clientHeight;
    }
    setTimeout("document.getElementById('pagestats').innerHTML='W:'+scnWid+' x H:'+scnHei+'';",7000);
// -->
</script>


<script type="text/javascript">

window.fbAsyncInit = function() {

    FB.init({
        appId: 'APP_ID',
        status: false,
        cookie: true,
        xfbml: true
    });

    FB.XFBML.parse();

    FB.Canvas.setSize({ width: '520px', height: '1580px' });        

    FB.Canvas.scrollTo(0,0);
  };
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));

</script>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜