[Tutorial] Cómo instalar iFrame en tu página de Facebook

Hace unos días Facebook anunció la destrucción del código FBML y apostar por el iFrames, de manera que se mejorara la personalización de las páginas. Personalmente encontraba mucho más sencillo de usar FBML, pues con un conocimiento de dummies en HTML  era suficiente para tener una página parada y decente. Sin embargo, como los tiempos cambian y algunos debemos adaptarnos, les dejo este manual para instalar el tan conocido iFrames.

Sí, vas a tener que hacer un poco más de chamba, pero creo que vale la pena. ¡Empezamos!

Comencemos definiendo unos conceptos:

· Pestaña/Opción menú: zona o apartado en nuestra página en Facebook que podemos personalizar para una mejor experiencia de usuario.

· FBML: es el HTML de Facebook (el FB NO tiene que ver con Facebook) en el que se incluyen algunas etiquetas propias con el que podemos personalizar esas pestañas de nuestra página de empresa.

· iFrame: en síntesis es un marco o ventana dentro de una página web que permite cargar en su interior otra página completa.

· Aplicación Facebook: es una herramienta que puedes instalar y utilizar en la red social. Por ejemplo los famosos juegos como la granja o aplicaciones como RSS Graffiti que usamos en IngeniaUP o en mi propio muro gracias a Schewppes.

En definitiva el cambio propuesto por Facebook lo podemos traducir como pasar de tener pestañas limitadas por el FBML, a tener pestañas preparadas para cargar una página web en su interior, permitiendo javascript, flash, etc. Sí, vas a poder meter tu código de Analytics. ¿Entonces por qué estamos tan asados por este cambio si es para mejor? Principalmente por la chambaza que ahora tomaría hacerlo.

La idea es crear una página web con el código FBML de la pestaña que queremos migrar y subirlo a nuestro servidor, para posteriormente cargar esta página en una pestaña a través de una aplicación de Facebook.

Para la primera parte te puedes descargar este archivo, recordando quitar la extensión .txt y sustituir el código indicado por el de tu propia pestaña.  Para el alto de la pestaña de la fan page no hay problema, pero hay un tema con el ancho. Si bien es cierto que el ancho máximo de una aplicación en facebook es de 760px, al meter esa aplicación en una pestaña, este ancho se reduce a 520px como máximo como se puede ver en http://developers.facebook.com/docs/guides/canvas/

Bien? Ahora sí comencemos

1. Creamos una aplicación de Facebook

Para crear una pestaña con iframe, Facebook nos obliga a hacerlo a través de una aplicación. Para crear una aplicación nos dirigimos a la dirección http://facebook.com/developers Si es la primera vez que entras, te pedirá permiso para acceder a tu información básica (no te robarán tus datos … creo). Hacemos clic en el botón de “Crear una nueva aplicación” y especificamos el nombre de esta aplicación. Confirmamos las condiciones y le damos al botón “Create App”.

Y ya la tenemos creada. Papayita hasta ahora.

2. Configuramos la aplicación

Ahora tenemos que configurar dicha aplicación para decirle qué pagina web vamos a cargar dentro de esta. De las (seis) opciones que nos aparecen en la parte izquierda seleccionamos la que pone “Sitio Web”. Y el campo que tenemos que rellenar es:

·             “Site URL” donde le especificaremos la dirección de nuestra página que queremos cargar en la pestaña. Ojo, hay que tener en cuenta lo siguiente, sólo debes especificar el directorio donde está el index.html que has creado anteriormente. El resto de opciones las dejamos como están.

La siguiente opción a tratar es la de “Integración con Facebook”. Aquí debemos indicar dentro del grupo Canvas los siguientes campos:

·             “Página de trabajo o Canvas Page” es la url de nuestra aplicación. Especificamos un nombre para ella (máx. 20 caracteres y sin mayúsculas),

·             “Canvas URL” aquí ponemos la misma url que escribimos en el paso anterior. El resto de los campos de este grupo los dejamos como tal.

Ahora dentro de esta misma opción, en la parte inferior donde el grupo “Page Tabs”, debemos especificar:

·             “Nombre de la pestaña” Indicar el nombre que queremos que tenga la pestaña (máx 16 caracteres).

·             “Pestaña URL” donde escribiremos el archivo web que queremos incluir en la pestaña iframe. En este caso ponemos index.php

OJO: Guarda los cambios

3. Añadir la aplicación a la página

En esta pantalla, donde aparecen todos los datos de la aplicación que acabas de crear, tienes una opción para ir al perfil de la aplicación, desde donde podrás añadir esta a tu página. Todas las aplicaciones tienen un perfil con su muro, etc.

4. Configurar la aplicación en la página.

Una vez añadida la aplicación a nuestra página de fans, debemos editar nuestra página y acceder al listado de aplicaciones que tenemos instaladas, con la opción “Aplicaciones”. Localizamos la aplicación que acabamos de crear y hacemos click en “Editar configuración”. Y ya sólo nos queda agregar esta aplicación como pestaña en nuestra página para terminar con el proceso sin morir en el intento ¿Fácil, verdad?

Claro que tener un diseñador siempre hará que la página se vea más profesional. No desmerezco el esfuerzo propio, pero esto es demasiado tedioso para cualquiera que solo use su FACE para stalkear a sus amigos. ¡Buena suerte!

 

Etiquetado:Facebook, FBML, iFrame

Posted in: Redes sociales