Personalizar páginas de Facebook.

11:38 in

Una de las novedades de Facebook 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.

Ejemplo de página con FBML:

http://www.facebook.com/learnedvision

En esta página podemos ver como aparece otra imagen luego de apretar en ME GUSTA.
Aparte de esto, mediante FBML podemos agregar videos, animaciones, formularios, etc.

Veamos cómo se agrega:

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 editar nuestra página y vamos a aplicaciones, donde veremos la aplicación FBML ya instalada.

Y ya está, ya tenemos la pestaña que buscábamos. Ahora pongamosla por defecto para que nuestros visitantes lo vean apenas entran.

Finalmente podremos ir nuevamente a la aplicación y escribir en ella el código FBML y HTML que queramos, la pestaña lo implementará.

Veamos un poco de código FBML y HTML…

Mostrar contenido a los fans y ocultar a los no fans:
<fb:visible-to-connection>Este contenido lo verán los fans<fb:else>Los no Fans verán este contenido</fb:else></fb:visible-to-connection>

Insertar imágenes:
Antes debes subir la imagen a Internet para copiar su link o url, y luego si insertarlo en el código.
Ejemplo:
<img src=”http://www.learnedvision.com/images/2pagefacefan.png” />

Insertar videos:
Para insertar un video en el FBML debes poner el siguiente código:
<fb:swf swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”swfsrc=’http://www.youtube.com/v/xxxxxxxxxx’ imgsrc=’http://img.youtube.com/vi/xxxxxxxxxx/2.jpg’ width=’340′ height=’270′ />

Insertar texto en diferentes formatos:
<div style=”font-family:Times New Roman, Helvetica, sans-serif; font-size:60px; color:#FF0000″> <CENTER>Texto con formato</CENTER> </div>

REPARACIÓN AL ESPACIO QUE QUEDA ANTES DEL CONTENIDO QUE VEN LOS NO FANS:
Si lo que ven los fans es demaciado largo, lo que ven los no fans quedara muy abajo, para acomodarlo tenes que subirlo con las etiquetas <p></p>. Quedara algo así:

<fb:else><p style=”margin-top:-100px;”>contenido para no fans</p></fb:else>

(modifica 100 por la distancia del espacio en blanco)

Ahora tienes que envolver todo el código <visible-to-connection></visible-to-connection> con las etiquetas <div></div>

Finalmente quedará así:

<div style=”height:600px;”>
<fb:visible-to-connection>
<fb:visible-to-connection>Este contenido lo verán los fans
<fb:else>
<p style=”margin-top:-100px;”>Los no Fans verán este contenido</p>
</fb:else>
</fb:visible-to-connection>
</fb:visible-to-connection>
</div>

Aquí dejo el código completo de la página de Learned Vision:

<div style=”height:684px;”>
<fb:visible-to-connection>
<img src=”http://www.learnedvision.com/images/2pagefacefan.png” />
<a href=”http://www.learnedvision.com/precios.html”><img src=”http://www.learnedvision.com/images/pagefacelink1.png” /></a>
<a href=”http://www.learnedvision.com/”><img src=”http://www.learnedvision.com/images/pagefacelinka.png” /></a>
<fb:else>
<p style=”margin-top:-684px;”>
<img src=”http://www.learnedvision.com/images/2pagefacenofan.png” />
<a href=”http://www.learnedvision.com/”><img src=”http://www.learnedvision.com/images/pagefacelinka.png” /></a></p>
</fb:else>
</fb:visible-to-connection> </div>