Como crear una Landing Page en Facebook con iframe Tabs Static HTML

Como seguramente sabrás, hace unos días Facebook anunció que dejará de soportar el lenguaje que utilizaba ahora, el FBML, para pasarse a una gestión con iframes y html estándares.

Ha muerto FBML Estatico…viva FBML estático

En mi caso yo ya había realizado mi página de aterrizaje con la antigua aplicación de Facebook, FBML estático. Y puedo seguir perfectamente utilizándola, editar el código de adentro, y modificar lo que haga falta. No habrá problema, seguirá funcionando un buen rato. Así que si ya tienes una Landing Page y que estas contento con ella..¡no tienes nada que hacer!

Pero en realidad este video está enfocado para la gente que desea crearse una landing page ahora en Facebook y aún no la tiene. ¡A por ellos!

¿Por que tener una Landing Page ?

Uno de los elementos clave de un marketing social es el concepto de la página de aterrizaje (Landing Page en inglés). La idea de la Landing Page es que sea una página que se presenta por defecto a la gente que aún no es fan tuyo. Si dejas aterrizar estas primeras visitas en tu muro, es probable que, abrumado por tanta actividad, no sabrán muy bien que acción realizar.

El objetivo de tu Landing Page es justamente este: dirigir esas primeras visitas para presentar tu página y enfocar el visitante hacia el principal objetivo de tu landing page: que la gente haga clic en el botón Me Gusta, y una vez logrado esto, también podrás plantear un otro objetivo segundario, como que se den de alta a tu newsletter.

