Redimensionado automatico del iframe de una pagina canvas

Por Miquel Carol   
Ene 08

Uno de los problemas habituales con los que nos encontramos al crear nuestra primera aplicación en Facebook es como lograr que el iframe de la pagina canvas que carga la aplicación en Facebook dimensione el largo de la pagina al tamaño que deseamos.A la hora de crear una aplicación en Facebook en el apartado “On Facebook->Canvas Settings”, tenemos una opción que nos indica “Iframe Size”, y nos deja escoger entre “Show scrollbars” y “Auto-Resize”.

Si seleccionamos “Show scrollbars”, veremos unas barras de desplazamiento que permiten desplazarnos por nuestra aplicación, aunque deberíamos mirar de evitar usarlas. Si habéis navegado por Facebook veréis que muy pocas aplicaciones las usan.

Si seleccionamos “Auto-Resize”, nos vamos a encontrar que Facebook corta indiscriminadamente nuestra pagina y no muestra las barras laterales que antes os comentaba. Este problema tiene sencilla solución. El problema reside en que no hemos indicado en el código JavaScript de nuestra pagina que le diga a Facebook como redimensionar el Iframe.

A estas alturas doy por hecho que estais familiarizados con el código JavaScript que toda aplicación Canvas de Facebook debe tener.

  1. <div id="fb-root"></div>
  2.       <script type="text/javascript">
  3.         window.fbAsyncInit = function() {
  4.           FB.init({
  5.             appId  : '24239711937',
  6.             status : true, // check login status
  7.             cookie : true, // enable cookies to allow the server to access the session
  8.             xfbml  : true,
  9.             logging: '0'
  10.           });
  11.  
  12.           jQuery(document).trigger('fb:init');
  13.         };
  14.  
  15.         (function() {
  16.           var e = document.createElement('script');
  17.           e.src = document.location.protocol + '//connect.facebook.net/es_ES/all.js';
  18.           e.async = true;
  19.           document.getElementById('fb-root').appendChild(e);
  20.         }());
  21.       </script>

En el caso de Drupal dicho código nos lo genera el módulo Fbconnect, lo que vamos a hacer es modificar el módulo Fbconnect para agregar un par de líneas extra al código JavaScript, para indicarle a Facebook que queremos redimensionar el Iframe, al largo de página que tengamos.

  1.     $footer['fb-init-code'] = <<<CODE
  2.       <div id="fb-root"></div>
  3.       <script type="text/javascript">
  4.         window.fbAsyncInit = function() {
  5.           FB.init({
  6.             appId  : '$config[app_id]',
  7.             status : true, // check login status
  8.             cookie : true, // enable cookies to allow the server to access the session
  9.             xfbml  : true,
  10.             logging: '$config[debug]'
  11.           });
  12.  
  13.           jQuery(document).trigger('fb:init');
  14.         };
  15.  
  16.         (function() {
  17.           var e = document.createElement('script');
  18.           e.src = $config[connect_js];
  19.           e.async = true;
  20.           document.getElementById('fb-root').appendChild(e);
  21.         }());
  22.       </script>
  23. CODE;

Vista previa de las lineas 420 a 444 del archivo fbconnect.module

Para ello simplemente debemos editar el archivo fbconnect.module (Lo encontrareis en /sites/all/modules/fbconnect) y debajo de la línea 432 agregar el siguiente comentario y línea de código. (Los no usuarios de Drupal, simplemente añadid las lineas 14 y 15 a vuestro código Javascript) Quedando como el siguiente ejemplo:

  1.     $footer['fb-init-code'] = <<<CODE
  2.       <div id="fb-root"></div>
  3.       <script type="text/javascript">
  4.         window.fbAsyncInit = function() {
  5.           FB.init({
  6.             appId  : '$config[app_id]',
  7.             status : true, // check login status
  8.             cookie : true, // enable cookies to allow the server to access the session
  9.             xfbml  : true,
  10.             logging: '$config[debug]'
  11.           });
  12.  
  13.           jQuery(document).trigger('fb:init');
  14.         //Resize the iframe when needed
  15.         FB.Canvas.setAutoResize();
  16.         };
  17.  
  18.         (function() {
  19.           var e = document.createElement('script');
  20.           e.src = $config[connect_js];
  21.           e.async = true;
  22.           document.getElementById('fb-root').appendChild(e);
  23.         }());
  24.       </script>
  25. CODE;

Fijaos en las lineas 14 y 15 donde comentamos y creamos la instrucción para redimensionar el iframe.

Ya solo nos hara falta seleccionar “Auto-Resize” en las propiedades de la aplicación de Facebook y veremos como se redimensiona correctamente el iframe de nuestra aplicación.