Ajustar la altura del iframe en un Tab de Facebook

Cuando creamos ya sea un juego dentro de Facebook, o simplemente una pestaña o tab para una Fan page, lo que nos proporciona Facebook es un frame, en el cual técnicamente podemos mostrar el contenido que nos venga en gana. Aunque existe un detalle, y es que éste iframe tiene unas dimensiones pre-definidas por Facebook, y aunque la documentación de Facebook señala que ajustará el tamaño del frame al contenido cargado, ésto no siempre es preciso.

Para lograr ajustar el alto del iframe de nuestro tab o app, primero debemos configurar nuestra App con la opción "Canvas Height" en Fluid. Ésto se encuentra en los settings del App en el panel de Developers.

Una vez que ya hemos habilitado ésta propiedad, debemos utilizar la propiedad del Javascript SDK de Facebook: FB.Canvas.setSize(); de la siguiente manera:

                // Llamada asíncrona cuando el SDK esté listo
                window.fbAsyncInit = function () {
                    //Inicializacion del SDK
                    FB.init({
                        appId: 'APP_ID', //coloca aquí el APP ID de tu App
                        status: true,
                        cookie: true,
                        xfbml: true
                    });

                    // Hacemos resize del Canvas
                    FB.Canvas.setSize({ width: 760, height: 850 });//medidas del iframe
                };

                // Load the FB SDK Asynchronously
                (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));

La propiedad de setSize() recibe un objeto con los atributos width y heigth, que aunque en principio nos indica que es posible cambiar también el ancho de nuestro iframe, en éste ejemplo nos concentramos principalmente en la altura, y en lo personal no recomendaría cambiar el ancho para no destruir la estructura predeterminada de Facebook a lo ancho, y tampoco lo he probado, por lo que no puedo garantizar su correcto funcionamiento.

Los valores unicamente pueden ser números enteros y no es necesario indicarle unidades (px, em, %). Una vez que actualizamos la página de Facebook, podemos ver que la ventana ya tiene la altura ajustada.

Pero, ¿Qué pasa si mi contenido no siempre es de la misma altura?

En algunas ocasiones nuestro contenido puede ser dinámico, o animado, por lo que su altura puede no ser siempre la adecuada, para lo anterior también existe una opción que podemos definir de la misma manera pero con dos excepciones:

• El Height de nuestro Canvas en la configuración de la aplicación debe estar definido en Fixed size at 800px
• No podemos combinar setSize con la propiedad de autoSize

La forma de incluirla en nuestro script es la misma que con la propiedad de setSize, sólo que éste parámetro del SDK se llama FB.Canvas.setAutoGrow y lo que nos permite ésta propiedad es que la altura se ajusta automáticamente al contenido completo de nuestro iFrame. El ajuste es animado y el contenido se revisa cada 100 milisegundos, es decir cada 0.1 segundos se revisa si el contenido ha cambiado su altura, y el iframe del app se anima para ajustar a la altura del nuevo contenido de neustra app.

Si lo deseamos, podemos cambiar el ciclo en que se revisan los contenidos o detener-reanudar éste ciclo:

FB.Canvas.setAutoGrow(); //uso estandar con el ciclo de 100ms

FB.Canvas.setAutoGrow(false); //dejar de revisar el contenido y detener el ciclo

FB.Canvas.setAutoGrow(500); //cambiar el ciclo de 100 a 500ms (es decir, tardaría mas en detectar que el cotenido ha credido o reducido)

FB.Canvas.setAutoGrow(true); //reanudar el ciclo de revisión

Con éstas dos propiedades del SDK de Facebook, es más sencillo lograr que nuestra app o nuestro Tab de Fanpage se vea justo como queremos que se vea dentro de Facebook.

¡Felices sentencias!