Facebook: FBML para personalizar nuestra fanpage

Prometo retomar luego los artículos sobre CSS3 sobre todo selectores y transiciones (varias de esas características aún no funcionan en FF o Safari aún).
En un post anterior hablé de las fanpage en Facebook y sus posibilidades como nuevo producto para nuestrso clientes, ahora voy a hablar de una aplicación llamada FBML y que interesantes posibilidades nos brinda.

¿Qué es FBML?

FBML es una aplicación que nos permite mostrar una página HTML personalizada incluyendo imágenes alojadas en un servidor externo, archivos flash, videos de youtube, links a nuestro sitio principal, landing page, etc; todo esto se mostrará en una pestaña adicional de nuestra fanpage que podemos ponerle el título que querramos.

¿Cómo instalo FBML?

Primero nos logeamos en nuestra cuenta de Facebook, damos click a «Aplicaciones» y buscamos FBML, en su página veremos que debajo del avatar hay un link para activarlo y podremos selecionar cualquiera de nuestras fanpage dando click al botón «Add to page» como se muestra en el screenshot.
FBML Facebook agregar

¿Y ahora cómo lo personalizo?

Primero en nuestro perfil, vamos al link «Ads and pages» y configuramos la página a la que agregamos el FBML, veremos que ha aparecido una nueva opción llamada FBML en la categoría «Applications», esta tiene opciones de configuración para mostrarse como una caja o como una pestaña(tab), yo prefiero desactiva box y activar tab. En la imagen esta paso por paso lo que he explicado.
Facebook Fanpage

Agregando contenido

Una vez configurada nuestra pestaña, ya podemos agregar nuestro código HTML, ojo si usamos CSS este debe ser en linea y no al inicio o intentando usar una hoja de estilos externa (la idea de maquetación es similar a la que se usa para un correo electrónico), luego lo grabamos y si todo esta bien deberiamos ver en nuestra fan page la nueva pestaña con nuestro contenido.
Fan Page texto FBML

Para agregar imágenes no podemos subirlas directamente a Facebook, para esto las subimos a un servidor externo y las cargamos usando la ruta absoluta
[cc lang=»html»]

[/cc]

¿Cómo añado flash o videos?

No podemos insertarlos usando javascript o directamente pegando el embed, facebook tiene su propia etiqueta para esto además la película flash no se ejecuta desde el inicio, primero se muestra una imagen y al darle click a esta recién se ejecuta el flash o el video. El código sería como este:
[cc lang=»html»]

[/cc]
Como vemos en este caso estoy usando una tabla en la que indico el color de fondo, swfsrc nos indica la ubicación del flash (en este caso una pelicula youtube) y finalmente imgsrc nos indica la imagen que se mostrará en vez del flash hasta que le demos click.

Finalmente para los que quieran ver como queda esto, les dejo la direccion de una fanpage que hice como prueba
http://www.facebook.com/pages/Arequipa/Vietnam-Restaurant/313742104162?v=app_4949752878