lunes, 29 de marzo de 2010

Se acabaron las pestañas FBML de Facebook: cambio a la etiqueta <iframe>

Actualizo este antiguo -y bastante seguido- artículo sobre las pestañas FBML. El motivo de ello es bastante obvio: sencillamente, reescribo el artículo porque el lenguaje FBML de Facebook ha dejado de existir. Los responsables de dicha red social decidieron no seguir con este tipo de código, que era específico de Facebook, pasándose a la etiquetas <iframe> para la misma finalidad. De esta forma, todo el contenido de este artículo se había quedado obsoleto. No obstante, para no borrarlo por completo voy a dejar algunas claves actuales para conseguir el mismo resultado de dichas pestañas, que no era otro que crear páginas o apartados personalizados, con contenido multimedia, dentro de Facebook. Conservaremos también los ejemplos que puse originalmente sobre cómo se utilizaba esta técnica, a modo de nota para la historia de internet.


Static FBML de Facebook


Estos eran los artículos que llevábamos sobre el tema:

  1. Pestañas FBML de Facebook: usos profesionales y breve tutorial. Artículo actual en el que se analizaban algunas landing pages y se explicaba la forma de colocar una pestaña de este tipo en nuestras páginas de Facebook.
  2. YouTube en Facebook: colocar vídeos en pestañas FBML. Artículo en el que se estudia el caso específico de la colocación de vídeos de YouTube, así como los códigos para modificar el tamaño en el que aparecen y su colocación.

El artículo sobre colocación de vídeos de YouTube en pestañas FBML también habrá lógicamente que actualizarlo. Al usarse a partir de ahora etiquetas <iframe> dentro de Facebook no se requerirá ya de un código especial. Bastará con HTML normal, pues <iframe> es precisamente eso, una etiqueta ordinaria HTML, que sirve para colocar una "ventana" (o "marco", de ahí lo de "frame") dentro de una web, donde se carga otra página web distinta. Es decir, la etiqueta <iframe> sirve para cargar una página web dentro de otra, en una "ventanita" con las medidas que indiquemos.


El motivo por el que Facebook ha decidido tirar literalmente a la basura el trabajo de años de desarrollo del código FBML es para mí un completo misterio. El caso es que YouTube también se ha cambiado a las etiquetas <iframe> para colocar sus vídeos en páginas web, y esta unificación no parece que sea cosa casual. Seguramente esta vieja etiqueta del más clásico HTML -lenguaje básico de construcción de páginas web, el primero que apareció- tenga ventajas realmente apreciables. El hecho es que ambos, Facebook y YouTube, se han pasado a este sistema.


Sea como sea, usar una etiqueta <iframe> para colocar contenidos personalizados en Facebook implica -en principio- que deberemos tener una web propia para "cargarla" en dicha etiqueta, pues eso es precisamente lo que ésta hace.


Aunque esto sea así, el caso es que han surgido muchas aplicaciones online que aspiran a ocupar el hueco dejado por las pestañas FBML, ofreciendo hacer más o menos lo mismo de forma sencilla. No me extenderé mucho en ello, pues ya existen en la Red muchos y buenos artículos sobre esto. A continuación colocaré algunos enlaces a dichos artículos, que creo serán útiles para este tema. Lo interesante de estos servicios es que nos permitirán usar la etiqueta <iframe> sin tener una web propia, lo que puede ser bastante útil.


Además de ello, agilizarán mucho la tarea a las personas que no tengan conocimientos de HTML.


Crear una página de bienvenida (página de fans) en Facebook mediante <iframe>, al estilo del viejo FBML


Para los que sí dispongan de una página web propia alojada en internet, existe la posibilidad de crear dentro de ella páginas especiales destinadas a Facebook, que cargaremos allí mediante la citada etiqueta <iframe>. No obstante, aunque sobre el papel parece algo fácil, en la práctica la cosa tiene cierta complicación.


