Blog de Tecnología e Internet

Guía: Auto-redimensiona pestaña iframe en facebook

Vamos a continuar hoy con un poco de información para desarrolladores que se están adentrando en el mundo de crear aplicaciones bajo la plataforma de Facebook. Si recordáis, hace unas semanas comentamos cómo crear una pestaña iframe para una página de fans en Facebook; en esta ocasión vamos a ver cómo conseguir que el tamaño de dicha pestaña se adecue al contenido de nuestra aplicación web.

Existen dos formas de mostrar nuestro contenido en las pestañas de la red social: por un lado, podemos permitir que se muestren scrollbars (barras de desplazamiento) cuando la altura de nuestra aplicación sobrepase al de facebook; mientras tanto, por el otro lado, tenemos la posibilidad de que sea facebook quién se adapte a nuestro contenido, y de esta forma lograr que nunca se muestren dichas scrollbars. En mi opinión, es mucho mejor utilizar la segunda alternativa, ya que de ese modo, lograremos una mayor integración con la red social.

Bien, ¿y cómo conseguimos que facebook se auto-redimensione? pues nos bastará con un pequeño ajuste en las propiedades de nuestra aplicación, y con añadir unas cuantas líneas de código a cada una de nuestras páginas.

En primer lugar dirigimos a la configuración de nuestra aplicación (en facebook.com/developers), y en la pestaña “facebook integration“, debemos cerciorarnos de que en la propiedad “Tamaño de Iframe” esté seleccionado auto-resize y no show-scrollbars. Una vez estemos seguros de esto, tan sólo nos resta introducir las siguientes líneas de código en el body de nuestras páginas:

Es importante mencionar que debemos cambiar APP_ID por el id de nuestra aplicación en concreto. Con esto ya estaría funcionando correctamente en todos los navegadores excepto en el grandioso internet explorer. Por lo tanto, para hacerlo funcionar en el navegador web de microsoft, debemos incluir la siguiente etiqueta antes del head de nuestro código:


Publicado en: Facebook, Guías
Etiquetas: , , ,

1 Comentario

  1. Anónimo 0
    30 julio, 2011 at 10:59 #

    Hola! el script funciona, pero como puedo hacer para acortar el tiempo en que se ven los scrollbar?. Hay un delay hasta que el iframe se acomoda. Como puedo evitar que se vean esos milesegundos? Gracias! valeria

Deja un comentario

Soy mayor de edad, He leído y acepto totalmente el Aviso Legal y la Política de Privacidad así como que el contenido de mi comentario sea público.

 

Información

Aviso legal y Política de Privacidad

Contenido publicado bajo licencia Creative Commons

Licencia de Creative Commons