Altura de la aplicación de la página Timeline atascada en 800px

Estoy desarrollando una aplicación para una página de Facebook con el diseño de "línea de tiempo", y quiero que el alto de la aplicación se adapte al contenido, pero la altura de la aplicación se fija en 800px.Altura de la aplicación de la página Timeline atascada en 800px

La configuración actual de la aplicación muestra que la altura está configurada en "fluido", pero también he intentado fijar la altura a valores aleatorios y no he presenciado ningún cambio.

¿Cómo consigo el alto de mi aplicación para escalar a su contenido? Gracias por cualquier respuesta.

Actualización: Por lo tanto, añadir esto a la etiqueta de mi cuerpo funcionó.

<body onload="FB.Canvas.setSize({width: 810, height: 910})"> 
<div id="fb-root"></div> 
<script> 
(function() { 
    var e = document.createElement('script'); 
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOURAPPID; 
    e.async = true; 
    document.getElementById('fb-root').appendChild(e); 
}()); 
</script>

Pero tengo cero idea por qué funcionó, así que supongo que voy a cambiar mi pregunta de '¿qué hace el código anterior?' entonces realmente puedo entender qué pasos dar la próxima vez. Voy a poner esto como una respuesta por ahora para cerrar la pregunta sin embargo.

Fuente

2012-03-08 Tuck

Esta es la forma correcta de configurar las cosas, solo tuve que mirarlo un rato y leer la documentación demasiadas veces. Poniendo lo siguiente debajo del divisor fb-root funcionó como un campeón.

window.fbAsyncInit = function() { 
    FB.init({ 
     appId: 'YOURAPPID', // App ID 
     channelUrl: '/channel.html', // Channel File 
     status: true, // check login status 
     cookie: true, // enable cookies to allow the server to access the session 
     xfbml: true // parse XFBML 
    }); 
    FB.Canvas.setAutoGrow(); //Resizes the iframe to fit content 
}; 
// Load the SDK Asynchronously 
(function (d) { 
    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.js"; 
    ref.parentNode.insertBefore(js, ref); 
} (document));

Fuente

2012-03-09 15:52:41 Tuck

'setAutoResize' se desprecia como se mencionó [aquí] (https : //developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/). Deberías usar 'setAutoGrow'. –

¡Buena captura! Actualizaré la respuesta. ¡Gracias! – Tuck

¿Cómo puede funcionar esto con una aplicación iFramed? Obtengo problemas de scripts cruzados que impiden que esto funcione. ¿Algunas ideas? ¡Gracias! –

Insertar código javascript para aumentar la altura del iframe

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

    function sizeChangeCallback() { 
    FB.Canvas.setSize({ width: 810, height:1300 }); 
    } 
    </script> 
<div id="fb-root"></div> 
<script src="http://connect.facebook.net/en_US/all.js"></script> 
<script> 
FB.init({ 
appId : 'YOUR APP ID', 
status : true, 
cookie : true, 
xfbml : true 
}); 
</script>

Fuente

2012-03-14 11:38:09

La respuesta Ashish funcionó bien para mí.

También incluyó un estilo de carrocería para evitar que las barras de desplazamiento de aparecer por un segundo mientras se carga la página:

body {overflow: hidden;}

Fuente

2012-03-29 18:50:05

Altura de la aplicación de la página Timeline atascada en 800px

Respuesta

Cuestiones relacionadas