El siguiente artículo puede ser muy útil para guiarnos. Es obra de Martin Zelewitz, publicado en su blog cuentamelared.com. No lo he seguido aún paso a paso, pero de entrada parece bastante bueno:


Taller: ¿Cómo crear una pestaña individual de Facebook con iframe?


El proceso pasa por crear una aplicación en la página de los desarrolladores de Facebook (Facebook developers). Para más detalles consultar el artículo anterior.


Aplicaciones de Facebook alternativas a las antiguas pestañas FBML


De nuevo seguiremos a Martin Zelewitz para este tema. Ha realizado un artículo muy bueno en el que habla sobre 4 aplicaciones de Facebook que podremos usar para sustituir el viejo FBML. Lo mejor es que no necesitaremos una web propia (con su alojamiento en internet y demás). Estos servicios nos lo darán todo "casi hecho". Admiten además código HTML ordinario, que podremos añadir y cargarán en el <iframe> (no los he probado, pero esto es en líneas generales lo que prometen).


El artículo de referencia, que incluye capturas de pantalla, es el siguiente (es un buen tutorial para seguir):


Facebook elimina FBML estático: ¿Qué alternativas tenemos para pestañas individuales? (Martin Zelewitz, cuentamelared.com)


Las aplicaciones citadas en el artículo son:

  1. Wildfire (“iFrames for Pages”). Parece que ha dejado de funcionar, hace tiempo que está offline. ¿Tal vez podría sustirse por ésta? (no comprobada).
  2. Involver (“Static HTML for Pages”)
  3. Shopshare (“iFramewrapper”)
  4. Trisocial (“Easy HTML”)

Antiguos ejemplos de uso de pestañas FBML estático en páginas de Facebook.


Como comenté al principio voy a mantener en esta actualización del artículo los ejemplos de “landing Facebook page” que puse originalmente, a modo de testimonio histórico y como fuente de inspiración. Corría el año 2010, y de norteamérica llegaba con fuerza el fenómeno de las landing page. Lo más habitual era empezar por incluir una pestaña de bienvenida (o “Welcome”) en las páginas de Facebook de empresas y personalidades, aunque como veréis se podían añadir todas las pestañas que se quiera, pues esto dependía de la idea de sitio que quisiera crear:


Sitio Facebook

Por ejemplo esta web tenía un sitio en Facebook bastante complejo: incluía diversas pestañas además del citado “Welcome”. Todas ellas tenían un diseño gráfico personalizado, enlaces a la web dueña de la página y vínculos para suscribirse al feed o para recibir artículos vía email. Todo ello se hacía añadiendo pestañas fbml.


Sitio Facebook 2

Podemos ver aquí otro ejemplo de pestaña Welcome de Facebook: en este caso se incluía una flecha en el fondo que apunta al botón para hacerse fan (animando a ello), y un vídeo de YouTube sobre el personaje. La forma de hacerlo es idéntica al caso anterior: tabla html con la imagen diseñada de fondo y el vídeo -que se llama desde YouTube con el código que éste nos facilita- colocado en el sitio justo de la tabla. Otra buena opción sería usar propiedades CSS en lugar de tablas.


Sitio Facebook OMConsultant

Aquí tenemos otro ejemplo del mismo tipo de pestaña Welcome, en este caso diseñada por mí para un profesional del social media.


Además de estas pestañas, los profesionales solían personalizar también su página muro con un banner vertical, en el que a veces se incluía información de contacto. Para esto no hacían falta pestañas especiales, bastaba con diseñar una imagen de distribución vertical y colocarla como foto de perfil.


Ejemplo de banner vertical en muro

 

Y con esto termino la edición y actualización del artículo, recordando a todos los lectores que si necesitan diseño gráfico para este tipo de elementos, o la creación integral de alguno de ellos, pueden contactar conmigo a nivel profesional para más información.

Artículos relacionados:

17 comentarios:

Anónimo dijo...

