Consigue ahora una Auditoría Digital Gratuita de tu Negocio

¡Mejora los resultados de tu negocio!

En 3 minutos recibirás en tu email COMPLETAMENTE GRATIS todo lo que necesitas para aumentar las ventas de tu empresa.

 
Mejora los resultados de tu negocio

Static HTML: iframe tabs, crea nuevas pestañas en tu página de fans


14 de junio | Por Juan Merodio

El pasado mes de marzo Facebook desactivó el uso de la aplicación FBML con la que podíamos crear nuevas pestañas en nuestra página de fans y añadir el código HTML que queríamos para crear por ejemplo páginas de bienvenida.

Iframe App: Static HTML iframe tabs, podrás directamente con HTML

Desde entonces han ido saliendo nuevas aplicaciones que sustituian a esta, una de ellas es Iframe App, pero hoy quiero hablaros de otra aplicación que es muy similar al antiguo FBML, se trata de Static HTML iframe tabs, con la que podrás directamente usar HTML.
Para instalarla en tu página de fans debes entrar en https://www.facebook.com/apps/application.php?id=190322544333196 y directamente haciendo click en «Ir a la aplicación» podrás instalarla seleccionando la página de fans en la que quieres hacerlo:
Static-HTML
Una vez instalada lo primero que debes hacer es ir dentro de la página de fans a «Editar la página», una vez dentro entras en «aplicaciones» y buscas «Static HTML: iframe tabs»:
iframetabs
Lo primero que vamos a hacer es cambiar el nombre de la pestaña para poderlo personalizar y para ello hacemos click en «Editar configuración» y se abrirá una nueva ventana desde donde podrás cambiar todas las veces que lo necesites el nombre de la pestaña:
configuracion-static-html
Una vez seleccionado ya el nombre volvemos al muro de nuestra página y podremos ver en la zona de pestañas que ya aparece la nueva pestaña con el nombre que le hemos dado:
bienvenida-html
Si hacemos click sobre ella podremos ya insertar el código HTML que queremos que aparezca, y además nos permite la opción de mostrar contenido diferente a los fans de los no fans, una opción muy interesante:
editar-html
Como veis es una aplicación bastante sencilla de utilizar y muy similar al antiguo FBML, ¿utilizas alguna otra aplicación?
Puedes también escuchar este post en el reproductor de abajo o en mi canal de PodNews:
Ir a descargar

Juan Merodio


Juan Merodio es experto en Marketing Digital y Divulgador de Negocios Digitales (IA, Web3 y Nuevas Tecnologías). Ha fundado la empresa que lleva su propio nombre, Juan Merodio, y desde donde él y su equipo coordinan y desarrollan consultoría de negocio en Marketing y Transformación Digital para empresas en distintas partes del mundo como España, Latinoamérica, Japón, Canadá y Estados Unidos.

Compartir >>

