Javascript SDK: Cómo ocultar las barras de scroll de un iframe

Cuando desarrollamos una aplicación para Facebook en modo cavas con iframe uno de los problemas más molestos a nivel visual que suelen surgir es la aparición de las molestas barras de scroll. Lo que nos interesa el 99% de las veces es que se muestre todo el contenido en pantalla sin esas barras.

Os voy a explicar como hacerlo. En este post doy por sentado que sabéis utilizar Javascript SDK en el desarrollo de aplicaciones para Facebook. Este tutorial es sólo aplicable a aplicaciones en modo canvas, no para páginas web fuera del entorno de Facebook.

En primer lugar tenemos que ir a la configuración de nuestra aplicación (en concreto a la sección de integración con Facebook) y tenemos que marcar en Tamaño del iframe la opción de Auto-resize.

Una vez hecho esto tenemos que ir al código de nuestra página y añadir justo después de la instaciación de Facebook este código, FB.Canvas.setAutoResize();.

Podéis verlo en este ejemplo:

  window.fbAsyncInit = function() {
    FB.init({appId: 'XXXXXXXXXXXXXX', status: true, cookie: true,
		xfbml: true});
	FB.Canvas.setAutoResize();
  };
  (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);
  }());

Y ya está, el iframe crecerá de manera automática para adecuarse a la longitud del contenido cada vez que carguemos la página.

5 comentarios sobre “Javascript SDK: Cómo ocultar las barras de scroll de un iframe

  • el 30 Marzo, 2011 a las 3:29 pm
    Permalink

    Hola Gabriel,
    La verdad es que soy novato en esto y estoy con pruebas de paginas de facebook.
    ¿Me podrías indicar donde hay que incluir el código al que haces referencia en el post?
    No se que es la instaciación de Facebook.
    Muchas gracias por tu ayuda

    Respuesta
  • el 6 Abril, 2011 a las 10:34 pm
    Permalink

    Hola tengo el problema que me pone las barras de me pone las barras de scrool y no me redimensiona el alto total de mi pagina, podrias poner un ejemplo de todo el codigo que va de nuestra página.

    Gracias.

    Respuesta
  • el 25 Junio, 2011 a las 4:50 pm
    Permalink

    solo funciona en chrome. pero en firefox e iexplorer sigua apareciendo el scroll, tu ya lo probaste en todos los exploradores???? o ke me falta a mi?

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Sígueme