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!
¿Porque tener una Landing Page ?
Un de los elementos clave de una 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.
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.
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.
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
- Diseñar la imagen con tu programa favorito (Photoshop, Fireworks, PowerPoint o Paint)
- Recuerda mi recomendación de no utilizar imágenes con ancho superior a los 520 píxeles.
- Salva tu imagen en formato .gif, .jpg o .png
- Tienes que subir tu imagen a Internet. Si tienes un blog y un plan de alojamiento propio, subela a tu blog
- 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.
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 
PDF
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
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.
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…
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!
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!
Gracias Victor, esta info es la que estaba buscando…
Ahora me pongo a investigar mas sobre el manejo de iFrame…
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
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
Se vé muy interesante, no conocía esta alternativa Pepe…
Gracias por compartirla!
Saludos…
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
Ya me tienes como Fan Alex! Gran trabajo
Gracias Franck!
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
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!
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!
De nada Rubén.
De cara a tu petición no tengo idea!
Amigo, no puedo cambiar la configuracion de la pestaña de aterrizaje. No me aparece la opción… Que puedo hacer?
Míralo otra vez, tiene que estar
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?
Ni idea Danny. A mi no me molesta este favicon
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
Hola me parece genial estas herramientas, yo estoy creando una aplicación donde aparecen fotos de personas extraviadas la url es http://apps.facebook.com/ayudame/
Agradeceré cualquier aporte y/o sugerencia al respecto, mi idea es poder ayudar con un pequeño grano de arena a quienes lo necesiten
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.
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.
Muchas Gracias fue de gran ayuda!
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.
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.
Quisiera cambiarle el icono de la pestaña de FBML por mi logo…….. alguien sabe como???????????????’
Si no eres dueño de la aplicación en Facebook o si esta aplicación no te lo permite, es imposible Jhonny
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
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.
y donde consigo el codigo
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.
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
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”)
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
Hola Ana
Asegúrate que el enlace es de tipo http://www.tuwebaqui.com (o punto lo que sea). Dejame la URL de tu página en Facebook si quieres le doy un vistazo
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
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!
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
Hola, alguien me podria explicar como cambio el favicon de la aplicación FBML de facebook?
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
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!
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
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.