80 Comentarios

  1. Excelente! Y os recomiendo el programa Kompozer para crear el código HTML de forma muy muy sencilla.

  2. Hola!
    Lo he hecho y sale, pero si quiero poner una sólo imagen para que cuando se pinche en bienvenida salga?
    Yo de código html ni idea…
    Muchas gracias!

  3. Me viene genial!! Gracias

  4. Está muy bien, ya lo he utilizado, pero no te permite crear más que una pestaña, así que hay que utilizarlo en combinación con otras aplicaciones para conseguir añadir pestañas, si me equivoco me corregis.

  5. Se pueden crear varias pestañas. Ve a preguntas y centro de asistencia que lo encontrarás en la parte superior de la aplicación. En la 4ª Pregunta ¿Cómo añado más de una pestaña? pueden añadir más.

  6. Te recomiendo Mashlab, está muy chulo, fácil de usar y crear varias pestañas

  7. Hola
    se pueden modificar los iconos de las pestañas que se crean?

  8. Está bien, pero sí se puede seguir usando el antiguo FMBL, sólo hay que buscarlo en aplicaciones. Saludos.

  9. Muy útil. Es fantástico ver como evolucionan las aplicaciones de Facebook para mejorar la calidad de las fan pages, merece un RT porque seguro que puede ayudar a mucha gente.
    Hasta la próxima.

  10. Rosa, para esta aplicación necesitas tener algo de conocimientos de HTML o que alguien te lo monte
    Respecto a crear varias pestañas con esta aplicación no es posible, pero podeis combinarlo con otras y así creais varias pestañas

  11. Yo no tengo ni idea de html y he creado una página de bienvenida de manera muy fácil. Te paso el link y le echas un vistazo http://mashlab.com/

  12. Excelente post!
    Si quieres ver un ejemplo mira http://fb.me/nosincasco
    Uso este mismo app para pedir el «Me gusta» cuando llega el usuario no fan por primera vez.

  13. Genial, ya lo tengo en pruebas, hasta he colocado boton para pedir presupuestos on-line. Gracias por tu ayuda Juan

  14. Yo uso TabSite TabSite by Digital Hill (http://www.tabsite.com/adclick.php?tracker=3971669) – la alternativa a Static FBML.
    Lo bueno es que no necesitas saber HTML. Tienen un modo gratuito pero solo puedes crear un Tab principal. Luego tienen varias precios según el modo que eliges.

  15. Con Static HTML: iframe tabs si se pueden crear más tabs (pestañas). Hasta donde tengo entendido se pueden crear 12. Por ejemplo en esta página se han creado 2 http://www.facebook.com/eltriangle

  16. Hola Juan y compañia 🙂
    Provad iwipa (escribidlo en el buscador de faceboook), es lo más completo hoy por hoy, al menos hasta donde yo se.
    Si tienes conocimientos más amplios lo mejor es combinar. Una muy buena para empresas es contact tab..
    Saludos

  17. Hola Juan, te hago una consulta: se puede modificar el icono de la nueva pestaña? Porque automáticamente Facebook pone un icono genérico y yo lo quisiera personalizar. Se puede? Gracias!

  18. Ivana, no se puede personalizar el logo, de momento no es una opción

  19. Hola un pregunta lo q yo ando buscando es como poner esa estrellita q dice opiniones la ando buscando pero no se donde la puedo encontrar alguien me puede ayudar

  20. Las posibilidades de las nuevas iFrames Apps son muy amplias. Dejo aquí mi enlace con algunos templates (entre ellos una útil tienda en FB) por si a alguien le resulta de interés.
    http://www.facebook.com/pezflash.previews

  21. @Andreas, @Ivonne y @Jesús.
    Un gran favor, me gustaria que me enseñen como colocar mas de una pestaña con la aplicacion de Static Html. y cual seria el codigo ex-fbml para colocar una imagen para los NO fans y para los SI Fans. ??
    Porfavor, me pudieran agregar a mi msn: info@sexologiaenlinea.com para estar en contacto y consultarle cualquier duda sobre los Fanpages??
    http://www.facebook.com/proyectosel
    http://www.twitter.com/proyectosel
    atte. matias
    Exito a Juan merodio 😉

  22. Personalmente recomiendo una herramienta que incluye de todo y me da total libertad a la hora de introducir contenido en mi fanpage:
    http://www.facebook.com/apps/application.php?id=236657419695726
    Permite HTML/CSS/PHP/SQL/IFRAME/FLASH/TEXTOS… Una muy buena herramienta

  23. Hola,
    Tengo una pregunta, como puedo poner el link de mi pagina en mi landing page?

  24. dien dia amigo… me gustaria tener su libro .pero el link ya no sa conecta a su sitio de descarga..
    por favor podria enviarmelo a mi correo.
    millones de gracias amigo

  25. Hola alguien me puede decir como agrego mas de una pestaña en la pregunta no sale nada de respuesta salen codigos por favor si alguien sabe le agradesco ne pueden contactar o enviar mensaje a traves de mi web
    saludos y bendiciones espero alguien me haga llegar la respuesta

  26. olA QUIERO INSTALAR LA APLICACION tatic HTML iFrame Tabs y me dice k no tengo dinero tengo que pagar para poder instalarlo espero su respuesta pronto xk no puedo instalarlo en mi pagina de facebook gracias.

  27. Nacho, puede ser que la hayan hecho entonces de pago, esto sucede a menudo

  28. Que tal!!
    Alguien sabe si hay manera de cambiar el icono de Static HTML iFrame Tabs por alguno otro ya sea de mi empresa o algo parecido????
    Mil gracias…

  29. Que tal a todos agradeciendo la info que me sirvió de mucho les paso el dato.
    Es posible agregar hasta 12 tabs o pestañas solo tienen que ir a esta pagina:
    http://www.facebook.com/note.php?note_id=207382782627172
    y van seleccionando los links cada uno representa una tab. Esperando les sea útil. Hasta pronto.

  30. Hola, Hace Mucho Que Vengo Buscando Como Hacer Para Que Cuando Aprieten El Link De La Alicacion Que Eh Creado Vaya Directamente A Mi Pagina. Alguno De Ustedes Me Podría Ayudar? El Post Es Excelente! Por Favor Ayúdenme…GRACIAS

  31. Gracias, me ha sido de mucha utilidad

  32. Como puedo añadir una pestaña «sugerir pagina a mis amigos» ???
    Gracias!!!

  33. 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

  34. Hasta donde yo se no hay nada mal por lo que cuentas. El administrador va a parar al muro siempre pero los demás -fans o no- son redireccionados a la página elegida como landing.
    Pruébalo si tienes otro perfil, o créalo sólo para probar… :))

  35. Jorge, xavi, una vez que te has hecho fan ya te lleva siempre al muro, no a la pestaña de bienvenida

  36. Es cierto, es curioso como hay cosas sencillas que no te paras a pensar, porque en muchos casos sí te convendria que fans o no llegaran otra vez a la landing porque por ejemplo has puesto ofertas nuevas…Claro que para redirigir al personal hay variados métodos. Saludos

  37. mmmm, qué mal plan, por los visto por ahora no se puede redireccionar a todos, ojalá pronto cambien eso pues siempre en la landing puedes ir poniendo actualizaciones llamativas, y conviene más que los fans se vayan al muro de forma manual, muchas gracias por el apoyo saludos

  38. Tenia ya instalando la aplicación y al querer entrar para modificarla la elimine por error, y no me deja instalarla de nuevo, como puedo recuperarla y ponerla de nuevo…
    gracias

  39. estimado puedes ayudarme ?
    porque mi pagina http://www.facebook.com/Instituto.Inacex?skip_nax_wizard=true
    termina con skip_nax_wizard=true
    PORQUE ENTIENDO QUE ME ESTA TRAYENDO PROBLEMAS COMO POR EJEMPLO
    No puedo asignar administradores a la pagina
    no me deja ver quienes son los que me han dado un me gusta
    no pudo ver las fotos de los fans algunas aplicaciones como Static HTML: iframe tabs me dejo instalarla pero no ejecutarla , realmente estoy complicado con esto ,le escribo desde Chile ojala tenga una pronta respuesta

  40. Mario, eso son parámetro de Facebook que no te sé decir exactamente qué significan pero no creo que sea la razón de los problemas de tu página

  41. Gracias por mantener el articulo abierto, he tenido que releermelo para hacer una nueva pagina de aterrizaje, no me acordaba de como se hacia, jejeje.
    Un saludo.
    Ángel Torres

  42. ¿Sabeis si se puede cambiar el icono o la imagen de la pestaña de EVENTOS? He visto que algunos la tienen cambiada, pero no veo la manera de hacerlo.
    Muchas gracias de antemano.

  43. Como le puedo agregar un iconos a las pestañas??

  44. Saludos! Primero, para agregar más pestañas, simplemente dentro de la pregunta (¿Cómo añado más de una pestaña?) en el centro de asistencia de la aplicación, donde aparece un código, seleccionan el número de pestaña que desean (desde la segunda hasta la doceava, dentro del código amarillo que aparece) nuevamente les pedirá instalar la aplicación en la página pero lo que está haciendo es agregar una nueva pestaña, si se dirigen a la página verán que ahí está la pestaña.
    Ahora con lo de cambiar el símbolo de la estrella por una imagen personalizada (usando el modo de biografía) en donde aparece la lista de pestañas verán en la última un pequeño cuadro con una flecha que indica hacia abajo, al presionarla se despliegan todas las pestañas y al pasar el cursor encima de ellas se habilita un icono con un lápiz, lo presionan y seleccionan la opción de «editar configuración» ahí podrán cambiarle el nombre y subir una imagen personalizada. Espero que esto les sirva de ayuda, saludos.

  45. Como puedo hacer en el nuevo modo BIOGRAFIA para que esta pestaña sea la predeterminada en el inicio?

  46. Marcelo, ya no se puede poner una pestaña predeterminada, con el nuevo cambio han quitado esa funcionalidad

  47. En español en facebook.com/StaticHtmliframeTabsTutorialEs­­­panol

  48. HOLA AMIGOS OIGAN HE ESTADO LEYENDO SOBRE ESTO Y AL PARECER YA NO SE PUEDE PONER UNA FANPAGE PREDETERMINADA…. ALGUIEN SABE COMO PONERLA O SI NO CUAL SERÁ LO INTERESANTE DEL HACER TODOS ESOS PASOS PARA TENER UNA LANDING PAGE PERSONALIZADA SI NO LO VA A VER NADIE??? AYUDA PLIS

  49. hola Alex,
    Tienes razón en que ya no puedes poner la pagina Fan Gate por defecto pero hay otros técnicas que podemos usar en su lugar. Los he descrito en este articulo:
    http://www.andreasschou.es/2012/03/26/fan-gate-con-facebook-timeline/
    Dime si necesitas ayuda o aclarar alguna cosa.

  50. Estaba usando iwipa para crear una especie de mini sitio web dentro de la fan page. Por error eliminé la aplicación y ya no puedo volver a instalarla. ¿Cómo puedo hacer para recuperarla?
    ¡Muchas gracias!

  51. C.C en principio si la has quitado deberías poder volver a instalarla de nuevo, vuelve a probar no sea que se tratara de un error puntual y sino habla con e equipo de iwipa y comentaselo

  52. Una consulta respecto a esta aplicación, si yo en una página facebook quiero colocar varias pestañas con esta aplicación, como lo hago? x ejemplo. Quiero colocar una pestaña como bienvenida, otra como promocion otoño, otra promocion IVA, las tres contienen una imagen promocional diferente. Hasta el momento utilice la de involver, pero pq solo teniamos una pestaña colocada, ahora a la hora de insertar mas, no me deja me pide pagar y creo que esta aplicación no lo hace.
    Gracias Juan. Espero su respuesta.
    Saludos

  53. David, para hacer varias pestañas te recomiendo Pagemodo, que aunque para varias es de pago pero no es caro, te dejo la info que publiqué en un post https://www.juanmerodio.com/2011/aprende-a-crear-una-landing-page-en-tu-pagina-de-fans-de-facebook/

  54. Al hacer click en el boton me gusta quiero que actualice y vaya directamente a mostrar la pagina de fans (la segunda). Eso lo hago con algun codigo Php? porque en la configuracion de la aplicacion no lo vi. ¿Como lo hago?. Gracias

  55. Martin, por cambios de Facebook ya no podemos llevar por defecto a un usuario a una pestaña para que haga click en «Me gusta»

  56. Que tal Juan! Ante todo muchas gracias por tus publicaciones. Quisiera hacerte una consulta… cuando agrego el código HTML que me da JUSTIN.TV para transmitir broadcasting en vivo de un estudio de radio con esta aplicacion en Facebook, me aparece todo en blanco. Y pegando el link, carga la pagina pero no se ve el broadcasting en vivo… solo un rectángulo amarillo. Es acaso que Facebook realizo alguna clase de bloqueo a JUSTIN? Desde ya, muchas gracias por tu tiempo!

  57. Daniel, que yo sepa no hay bloqueo, puede ser algo de la app de embeber el HTML que no admite ese código, prueba con otra app de FB que te permita embeber el HTML para ver si te pasa lo mismo

  58. Hola Juan! Muchas gracias por tu respuesta. Ya lo he intentado con varias app y con todas me pasa lo mismo. Por eso es que he llegado a pensar en un bloqueo de Facebook hacia Justin.tv. Si es que encuentras alguna solución te agradecería enormemente tu ayuda. Nuevamente muchas gracias por tu tiempo.

  59. Juan cuando instalo la aplicación no me da opción a poner para fans y no fans,

  60. Luisa García, puede que haya dejado de funcionar, prueba con Cooltabs que tiene muchas opciones:
    https://www.juanmerodio.com/2011/cool-tabs-una-herramienta-para-crear-tus-propias-pestanas-en-facebook/

  61. No me deja cambiar la imagen, ya lo he intentado con varios tamaños y formatos de los permitidos por static html. el mensaje es : La iimagen que estas tratando de subir es invàlido. Puede estar dañado, por error de formato de archivo o por error de la medida. Que pasara?

  62. Hola Juan,
    Gracias por tus aportaciones.
    Quisiera preguntarte como puedo mandar a los visitantes a mi pagina de fans cuando hacen clic en «Me gusta» a una landing page con un video y un formulario de autoresponder.
    Te doy las gracias anticipadas.

  63. Salvador, eso ya no se puede, hace un tiempo Facebook dejó de permitir hacerlo

  64. Juan, gracias por tu diligencia en contestar.
    Entonces cual es la mejor manera en la actualidad de mandar a los visitantes de una Fan Page a una pagina de captura de afiliado, que contiene un video y un fomulario.
    Gracias y un cordial saludo

  65. Salvador, la única forma es a través de anuncios de pago, los Facebook Ads si te permiten llevar a la gente a una pestaña determinada

  66. OK, gracias por tu respuesta

  67. Hola Juan,
    Gracias por los posts tan interesantes de tu blog.
    He implementado varias pestañas con Static HTML iFrame Tabs en varias páginas de Facebook pero hace unos días he detectado que ha dejado de mostrar el contenido cuando se trata de enlaces a páginas web sin https/ssl. Lo mismo ocurre con Contactme form cuando se pega el código html o se instala la aplicación. ¿Sabes alguna solución?
    Por cierto, espero poder saludarte la próxima semana en el Congreso Internet 3.0 en Alicante.
    Saludos y gracias!

  68. Araceli, cada vez Facebook se pone más restrictivo, has probado con otras herramientas como cool tabs para ver si te da el mismo problema? será genial saludarte personalmente en Internet 3.0 el próximo día 9 🙂

  69. Gracias por la respuesta, Juan. Pues, como bien dices, es cosa de Facebook, porque al probar con Cool Tabs el mensaje es similar:
    «Sólo se admiten urls seguras (con https) ya que el contenido se va a mostrar dentro de Facebook y al ser un sitio seguro, los navegadores modernos bloquean cualquier contenido no seguro que se intente mostrar en una web segura».
    Solución: poner https/ssl en la web.
    Buen finde!!

  70. Juan eres un figura!!!
    Llevaba varios meses con problemas en mi fanpage, pues debio de cambiar la aplicación que yo tenía instalada » static iframe html» y ya no me mostraba mis paginas. Ahora gracias a tu artículo y lo más importante, a tu excelencia, he podido arreglar la situación que tenía con mi Pagina de fans.
    Eres un artíststa.
    Mil gracias.
    Rodrigo Solera

  71. Cordial saludo Juan,
    Quisiera saber si conoces la forma más fácil de poner un Tab en Facebook donde pueda por medio de un iframe traer una pequeña aplicación en html y php pero que me permita crear navegación dentro del mismo tab, ya que he encontrado algunas que solo me dejan como crear una landing pero no me dejan crear enlaces dentro de mi aplicación …
    y una pregunta adicional …es necesario tener mi sitio con SSL para que funcione o hay manera de poner el tab como lo necesito pero sin que mi dominio tenga soporte para ssl?
    Mil gracias por tu ayuda

  72. Carlos, las preguntas son ya quizá demasiado técnicas para mi, y creo que un desarrollador te prodía ayudar mejor, pero en principio las aplicaciones llevan limitaciones, otra opción es crear una propia que así puedes adaptar a lo que necesitas exactamente

  73. Hola Juan
    En primer lugar agradecerte que estés en la red: la de veces que has resuelto mis dudas gracias a tus post, videos y demás!
    En segundo lugar, la duda: en la fanpage de Facebook de la empresa donde trabajo he instalado el static html iframe tab. Todo muy bien, tanto la página para los no seguidores como la landing page. El problema es que aunque la pestaña es visible en la biografía de la página (tanto a la izquierda, con su correspondiente imagen, como bajo la foto de portada, como texto), apenas entra gente. Es como si no existiera y en el analytics de la aplicación aparece el número de personas que han visitado la pestaña: muy pocas.
    Lo que llevo intentado hacer desde hace unos días es intentar compartir el enlace, pero el link que ofrece lo único que hace es llevarte a la biografía de la página de mi empresa, no a la pestaña en concreto. Que el enlace te lleve a la portada principal de la fan page es estar en las mismas…
    Así que, después de todo este rollo, mi pregunta es, ¿es posible redireccionar a la gente a la pestaña en concreto? ¿se puede obtener el link de la pestaña de alguna manera?
    Muchas gracias, de antemano
    Saludos

  74. Nikei, ya no se puede redireccionar a la gente a una pestaña en concreto, esto lo eliminó Facebook ya hace un tiempo, el link de la pestaña si, simplemente accede a ella y copia la url, con esto debería llevarte

  75. Muchas gracias por la respuesta, Juan. Al principio ponía el link y sólo me llevaba a la portada de la fan page, pero ahora sí que va a la aplicación. Debí de copiarla mal o no sé…
    Ya que estoy, otra duda que te quería comentar, ¿hay alguna manera de desactivar el control de seguridad de Facebook? Siempre que quiero publicar algo en al biografía me sale el consiguiente captcha. He escrito a Facebook miles de veces, pero nada. Lo peor es que no sólo me pasa a mí, sino también a mis contactos cuando quieren compartir algo de mi muro.
    Gracias de nuevo : )

  76. Nikei, eso es raro, realmente a mi no me pasa nunca y creo que a la mayor parte de la gente tampoco, así que no sé la razón y no hay nada que yo sepa que permita desactivarlo

  77. Ok
    Muchas gracias igualmente
    Un saludo : )

  78. Hola tengo una duda respecto a esta app, la he instalado en mi fanpage y no tengo problemas cuando es vista desde un ordenador, el problema viene cuando lo intento desde un dispostivo móvil pues no es visible por ningún lado, sabes como hacer para que se pueda ver la tab de la aplicación en un móvil?

  79. ¡Hola Juan! ¿Sabrías decirme si esta app sigue funcionando? La he instalado pero no me permite configurarla y el nombre inicial con el que se instala no es muy convencional. Aparece lo siguiente: Hosgeldin . Gracias por tu ayuda.