Ahora, esto es una gran ventaja ya que se pueden crear aplicaciones y box mas avanzados sin las limitaciones que el FBML traia (tales como la carga de estilos, scripts y demas)
Sin embargo, no todo es color pony rosa, ya que algunas veces, al colocar un nuevo box/app via iframe en Facebook, no se muestra todo su contenido sino que aparece un scroll vertical (a veces horizontal también), que obviamente, queda muy feo.
Esto sucede porque el tamaño de un box en facebook esta establecido a 520 x 800px por defecto, mientras que en las aplicaciones el ancho puede llegar hasta 760px.
Entonces, el problema viene cuando el contenido nuestra app o box supera el alto establecido (o el ancho). Facebook colocará automaticamente las nada agradables barras de desplazamiento.
SOLUCIÓN: Añadir los scripts necesarios para “ampliar” el canvas de Facebook.
(Solo se puede ampliar el canvas en lo alto. El ancho es un tamaño fijo y no puede expandirse)
Primero, configura tu app, de tal manera que en la zona de “Integracion con Facebook” actives la opción Autosize:
En un mundo perfecto, con solo activar esta opción la magia deberia funcionar y todos ser felices, pero no. Hace falta un poquito más.
Segundo, agrega en tu html el siguiente script inmediatamente después de la etiqueta <body> (suponiendo que el alto que deseas es de 950px) :
Código Javascript :
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : '<tu APP ID>',
status : true,
cookie : true,
xfbml : true
});
</script>
<script type="text/javascript">
FB.Canvas.setSize({ width: 520, height: 950 });
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
Y listo, esto permitirá que el canvas de Facebook sea reajustado al alto que deseas.
En "appId", coloca el id de tu app.
En "FB.Canvas.setSize" seteas el alto al tamaño que deseas, en mi caso le coloqué 950px.
Ojo: como solo se puede cambiar el alto de la app (box) asegurate que el contenido no exceda los valores de ancho.
Espero les ayude.
C ya!