Hola: Tengo una pagina en facebook y noto que las pestanas estan ubicados debajo de la foto (el logo de pa pagina), como puedo cambiar eso a pestanas???? ya he tratado la forma pero no logro hacer. Gracias por tu ayuda.

Santi Folch dijo...

Zona Nueva: puede hacerse creando un contenido para fans y otro para no fans (en el artículo viene la forma de hacerlo). Sencillamente, creas una imagen para no fans como la que muestras (desenfocada), y luego otra normal para los fans. Puedes hacerlo con Photoshop.

Anónimo: Dale al pequeño lápiz que hay en la esquina de los cuadros. Ahí podrás pasarlo a las pestañas.

Azul19 dijo...

Hola Amigo quiero que me ayuden!!! mi pag comunidad es!! http://www.facebook.com/pages/Emelec-Manda/161612840537693 y quiero ponerle una imagen de bienvenida! pero no logro ponerle aun!!!he leido muchos tutos pero no logro encontrarle la forma de meterlo, he logrado poner la pestaña y todo pero cuando veo la pestaña esta en blanco!! les dejo mi correo para ver si me pueden ayudar!! emelecmanda@gmail.com

Azul19 dijo...

Asi se ve mi pag de facebook! Alguna Ayuda ???

Azul19 dijo...

Asi se ve mi pag de facebook! Alguna Ayuda ???

10 de marzo de 2011 22:01http://i221.photobucket.com/albums/dd34/gusanobdp/Dibujo-2.gif

Lal1t0 dijo...

Hola amigo, nuevamente preguntando jeje, hace poco hubo una actualización en las paginas de facebook, trate de cambiar la pestaña de fmbl como la principal a mostrar pero no puedo cambiarla, es de negocio local, pero sigue sin poder darme la opción de cambiar la pestaña, ¿Tienes alguna idea de a que se deba?

Zona Nueva dijo...

Buen día, de nuevo yo para comentarte que ya pude hacer la opcion visible para los fans y no fans, pero, como en mi caso son imagenes resulta que al momento de visualizar la pagina sin ser fans, deja el hueco de la otra imagen, por lo tanto los usuarios tendrian que desplegarse hacia abajo para visualizarla, al darle en me gusta ya desaparece y sale la otra en la parte superior. Mi duda se refiere al codigo q mencionas en tu pagina pues creo que le hace falta algo para que no suceda lo que a mi, podrias ver mi pagina y comentarme que estoy haciendo mal?

http://www.facebook.com/pages/The-Beach-House/129527150444165?sk=app_4949752878

Santi Folch dijo...

Hola a todos. Lo primero, comentar que tras la actualización de Facebook parecen haber quitado las pestañas, poniéndolas bajo la imagen del perfil Ya me preguntaron sobre eso, y respondí pensando que aún operaba el sistema antiguo, pido disculpas. Lo cierto es que no sé si es posible poner de nuevo las pestañas.

Vamos con vuestras dudas. Lo primero, como siempre, OS RECOMIENDO ESTUDIAR HTML Y CSS, no es difícil y solventará todas vuestras dudas. Si queréis trabajar con internet es imprescindible.

Dicho esto, Azul19 no sé que problema habrá. Sabes subir imágenes a internet, luego el problema estará en el código html que pongas en la pestaña. Es muy sencillo, pon en Google "poner imagen HTML" o algo así, es de nivel básico.

Lal1t0: ¿tu páginas es de comunidad? Si es así no podrás.

Zona Nueva: Has de estudiar un poco de CSS. Con él podrás posicionar la imagen que sale abajo donde quieras. Tienes que usar la propiedad MARGIN. Por ejemplo, div style="margin-top:-350px"

Busca entre los comentarios anteriores, una persona tuvo ya tu mismo problema.

Lal1t0 dijo...

Hola muchas gracias, amm cambie de comunidad a libro. pero no puedo poner la pestaña fbml como la principal a mostrar, no se a que se deba, si es por la actualización, o por alguna razón no la puedo poner como a la principal la pestaña fbml

