Pestañas FBML de Facebook: usos profesionales y breve tutorial
Seguimos con la mirada puesta en el uso profesional de internet, fijándonos en algo que está pegando fuerte en el ámbito del social media: crear páginas de Facebook con pestañas personalizadas y contenido multimedia. Veremos algunos ejemplos del uso actual de esta técnica por diferentes profesionales y añadiremos un breve tutorial para empezar a trabajar por nuestra cuenta.
En primer lugar la lista de artículos que llevamos sobre el tema para facilitar la navegación:
- Pestañas FBML de Facebook: usos profesionales y breve tutorial. Artículo actual en el que veremos algunas landing pages y explicamos la forma de colocar una pestaña de este tipo en nuestras páginas de Facebook.
- YouTube en Facebook: colocar vídeos en pestañas FBML. Artículo en el que vemos el caso específico de la colocación de vídeos de YouTube, así como los códigos para modificar el tamaño en el que aparecen y su colocación.
Uso profesional de Internet IV: personalizar una página de Facebook añadiendo pestañas fbml con imágenes, vídeos, enlaces y contenido interactivo.
El ascenso de Facebook parece imparable: recientemente hemos conocido que está superando a Google en número de visitas. Y seguramente la variedad de actividades que pueden hacerse en su seno (ocio, contacto con amigos, negocios…) tiene que ver con esta popularidad creciente. Una auténtica vorágine de posibilidades que no deja de aumentar día a día, dejándonos atrás muy a menudo.
Una de esas novedades consiste en añadir las denominadas “pestañas de fbml estático” (static fbml) a las páginas profesionales. El nombre alude a un lenguaje que Facebook creó para construir aplicaciones, pero lo importante es que permiten implementar nuestro propio código html en las páginas de la red social. Con ello las posibilidades de personalización se han disparado, y los profesionales están usando estas pestañas para convertir sus sitios de Facebook en una especie de tarjetas de visita interactivas cada vez más complejas. También conocidas como “Landing Facebook Pages”, podría decirse que han aglutinado las funciones de una web tradicional con las “posibilidades 2.0” de las redes sociales, de forma gratuita y encima en la plataforma de moda. Muchas ventajas que hacen que no extrañe el éxito que está cosechando Facebook.
Ejemplos de uso de pestañas FBML estático en páginas de Facebook.
Vamos a ver algunos ejemplos de “landing Facebook page” que están funcionando actualmente, y después explicaremos cómo hacerlas nosotros. Lo más habitual es empezar por incluir una pestaña de bienvenida (o “Welcome”), aunque como veréis se pueden añadir todas las que se quiera, pues esto dependerá de la idea de sitio que se tenga:
Por ejemplo esta web tiene un sitio en Facebook bastante complejo: incluye diversas pestañas además del citado “Welcome”. Todas ellas tienen diseño gráfico personalizado, enlaces a la web dueña de la página y vínculos para suscribirse al feed o para recibir artículos vía email. Todo ello se hace añadiendo pestañas fbml e implementando código html en ellas.
Podemos ver aquí otro ejemplo de pestaña Welcome de Facebook: en este caso se incluye una flecha en el fondo que apunta al botón para hacerse fan (animando a ello), y un vídeo de YouTube sobre el personaje. La forma de hacerlo es idéntica al caso anterior: tabla html con la imagen diseñada de fondo y el vídeo -que se llama desde YouTube con el código que éste nos facilita- colocado en el sitio justo de la tabla. Otra buena opción sería usar propiedades CSS en lugar de tablas.
Aquí tenemos otro ejemplo del mismo tipo de pestaña Welcome, en este caso diseñada por mí para un profesional del social media.
Además de estas pestañas, los profesionales suelen personalizar también su página muro con un banner vertical, en el que a veces se incluye información de contacto. Para esto no hacen falta pestañas especiales, basta con diseñar una imagen de distribución vertical y colocarla como foto de perfil (Facebook la permite).
Cómo añadir una pestaña "Welcome" o "Bienvenidos" (FBML) con imágenes o vídeos en una página de Facebook.
Hay que decir que Facebook no aloja las imágenes o los vídeos que pongamos, éstos deberán estar subidos a otros sitios de internet (alojamientos de imágenes como Flickr, Picasa, Imageshack, etc… y YouTube o similar para el caso de los vídeos). Lo que haremos será enlazar a sus urls desde la pestaña fbml estático. En el caso de las imágenes será relativamente fácil, cosa que no ocurrirá con los vídeos (poner un vídeo de YouTube es bastante complicado). El segundo artículo de la serie está dedicado enteramente a ello.
Bien, lo primero naturalmente es añadir la pestaña FBML. Voy a explicar por encima la forma de hacerlo, pues ya existe sobre este tema información en internet.
Vamos a “Editar página” desde el muro de nuestro sitio de Facebook. En la pestaña “buscar” introducimos “fbml” para que nos aparezca la aplicación que nos interesa.
Añadimos la aplicación a nuestra página:
Volvemos a nuestro muro y añadimos una pestaña de Static FBML (después podremos cambiarle el nombre y llamarla “Welcome”, “Bienvenidos” o lo que queramos). En mi caso aparece “Bienvenidos” porque ya había hecho esto antes:
Y ya está, ya tenemos la pestaña que buscábamos. Podremos editarla y pegar o escribir en ella el código html que queramos, la pestaña lo implementará.
------
Actualización: Atención, Facebook ha sido modificado recientemente. Ahora, para acceder y poner códigos FBML en la pestaña, tendremos que ir a "editar página", elegir "Aplicaciones" y, en la categoría "Usos de FBML", clicar en "ir a la aplicación". Todo ello tras haber añadido la aplicación, naturalmente.
------
Ahora ya dependerá de lo queramos poner, para incluir una imagen sin más puede usarse la etiqueta <img src=”url de nuestra imagen” />, pero para construcciones complicadas seguramente lo mejor será usar una tabla para distribuir con ella los elementos (o usar CSS). Como digo las imágenes, vídeos, etc… que queramos poner deberán estar ya alojados en internet, y serán llamados hasta la pestaña por medio de etiquetas html (ojo que con YouTube la cosa es diferente, interesados sírvanse ir al siguiente artículo). No me extenderé sobre el uso del lenguaje HTML pues existe muchísima información sobre ello en internet, y no es el objeto de este artículo (de todas formas si alguien precisa ayuda que no dude en pedirla que desde aquí siempre echaremos una mano).
Cambiar el título de una pestaña FBML de Facebook.
Voy a añadir este apartado ante la duda planteada por un visitante. El problema que tenía era que no conseguía cambiar el título de la pestaña FBML que había añadido.
Bien, lo primero decir que muy a menudo Facebook parece tener problemas técnicos y no implementa inmediatamente los cambios que hacemos (esto lo he comprobado personalmente). Así pues recomiendo paciencia y probar otro día si nada de lo que hagamos parezca funcionar.
En caso de esté funcionando bien lo que hay que hacer es entrar a “Editar página”, y una vez allí ir al apartado “FBML estático”. En ella encontraremos una opción llamada “Configuración de aplicaciones”, con la que podremos cambiar el nombre de la pestaña.
Al clicar en “Configuración de aplicaciones” del apartado FBML eliminaremos el “Cuadro” y agregaremos la “Pestaña”. De esa forma el título que habíamos puesto aparecerá en la propia pestaña (de otra forma aparecerá el título “Cuadros”, y al entrar nuestro título estará en el interior).
Adjunto una captura de las opciones que he marcado. El resultado podéis verlo en la página de Facebook de este blog. ¡Espero haber resuelto la duda del visitante!
Como puede verse, las posibilidades del Facebook actual son muy amplias en cuanto a personalización, algo que muchos profesionales están aprovechando ya. ¿Y tú, lo estás haciendo?
Colocar una pestaña FBML como pestaña por defecto o de inicio.
Añado también este apartado ante las dudas de los visitantes. Para empezar, hay que destacar que sólo en las páginas normales de Facebook puede cambiarse la pestaña por defecto, en las "páginas de comunidad", grupos, perfiles de usuario, etc... no es posible hacerlo.
En las páginas normales el procedimiento es sencillo: ir a "editar página", luego a "gestionar permisos" y allí encontraremos el menú para hacerlo ("pestaña por defecto").
Colocar un contenido para fans y otro para no fans en una pestaña FBML
Ésta es otra pregunta habitual desde que Facebook cambió el sistema (antes había un menú para hacer esto, ahora hay que hacerlo con código). Para que aparezca un contenido para los fans y otro para los que no lo son, hay que implementar el siguiente código en la pestaña:
<div id="wrapper">
<fb:visible-to-connection>
AQUÍ LO QUE VERÁN LOS FANS
<fb:else>
<div id="non-fans">
AQUÍ LO QUE VERÁN LOS NO FANS
</div>
</fb:else>
</fb:visible-to-connection>
</div>
(Nota: En esta web pueden conseguirse diseños de fondos y banners para Facebook, contactar con el autor para más información).
