Crear pestaña o Welcome FBML en Facebook

En este articulo explicaré los pasos necesarios o mínimos para poder crear una pestaña en Facebook, principalmente se utilizan para realizar Welcomes. Páginas de bienvenida para todos aquellos usuarios que visiten una Página Facebook o Fan Page, suelen servir para situar al usuario y que no vaya directamente al Muro. También se suelen usar para realizar concursos, publicidad de algún producto en concreto o simplemente como página menú, que es aquella que nos redirige a varias secciones tanto en facebook como nuestra página web, nuestros videos, el twitter, etc.. .

Normalmente en este proceso puede llegar a pasar por 4 personas o 4 departamentos, de todas formas os explicaré a grandes rasgos como poder hacerlo tu mismo, que se necesita y como se hace.

Lo primero que necesitamos y es fundamental es una cuenta Facebook donde habremos creado la Fan Page. Desde este momento entramos en el proceso de crear una pestaña de Welcome.

1.- Imagen de la Welcome

El primer paso es tener la imagen que deseamos poner en la Welcome, aquí entraría la labor del diseñador, pero con un programa de edición tipo Photoshop y conocimientos de diseño nos podría dar para realizar un diseño mas que aceptable, siempre es aconsejable que pase por el diseñador si lo hay en nuestra empresa ya que es una Welcome para un cliente y el diseñador es el profesional con más conocimientos que pensará la mejor forma de transformar una imagen en una entrada agradable para el usuario.

2.- Subir la imagen, ruta de la imagen

Si ya tenemos la imagen creada por un diseñador o por nosotros, ya sea formato .gif, .jpg o .png deberemos alojarla en algún sitio físico. Si el Welcome es para un cliente seguramente tendrá una espacio web en el que mediante FTP subiermos la imagen. Una vez subida necesitamos encontrar la ruta absoluta de la imagen.

Ej: www.dominio.es/fb-imagenes/welcome.jpg

Aquí estaríamos accediendo al servidor del cliente, creando la carpeta fb-imagenes donde guardaría todas las imagenes que necesitaría, por ejemplo la welcome.jpg que hemos hecho. Si no disponemos de servidor FTP una solución valida es subirla al propio Facebook, tendríamos que subirla a un álbum y después con el propio Firefox podriamos darle al botón derecho y guardar la ruta de la imagen, así tendríamos la ruta absoluta. El inconveniente es que la foto se vería en el álbum de fotos de Facebook, y si son promociones o concursos no siempre queda bien.

3.- Código HTML con el contenido de la pestaña

El tercer paso es la maquetación, necesitamos integrar la imagen en un código HTML para que se visualice. Si es una imagen menú o anuncio, desearíamos que linke a otro sitio, ya sea nuestro blog, nuestra página, nuestro Twitter, etc.. .

Para ello necesitamos que el maquetador nos cree dicho código, si no disponemos de nadie con conocimientos de maquetación aquí os coloco lo esencial:

Imagen - Para visualizar una imagen crearemos la etiqueta img como la de abajo colocando la ruta de la imagen antes comentada.

<img src="www.dominio.es/fb-imagenes/welcome.jpg" />

Link - Este es el código de un enlace aquí configuraremos a donde nos dirigirá, para ello necesitamos poner dentro de la etiqueta el ‘CONTENIDO’ que puede ser texto o una imagen con el texto superior. En el primer ejemplo saldría un texto CONTENIDO que llevaría a la referencia y el segundo seria una imagen, puede ser una imagen con un botón dibujado por ejemplo.

<a href="www.dominioAlQueVanAIr.com"> CONTENIDO </a>
<a href="www.dominioAlQueVanAIr.com">
   <img src="www.dominio.es/fb-imagenes/welcome.jpg" />
</a>

Si queremos algo mas avanzado con mas de una imagen deberíamos poner una tabla con las imágenes o textos correspondientes:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Debemos recordar, dato muy importante, que el espacio actual a fecha de hoy de Facebook es de 520px de ancho (width:520px;) por ello ni el ancho de la imagen si hay una, ni la tabla (el total de las imagenes) deben de exceder sino esta ocultara lo que sobre por la derecha.

4.- Integración con Facebook, crear una pestaña

Ya tenemos Diseño, Subida al Servidor y Maquetación, ahora nos queda la integración con Facebook, cosa un poco liosa ya que Facebook no lo pone facil, seria tarea del Social Media.

Entramos en el Facebook, entramos a nuestra página y le damos bajo el avatar a “Editar Página”. Entraremos en el submenú “Aplicaciones” y deberiamos encontrar el apartado de “FBML estático” y lo añadiremos “Add App” en un principio parece que no ha cambiado pero si refrescaramos (F5) ya apareceria mas arriba si no esta ya añadidod anteriormente.

El siguiente paso es “Ir a la aplicación” allí entraremos en la edición de la pestaña. Le decimos que si queremos añadirla y tenemos dos campos, el titulo de la pestaña y la zona de contenido, donde incluiremos el codigo del apartado anterior. Una vez colocado el texto del paso 3 guardamos y ya tendremos la pestaña creada y con la imagen o contenido puesto.

En la zona de edicion, donde hemos puesto el titulo de la pestaña y el contenido nos encontramos Abajo que pone añadir otra casilla FBML, sirve para  añadir otra pestaña más, si queremos otra pestaña pinchamos, en un principio no ha pasado nada pero si salimos a nuestra página de nuevo entramos en editar página y Aplicaciones veremos dos FBML. Es un poco lioso como os comentaba.

Apunte: Advertiros que si borramos la segunda pestaña y un día quereis hacer una nueva, os habilitará la que en su dia borrasteis (la segunda con el contenido anterior), debeis coger y modificar el contenido antiguo por el nuevo. Y si cuando guardeis la pestaña después de varios cambios y no lo veis puede ser por culpa de la Caché de Facebook, solo queda esperar un dia, pero ultimamente los cambios se aplican al momento, me refiero a cambios de imagenes.

5.- Configurar la pestaña como página de inicio

Por ultimo si queremos usarla como página de bienvenida y no como página normal, debemos configurar Facebook para que al entrar un usuario nuevo lo dirija a la Welcome. Nos vamos a la Página, Editar Página y “Gestionar permísos” allí encontraremos “Pestaña inicial por defecto” donde le indicaremos nuestra pestaña.

 

Actualización: El proceso es el mismo pero si nuestra página tiene el formato de un perfil encontraremos las pestaña en el lado izquierdo como menú.

http://www.facebook.com/?ref=logo#!/apps/application.php?id=4949752878