Las redes sociales son un elemento importante de promoción y de interacción con el lector, eso no es ninguna novedad. Lo cierto es que creando una “landing page” no solo daremos mejor impresión a los lectores sino que con un poco de suerte atraparemos a mas y si fue de buen gusto, estaremos en alguna que otra recopilación de perfiles personalizados.
Para el que no lo sabe, las landing pages viene a ser las páginas de aterrizaje apegándonos a la traducción. Para ser mas claro, es la primer página que ve el visitante.
En el caso de Twitter es simple personalizar nuestro perfil, ya que con solo subir una imagen para el fondo y luego modificar los colores de los paneles y la tipografía tendremos hecho el trabajo. Creo que no hay mucho para explicar en esta red social, aunque si recomendar el uso de un template para el tema de las medidas. en PelFusion han hecho una buena recopilación de templates en PSD para Twitter.
También pueden encontrar interesante una nota sobre personalización de perfil Twitter en El Webmaster.
Para el caso de Facebook al principio puede ser algo tedioso encontrar los caminos para llegar a la opción e intimidante una vez que estemos frente a un campo para escribir código.
Pero para todo hay una salida simple y en este caso hay por suerte dos maneras de hacerlo fácil.
1. PageModo
PageModo es un sitio que nos brinda plantillas predeterminadas para ahorrarnos la parte del código y de esta forma poder realizar una buena personalización de nuestra página de Fans. El sitio ofrece plantillas gratuitas (en donde agregará al pie de la misma su publicidad) y otras de pago, en donde podemos suscribirnos a un plan para ver toda la variedad y evitar la publicidad, agregar video, etc.
La verdad es que desconocía este sitio con el que me encuentro hoy leyendo un artículo sobre el mismo en PuntoGeek.
2. En forma manual
Como bien decía antes, podemos sentirnos algo intimidados alencontrarnos con un código desconocido hasta el momento como lo es el FBML (Facebook Markup Language). Pero no todo es tan difícil como parece. En verdad dicho lenguaje está basado en parte en HTML (algunas instrucciones básicas), por lo que ciertas cosas podremos hacerlas sin dificultad.
Sin extenderme demasiado por desconocimiento (todavía no me he puesto a estudiar todas las posibilidades) pero si para que por lo menos puedan poner una imagen, video o película flash inicial, veremos el paso a paso y algunas recomendaciones.
Consideraciones:
- El ancho deberá tener un máximo aconsejable de 520 px.
- Si construímos con código HTML, deberemos copiar el mismo sin las etiquetas <HTML> y <BODY> ya que Facebook las agrega automáticamente.
- Deberemos subir previamente las imágenes/pelicula/video a un servidor externo y utilizar rutas absolutas.
Inicialmente lo mas complicado es tomar el camino correcto para la creación de una página en Facebook y luego personalizarla, por lo que explicaré resumidamente como hacerlo, dando los enlaces directos:
- Luego de iniciar la sesión, ingresamos aquí para crear una página.
- Pondremos el nombre de la misma, en donde nos dará la posibilidad de seleccionar si será una página oficial de algún producto, servicio o celebridad o simplemente una página de comunidad.
- Ya con esto tendremos nuestra página armada y lista para completar todos los datos que hacen a la misma. Ahora solo resta personalizarla.
- Para personalizar nuestra landing page necesitamos de una aplicación llamada Static FBML. Esto vendría a ser una especie de HTML vacío en donde pondremos el código para visualizar el resultado. La aplicación pueden obtenerla desde este enlace. En la barra lateral izquierda, el primer item dirá “Agregar a mi página” con lo que podremos hacernos de la aplicación.
- Nos dirigimos a nuestra página de Facebook y veremos que ahora el primer enlace de la barra lateral es “Editar mi página“. Hacemos click ahí y nos llevará a un panel de configuración entre las que se encuentra, dentro de aplicaciones, FBML1.
- En FBML1 encontraremos el enlace para “Editar” y al ingresar en él veremos una caja de texto para el título (nombre de la solapa) y otra para el código. Aquí es donde haremos un apartado a los items para ver que opciones hay.
a. Agregar Imagen
Una de las opciones mas simple es agregar una imagen de 520px de ancho por lo que deseen de largo. Para ésto, el código que debemos ingresar en el campo sería el siguiente:
<center> <img src=”http://www.tudominio.com/imagen.jpg” width=”520″ height=”490”> </center>Aquí deberemos tener en cuenta reemplazar la ruta de la imagen y las medidas.
b. Agregar un video / pelicula Flash
Otra de las opciones que podemos utilizar es insertar un video de YouTube. Para ésto, el código sería:
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www.youtube.com/v/xxxxxxxxxx' imgsrc='http://www.tudominio.com/2.jpg' width='340' height='270' />Aquí disponemos de otros elementos para configurar, en donde tenemos el color de fondo de la película inicialmente, color y ancho del borde, url del archivo y por último algo muy importante, una imagen preliminar.
Facebook no permite la reproducción automática, sino que necesita del puntapié inicial. Es por eso que la imagen preliminar hará de botón para reproducir la película.
En el caso del video, si tenemos en cuenta lo anterior, el visitante tendría que hacer dos click para ver el video. Uno en la imagen preliminar y otro en el play del video mismo. Pero esto se puede evitar:
swfsrc = 'http://www.youtube.com/v/xxxxxxxxxx&autoplay=1'Como pueden ver, se ha agregado &autoplay=1 al final del enlace, con lo cual evitaremos el 2° click, el de play.
c. Agregar un sitio
Para este punto es un tanto difícil poner un código de ejemplo ya que las posibilidades son amplias y dependen de cada proyecto, pero para no dejarlos con la duda he conseguido algunos enlaces interesantes de plantillas gratuitas para Facebook en donde podrán personalizarlas para uso propio o bien ver como se compone el código para crear uno propio.
- Sacrilicious template Fan Page (código de ejemplo)
- Flashmint free Facebook Template (fuentes, PSD y código incluido)
Por último, lo que debemos hacer es establecer la pestaña creada como el “index” de cualquier otro sitio. Nos dirigimos al muro de nuestra página y veremos que debajo del campo para escribir en el muro tenemos un enlace de “opciones”. Si presionamos en él, aparecerá un botón de “configuración”. Hacemos click sobre el botón y nos mostrará algunas opciones para modificar, entre ellas cual será la pestaña predeterminada que verán los que no son fans y lleguen a nuestra página. Ahí debemos poner la pestaña creada.
Para los que se han perdido un poco con toda esta explicación les dejo un video con todo el proceso que si bien se encuentra en inglés, el mismo es muy visual.