Anónimo dijo...

Hola muy bueno el blog, yo queria hacerles una consulta a ver si me pueden ayudar,...

Primero me pasa lo mismo que Lal1t0 que no puedo y no tengo la opcion de cambiar la pestaña por defecto, a que se debe? No lo se, quizas facebook haya sacado esa opcion o vaya saber ...

La otra pregunta y la que mas me interesa, es saber como puedo hacer o el codigo que se tiene que utilizar para cambiar el icono, el logo de una pestaña de fbml, porque el que tiene por defecto no me fusta, me gustaria poner otra imagen, no se si se entiende a lo que digo ...

Espero que sepan lo que digo

Saludos y Gracias Ricardo de Argentina !!!

Santi Folch dijo...

Por mi parte respondo: Lal1t0, creo qué sólo puede hacerse con páginas de Facebook 'a secas', no sé si podrás cambiarla a ese modo (creo que no).

Anónimo, tampoco sé si puede cambiarse esa imagen, si alguien sabe por favor que comente :)

Lal1t0 dijo...

disculpa mi ignorancia jeje, pero como que paginas a secas, amm, yo tenia comunidad y la cambie, pero sigo sin poder cambiar mi pestaña por defecto jeje no se si me podrias explicar bien, eso de paginas a secas.....

Anónimo dijo...

hola santi
disculpa estoy atorado, no se como poner un enlace o link en una imagen, la imagen sola si me aparece pero cuiando le pongo el codigo de map para el link ya no me aparece nada como le hago apra darle clik a una imagen y me manda a otra pagina

Santi Folch dijo...

Lal1t0, no te preocupes que yo tampoco sé que puede estar ocurriendo :) Cuando yo creé mi página no existían esas opciones de hacer 'páginas de comunidad' y demás, que salieron después. Por comentarios de la gente he visto que esas páginas no pueden establecer pestaña por defecto. Yo sigo teniendo mi página normal, que creé hace mucho tiempo, y sigo pudiendo cambiar la pestaña inicial sin problema. Otra cosa no puedo decir.

Anónimo, mete la imagen dentro de una etiqueta A, no puede ser más sencillo. ¿Cuando hablas de 'map' te refieres a crear un mapa en la imagen? Eso no sé si lo aceptará Facebook, desde luego un vínculo normal sí.

Sebastian dijo...

He creado una nueva pestania FBML pero no se que pasa que no lo puedo establecer como pestaña por defecto.
Entro en Gestionar permisos , pero no tengo la opcion de cambiar la pestaña por defecto.

Alguien me podria ayudar

Santi Folch dijo...

Señor@s, tengo un anuncio que hacer. Voy a cerrar los comentarios de este artículo. El motivo principal es que el texto es demasiado largo ya, resulta difícil subir y bajar por la web de tantos comentarios como hay, y no olvidemos que lo principal es el artículo de arriba.

De todas formas las preguntas se han repetido mucho, si buscáis seguro que encontraréis a alguien que ya ha tenido vuestra misma duda. Otro consejo que os doy es que estudiéis HTML y CSS. Os vendrá muy bien para trabajar en internet (de hecho es imprescindible).

De esta forma, cuando tenga tiempo escribiré nuevos artículos y podremos seguir la conversación. De igual forma está la página de Facebook para comentar lo que queráis.

Un saludo para todos, gracias por haber aportado tantas cosas en este artículo.

--- TEMA CERRADO --

Santi Folch dijo...

-- TEMA ABIERTO --

*Atención: dado que Facebook ha eliminado las pestañas (y el código) FBML en favor de cargar ventanas (iframe), vuelvo a abrir el tema, por si alguien quiere comentar algo. A mí desde luego me choca mucho esta decisión de Facebook, que implica tirar a la basura el trabajo de muchas personas (y de ellos mismos) durante años. ¿Por qué lo habrán hecho? No lo sé, pero hecho está.

Artículo actualizado con algunas alternativas actuales.