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.

Print Friendly

¿TE HA GUSTADO LO QUE HAS LEÍDO?

Si es el caso, únete a otras 25.000 personas que reciben cada semana mis mejores consejos sobre negocios online y blogging, y además se forman, GRATIS, con mi curso online de 10 clases, "Pro Blogging 10/10". Haz clic en el botón abajo.

¡EMPIEZA HOY MISMO!

¿Sabias que LifestyleAlCuadrado.com está diseñado con el Framework Genesis, de StudioPress?

Framework Genesis

Genesis te permite de construir unas webs WordPress increíbles, de forma rápida y sencilla.

Que seas un novato o un desarrollador experimentado, Genesis te brinda los mejores Look & Feel para tu proyecto, un entorno seguro totalmente optimizado para dispositivos móviles (HTML 5) y la mejor optimización SEO del mercado.

¿Quieres leer mi análisis a fondo?

Comments

  1. says

    Otra alternativa es EasyHTML de Trisocial, que es gratuita y permite crear hasta dos pestañas por página permitiendo script y css

    Si se necesitan más pestañas, marca blanca, o distinguir contenido para fans o no fans se puede disponer de EasyHTML pro, que está dentro de la suite de aplicaciones facebook de Trisocial

  2. Victor says

    Otra alternativa es hacerlo tu mismo, creando una app con la url de tu web que deseas mostrar en el fan page, gracias a los iframe. De esta forma se puede colocar lo que sea, para interactuar aun mas con nuestros clientes, desde Facebook.

    • says

      Primero que nada Franck muchas gracias por esta guía, justamente estos días estaba buscando info sobre esta temática y me haz traído mucha luz al respecto.

      Segundo Victor podrías dar mas detalles acerca de esta modalidad, o donde encontrar info sobre como hacer TABs manualmente? Estuve buscando en Facebook Developers pero no pude dar con info especifica sobre esto. Desde ya muchas gracias…

      • Franck Scipion says

        Puedes usar la misma aplicación con una sola vista o la que Luis menciona (no la he probado)
        Lo que plantea Victor me parece demasiado trabajo que una landing page básica. Lo de los iframes permite en efecto hacer cosas más complicada. Prometo presentar un ejemplo pronto!

      • Victor says

        Gaston, ahi te dejo el enlace donde aprendi. Fui capaz de integrar todo un joomla en el fan page por medio de Iframe y todas las apps de joomla (modulos, plugins y componentes) funcionaron perfecto.

        Igual servira para cualquier plataforma cms, xhtml, css2. 3. JS, etc…

        De esta forma se me ocurre mil cosas por hacer…

        Exitos!

        • says

          Gracias Victor, esta info es la que estaba buscando…
          Ahora me pongo a investigar mas sobre el manejo de iFrame…

  3. Pepe Montoro says

    hola a todos-

    en primer lugar gracias Frank por todo y para continuar tambien estaba estudiando con que hacerlo y me he encontrado con esto wp4fb.com, a ver que os parece porque es wordpress para facebook. la diferencia es que si no clica en megusta no puede continuar, me parece interesante e inteligente, pero ya os digo no lo he probado.
    Frank, a ver si puedes darle caña a esto y nos iluminas…

    saludos

    • Franck Scipion says

      wp4fb.com tiene buena pinta, aunque no acabo de entender el concepto del todo.

      Si tienes un blog ya tienes un theme, ¿verdad?

      Ahora estos dicen que ofrecen un theme especifico que se integrará como iframe en Facebook… o sea que tengo que montar un WP especifico para la página de aterisaje en Facebook. Si es así, para mi no tiene sentido. Mejor utilizar una aplicación FB para tu Landing Page. Lo del iframe sirve para otra cosa

    • says

      Se vé muy interesante, no conocía esta alternativa Pepe…

      Gracias por compartirla!

      Saludos…

  4. says

    Hola Franck!

    Tu entrada me motivó a crear mi bienvenida para mi fan page! Así que puedes sentirte orgulloso de que fue lo suficientemente bueno como para que yo tomara acción jejeje.

    No me quedó tan espectacular como le quedará a mi diseñador cuando lo tenga de vuelta (acá es Semana Santa ahora mismo), pero no quise dejar pasar 1 día más sin que eso estuviera al aire.

    Me esforzaré más en los motivos que doy para que se registren y le pasaré esa info a mi diseñador directamente.

    Por ahora te presento a la obra de tu entrada ;-) http://www.facebook.com/alexnegocioweb

    Gracias por todo lo que publicas.

    Saludos desde Caracas!

    Alex

  5. Mauricio says

    Hola Frank mi nombre es Mauricio y soy de Argentina, quería agradecerte y felicitarte por el aporte muy bueno me es muy útil el editor que recomendaste.
    Si me lo permites quería dejar mi aporte, es un código html que genera un iframe totalmente configurable. Este ifram funciona perfectamente para mostrar misite o partes de sitios creados en flash o php. Muy útil para incorporar secciones de joomla en facebook. La configuración es muy sencilla solo tienen que colocar la Url de su site y configurar el alto y ancho. Si tienen alguna duda con gusto la contestare. Muchas Gracias

    • Franck Scipion says

      Hola Mauricio
      Askimet borro tu código, por razones de seguridad. Te aconsejo preparar una página en tu web, donde dejas el código y las explicaciones. Una vez que la tienes lista, enviame el enlace, y lo pondré en tu comentario

      ¡Gracias!

  6. says

    Gracias Franck por este tuto tan útil. Alguien sabe como cambiar el icono pequeño de la pestaña en el menú de navegación de la izquierda. Para quitar esa estrella y hacerlo 100% personal.
    Muchas gracias a todos!

    • Franck Scipion says

      De nada Rubén.
      De cara a tu petición no tengo idea!

  7. Danny says

    Hola amigo, gracias a tu blog e creado una pagina de bienvenida, pero no se como cambiar el favicon, me sale la estrella q es por defecto, como podemos cambiar esto?

      • Yeikel says

        Hola Franck,

        A mi también me gustaría cambiarle el “favicón” por ejemplo, ponerle un logo pequeñito, ya eso se puede hacer esta App: https://apps.facebook.com/iframehost/.
        Yo lo intenté hacer pero no pude, salio mal o quizás hice algo mal. :(

        ¡Gracias a tu Blog!

        Yeikel

  8. says

    Hola buenos días, quiero agradecerte por el tutorial, pero mira que tengo un problema, la verdad soy nuevo en esto y no he podido configurar mi TAB, no se que estoy haciendo mal, me podrías colaborar por favor, ya he leído las instrucciones una y otra vez pero no doy con el error. este es el código que estoy poniendo en el fan page.

    Calcibon

    Además también intente con este:

    Calcibon

    Y tampoco, te pido por favor me colabores.

    Muchas gracias y disculpa la ignorancia.

    saludos.

  9. says

    Hola Franck l
    Lei tu articulo y me intereso en gran manera asi que lo puse en practica y me he diseñado una landing page que ha quedado muy bien, considero que tu publicación es muy buena,gracias por tu tiempo y buena disposicion para compartirla.

  10. lilo says

    Buenos días,
    podemos crear una pestaña con un doble del muro?. Es decir, tener dos muros, para utilizar uno para publicaciones propias, y otro para insertar enlaces externos.
    He intentado con una aplicación FBLM donde puedo cambiar el nombre de la pestaña y ahí se puede meter un codigo html (creo) de lo que supuestamente quiero que aparezca, pero no conozco el codido del muro de Facebook, para duplicarlo.

    • Franck Scipion says

      No estoy seguro de entender lo que quieres hacer…
      Puedes elegir mostrar solo tus actualizaciones en tu muro, pero en este caso, si pretendes animar a una comunidad, pues mal asunto.

  11. jhonny says

    Quisiera cambiarle el icono de la pestaña de FBML por mi logo…….. alguien sabe como???????????????’

    • Franck Scipion says

      Si no eres dueño de la aplicación en Facebook o si esta aplicación no te lo permite, es imposible Jhonny

  12. ELIANA says

    HOLA QUISIERA SABER COMO HAGO PARA AGREGAR EN LA SEGUNDA OPCION QUE VEN LOS QUE YA SON FANS PARA COLOCAR ALGUN CODIGO PARA QUE INVITEN AMIGOS, SUGIERAN MI PAGINA Y ASI CONSEGUIR MAS FANS GRACIAS
    Lo he visto en varias paginas pero no se como lo hicieron como por ejemplo en la pagina de Jesus tiene mas fans que cualquiera vamos a demostrarlo y cuando pones me gusta luego aparece invita a 6 de tus amigos quiero algo asi

    • Franck Scipion says

      Puedes usar una página web que tiene esta funcionalidad de enviar a varios amigos y ponerla en el segundo tab.
      Nada obvio si no eres un poco “teckie” Eliana.

      Yo personalmente dudo mucho de la eficacia de este segundo tab, al no ser que me hables de una proyecto caritativo con fuerte marca y reconocimiento en le mercado. Alguien que acaba de concerte y hacerse Fan no te va a recomendar a sus amigos sin haber previamente comprobado lo interesante que son tus contenidos.

  13. anto says

    Hola, Victor: ¿podías volver a poner la url del sitio donde aprendiste, si es que ha sido trasladado? ¿O quizás enviarme algún otro link o PDF? Me interesa mucho la opción que planteas. Ya puestos: ¿algún método eficaz para cambiar el icono de la tab? Gracias. Antonio.

  14. Jorge says

    Hola resulta que ya pude lograr poner la imagen y probé con una cuenta distinta que tengo, cuando me voy a mi página y aún no soy fan, me abre la pestaña de bienvenida y veo el anuncio para no fan, en cuanto le doy “me gusta” cambia la imagen a la de fan, pero si me voy a otro lado y vuelvo a buscar mi página y entrar, ya no me manda a la pestaña de bienvenida si no al muro, esto se debe a que ya soy fan, :S, y si quiero ver las pestaña de bienvenida la tengo que buscar de forma manual, me gustaría que quien sea que entre a mi página ya sea fan o no fan sea direccionado a la pestaña de bienvenida :S. ya le dí en gestionar permisos y en la opción de pestaña de inicio predeterminada elegí la de bienvenida pero aún así no puedo lograrlo :S, qué es lo que está mal? estoy usando Static HTML: iframe tabs ayuda please

    • Franck Scipion says

      Asi funciona el principio de la Landing Page, Jorge. Solo se ve una vez si eres no Fans, los Fans pueden ir a participar directamente en el muro. Ya has modelizado su aterrizaje en tu página de fan durante la primera visita.

      Como administrador puedes ver una previsualización de tus 2 vistas, Fan y No Fan (dale al botón “Preview”)

  15. Ana says

    Una preguntita… he creado una landing page de bienvenida con iframe static. En ella he puesto la dirección web de mi página y al pinchar en el enlace me da error. He revisado el código html y es el correcto, pero al volcarlo al iframe y pinchar en el hiperenlace no me redirecciona a mi web, sino a otro sitio.

    ¿qué puedo hacer?

    Gracias

  16. Fran says

    Hola ante todo muy bueno el tuto, enhorabuena.
    por otro comentar que he conseguido a través de Static IFRAME Tab establecer una landing page, pero esta me aparece como una pestaña dentro del facebook, es decir no es lo primero que aparece cuando alguien entra en mi facebook.
    avisa de que estoy usando el nuevo interface de facebook.
    alguna sugerencia, llevo días intentando que aparezca como página de bienvenida pero no lo logro.
    muchas gracias
    saludos

    • says

      Hola Fran

      Desde la implementación del Timeline en las páginas, la opción de Landing Page por defecto ha desaparecido. Siempre entras por el Timeline, que seas o no Fan

      Lo siento!

  17. Pedrin says

    haber me parece genial esta aplicacion. Mi duda es q, si tengo varias pestañas bajo de ellos parace un icono de una estrella, un corazon , etc.
    Se podra cambiar estos iconos, ademas no se puede usar el mismo icono, hay alguna forma gracias

  18. Andrés says

    Hola, alguien me podria explicar como cambio el favicon de la aplicación FBML de facebook?

  19. alejandrsa says

    Hola!!! una consulta.. estoy usando el HTML estático y ya cargué la imagen que quiero publicar… lo que me gustaría saber es como puedo cambiar la imagen de ese ícono, casi siempre es una estrella unos signos , pero me gustaría poder ponerle otra foto o color se puede?? Saludos

    • says

      Si se puede, mira tu admin de la página verás un enlace para cambiar el icono, pero tendrás que crear una app en Facebook!

  20. says

    Hola, estoy intentando poner una página de aterrizaje en mi página de negocio en facebook con esta aplicación. Utilizo optimizepress para hacer las landing, pero no se como copiar el código para ponerlo en la página, ni tampoco el tamaño. Me puedes ayudar?
    Gracias

  21. says

    Creo que hay algún tipo de problema, este es el mensaje que me da cuando intento entrar :

    no puedes administrar las paginas que contiene la aplicación instalada

    Alguna forma de resolver esto.

  22. says

    Excelente tuto … en mi caso utilizo muchos los frames para generar numerosos escenarios y plataformas de aterrizaje. Es una de las mejores formas de trabajar en Facebook.

  23. says

    Muchas gracias Franck. Tu artículo fue trascendental para poder hacer la landing page de mi sitio.