Una vez que se han hecho fan de tu página, no volverán a ver esta Landing Page, con lo cuál no es ninguna molestia. Consideralo como un mini tour de presentación de lo que occurre en tu página (contenidos exclusivos, descuentos exclusivos, actividades exclusivas (sorteos, etc…) para una primera visita.

¿Que aplicación utilizar para crear tu Landing Page?

Para darte una mano con esta cuestión, he revisado algunas aplicaciones que se utilizan para trabajar con esto y te las presentaré aquí.

iFrame APP: solo para usos básicos

La primera de ellas es una aplicación gratuita de la empresa WildFire, que una firma conocida por sus aplicaciones de promoción en Facebook, concursos y demás. La aplicación se llama iFrame APP, es gratuita, pero tiene algunas limitaciones, como por ejemplo no permitir integrar javascript y CSS.

iframe app wildfire

Entonces si vas a utilizar una aplicación básica, como podría ser una imagen para la gente que es fan y otra para los que no lo son, entonces sí podrías utilizar iFrame App, ya que su interfaz está pensado para novatos y tecnófobos.

Pero si, como sucede en mi caso, quieres integrar un formulario de alta a tu newsletter, pues esta aplicación no te vale.

Static HTML For Pages: perfecta pero…

La segunda aplicación que encontré es de Involver.

Static HTML for Pages

Es muy buena, pero también tiene la contra de que sólo puedes utilizar en forma gratuita sólo dos aplicaciones. Como en mi caso ya estoy utilizando la aplicación de YouTube y de Twitter, las tengo instaladas y pretendo mantenerlas, no podré utilizar la aplicación Static html for pages, que funciona muy bien y que por tanto, te recomiendo.

iFrame Tabs Static html: la que elegi yo

Pero de todas las aplicaciones que he revisado, la que hallé más conveniente es iFrame Tab Static html.

Static HTML iframe tabs

Tiene las dos vistas, una para fans y otra para no fans, puedes integrar no sólo imagen sino también código y hasta códigos complejos como CSS y Javascript, entre otras ventajas.

  • Para instalar esta aplicación tienes que ir a la página de las aplicaciones, que la encontrarás poniendo como búsqueda en Google: aplicación facebook static html iframe tabs.
  • Una vez que llegaste a ese punto, vamos a darle al botón “Add to my page”.
  • Volvemos entonces a nuestra página del muro y le damos al botón de editar nuestra página, en la sección aplicaciones. Allí podremos ver que la aplicación ha sido instalada correctamente en la página, y ahora la vamos a configurar.
  • Y aquí tendremos acceso a dos bloques. Por un lado, el primer bloque es el que será visible para la gente que no es fan. Desde luego que ése es el bloque que nos interesa.
  • Yo he recuperado el código de mi página actual y tenemos aquí este código que he copiado. Vemos que he seleccionado el botón no scroll. Es conveniente que no haya scroll, ya que el resultado final quedará más profesional
  • Una cosa muy importante es que la imagen que añadas sea de un tamaño adecuado que tenga un ancho máximo de 520 píxeles.
  • Y luego verás que tenemos una segunda lista donde he puesto todo el código que corresponde al formulario de alta a mi newsletter.
  • Le damos al botón de guardar, y veremos que la aplicación nos permite directamente ver la pestaña como fan y como no fan.
  • Ingresando en esas opciones, podrás ver lo que encontrará un visitante de tu fan page si no es fan. Y está perfecto así como lo vemos, porque es una pantalla que te explica las ventajas que te dará hacerte fan.
  • En este caso, una vez que te haces fan, esto es, le das al Me Gusta, aparece una segunda página que es el formulario de alta a la newsletter, que en el ejemplo está funcionando de modo correcto.

Tenemos aquí el trabajo hecho, pero aún necesitamos volver el tema de gestionar los permisos, donde vemos que hay un parámetro que dice Pestaña Inicial por Defecto. En este caso nos remite a la página de Facebook, pero vamos a tomar mejor la nueva y le damos a guardar el cambio.

La última cosa que podemos hacer es cambiar el nombre del tab. Si le das en Static html, editor de configuración, podremos configurarlo para que el tab en vez de llamarlo «Welcome» se llame «Bienvenida». Luego aceptamos, refresh y tendremos aquí la página de bienvenida.

¿Cómo incorporar un imagen en mi landing Page?

El proceso es sencillo

  1. Diseñar la imagen con tu programa favorito (Photoshop, Fireworks, PowerPoint o Paint)
  2. Recuerda mi recomendación de no utilizar imágenes con ancho superior a los 520 píxeles.
  3. Salva tu imagen en formato .gif, .jpg o .png
  4. Tienes que subir tu imagen a Internet. Si tienes un blog y un plan de alojamiento propio, subela a tu blog
  5. El código HTML que tienes que incorporar a tu landing page es para utilizar una imagen es:

<img src=»URL hacia tu imagen» width=»520″ height=»El numero que corresponde» alt=»nombre de tu blog/negocio» />

¿Donde alojar imagenes gratis?

Y si no tienes un plan de alojamiento para subir tus imagenes, puedes utilizar un servicio como Imgur.

imgur, alojar imagenes gratis

Allí deberás subirte las dos imágenes que habrás debido diseñar. Una para la visita del no fan y otra para el fan. No te olvides de copiar las 2 URL hacia cada una de tus imagenes, ya que tendrás que pegarlas en  iFrame Tab Static html.

La primera de ellas básicamente buscará incentivar a que la gente haga clic en el Me Gusta.

Para la segunda puede venir bien cualquier tipo de mensaje adicional, como puede ser un call to action para que visiten tu blog. Otra idea muy interesante será dejarles de regalo, por ejemplo, un ebook de tu autoría que hayas preparado para que se lo bajen de forma gratuita.

Pues bien, esto es todo acerca de la preparación de la página de fan para tu Facebook con el nuevo lenguaje iFrame html. Ahora que la tienes en marche, te invito a completar tu estrategia en Facebook con otras acciones

Te invito a que lo pruebes y compartas aquí los resultados de tu creaciones.

Acerca del autor de esta entrada,

Franck Scipion

Acerca del autor de esta entrada,

Franck Scipion

¿Harto de nunca saber que pasos dar?

Reserva ya tu sesión 1 a 1 «Claridad Total» y saldrás con un plan de acción cristalino para llegar a tus metas a 12 meses vista. Si vas en serio y valoras tu tiempo, esta sesión es para ti.

¿Harto de nunca saber que pasos dar?

Reserva ya tu sesión 1 a 1 «Claridad Total» y saldrás con un plan de acción cristalino para llegar a tus metas a 12 meses vista. Si vas en serio y valoras tu tiempo, esta sesión es para ti.

¿Te gustaría transformar tu talento en un negocio digital y conseguir tus primeros clientes en 60 días?