Plantillas para pestañas FBML de Facebook, de gran calidad y gratuitas

Plantilla para FBML de Facebook

El comentario de Natalia me ha mostrado un fantástico recurso del que me voy a hacer eco. Lo guardamos aquí para consulta de todos (incluido yo, por supuesto). Se trata de 23 plantillas de excelente calidad para colocar directamente en pestañas FBML de Facebook (sin duda uno de los temas que más interés suscitan entre los lectores de este blog).

Las plantillas tienen una tremenda calidad en cuanto a diseño (están realmente trabajadas), y cuentan además con diversos slideshow de imágenes, secciones diferenciadas, enlaces a otros sitios sociales y muchos detalles más. Es decir, son mucho más que una imagen y un texto, se trata de pestañas totalmente acabadas y profesionales, listas para ser colocadas. Cada una de ellas tiene detrás días de trabajo, no os quepa duda.

El procedimiento para colocar una de estas plantillas en nuestra pestaña sería (y de paso contesto a Natalia de nuevo) subir todas las imágenes de la plantilla a un alojamiento de internet (en mi caso lo he hecho con Picasa, un servicio gratuito de Google que va bastante bien), y sustituir la ruta a las mismas en el código de la plantilla por su nueva localización en internet.

Este código puede encontrarse en el archivo de nombre "code.txt" dentro de la carpeta "facebook_page_code". Las imágenes que hay que subir son todas las que haya en la carpeta "images" (a su vez dentro de "html"). Si no se suben las imágenes a internet lógicamente no aparecerán, pues la ruta que aparece en el código original se dirige a una carpeta local no accesible desde internet.

Una vez hecho esto, sencillamente copiamos el código modificado tal cual a nuestra pestaña FBML. He puesto una de las plantillas en mi pestaña (ir a Facebook para verla) y funciona perfectamente.

Por último, comentaros que estas plantillas, aunque son gratis, tienen una licencia de uso. Han sido realizadas por Facebook Page Templates, y con una gran calidad además. De esta manera ellos nos solicitan que mantengamos en enlace a su página que hay en las plantillas (es una licencia estilo Creative Commons). Seguramente es lo mínimo por compartir gratuitamente un trabajo de esta calidad. Os recomiendo además que visitéis el sitio pues tiene muchas más plantillas aparte de éstas que recojo aquí.

Dicho esto, cuelgo las plantillas (originalmente mostradas en la web trucos facebook, que también recomiendo visitar pues recopila todo tipo de materiales e información relativa a Facebook):

DEMO | DESCARGAR

20 comentarios:

Anónimo dijo...: Hola!
MUchas gracias por la información, pero me ha sido imposible hacer nada. Subí mis fotos a picasa, me descargué la plantilla desde el link que ofreces en tu post y me he quedado ahí.
También me descargué la función de FBML y no he conseguido más que cambiarle el nombre a la pestaña por "Hazte socio" y pegar el link que te tenemos en la web de "Hazte socio" porque copié el código fuente de la Web en el recuadro y no se ve nada!!!
Si puedes ayudarme, te lo agradezco; 20 de febrero de 2011 18:13
Santi Folch dijo...: Hola anónimo, no termino de entender lo que dices. Si lo que quieres es pegar el código íntegro de un página web en una pestaña fbml, te digo ya que no se puede. Las pestañas no tienen elementos como BODY o HEAD -entre muchas otras diferencias-.

Respecto a las plantillas, tal y como dice en el artículo, están listas para ser copiadas a la pestaña. Puedes copiar el código HTML de las plantillas, pero tienes que sustituir la ruta a las imágenes por las que has subido a Picasa.

Léete con calma los artículos, y si aún así no lo consigues, tal vez deberías contratar a un profesional.; 21 de febrero de 2011 16:51
j0z3 dijo...: Hola q tal? me parece muy interesante esto, pero tengo solo una pregunta, donde colocar los codigos javascript o jquery (en caso de requerirlo) en el momento de copiar el codigo html?

Algunas plantillas tienen codigo javascript para cambiar las imagenes, ese código donde debería estar?

Me gustaría y seria de mucha utilidad poder crear plantillas personalizadas pero sería aún más interesante poder usar frameworks como jQuery.

Saludos..; 4 de marzo de 2011 14:43
Santi Folch dijo...: Hola J0z3, no estoy muy seguro, pero supongo que -en caso de que Facebook te lo acepte- puedes poner código javascript normalmente. Es decir, directamente mediante una etiqueta script. Eso sí, como sabes tendrás que tener el script alojado en alguna parte y poner la ruta hacia él, así que te recomiendo las URL que facilita Google.

Aunque supongo que también podrás usar tus propios alojamientos para los script... Nunca lo he hecho, así que ya nos cuentas qué tal.

Un saludo!; 6 de marzo de 2011 11:11
Jacobo dijo...: Hola, primero muchas gracias por la información.

Me he quedado atascada con las imagenes, he subido las fotos a la galeria, copio la ruta de la imagen y la cambio. Imagino que así no es porque no sale.
He vuelto a leer los pasos y he que no me entero... y es que ahora no me lo puedo sacar de la cabeza, por favor me puedes explicar paso a paso, please, para torpes.
Gracias; 7 de marzo de 2011 12:39
Santi Folch dijo...: Explicarlos más sencillo es imposible. :) Mira, pon tu código sin corchetes ni nada para que podamos verlo. Entretanto te recuerdo que las fotos has de subirlas a un alojamiento de imágenes, como puede ser Picasa, ImageShack, etc...

Es decir, no funciona si las subes a una galería de Facebook, hace falta que la imagen tenga su propia URL única. Ocurre lo mismo si quieres poner una foto en un foro, por ejemplo.; 7 de marzo de 2011 18:37
Mar dijo...: Hola
También hay otras aplicaciones que te permiten de forma sencilla introducir fotos, vídeos, javascript (como por ejemplo un mapa de google) sin tener ni idea de html... aquí os dejo algunas: Alternativas FBML; 22 de marzo de 2011 13:04
Esteban dijo...: Hola!! Ante todo mis mas sinceras felicitaciones por tu blog, excelente información la que he logrado ver en estos días.
Entiendo todo el tema de pegar el código, subir las imágenes a un servidor, las rutas ...etc, pero me bajé una plantilla que posee tres carpetas: una de código, otra se llama "html" y otra "psd" que hago con esas dos carpetas? las subo a un servidor, las llamo, como las vinculo al fbml? Mil gracias!!; 25 de marzo de 2011 23:13
Santi Folch dijo...: Pues por lo que comentas parece que la que pone "html" contendrá el código que hay que copiar en la pestaña (sustituyendo la ruta de las imágenes). No sé que código contendrá la otra...

La carpeta "psd" contendrá archivos editables de Photoshop, por si quieres modificar la imágenes de la plantilla a nivel de diseño. Todo un detalle haberlos incluído por parte del autor de la plantilla (son los originales, digamos).; 28 de marzo de 2011 10:43
Anónimo dijo...: Disculpa, no entendí bien lo de los documentos de Photoshop..

En el entendido de que los modificara por unos propios.. Importa si les cambio los nombres a las capas? otra pregunta: Debo subir las imagenes originales? y el documento editado en Photoshop para qué servira entonces (imaginemos que lo guardo .JPEG).. debo subirlo en una página de almacenamiento de internet (para el caso picasa)?.. estoy confundido xq tengo las imagenes originales y la en teoría "editada".. sacame de la duda por favor.. Gracias :D; 14 de junio de 2011 00:45
Santi Folch dijo...: Hola, te respondo:

No importa si le cambias el nombre a las capas, puedes de hecho hacer lo que quieras con esos archivos, para eso están. Para modificar las imágenes como quieras.

Una vez acabes eso, tendrás que guardar la imagen en formato JPG a 72 píxeles/pulgada. La mejor forma de hacerlo es, sencillamente, elegir "guardar para web" de Photoshop.

Después tendrás que subir la imagen a Picasa, poner la URL de la misma en la parte correspondiente del código HTML... y listo. La plantilla tendrá ahora tu imagen personalizada.; 14 de junio de 2011 10:31
vicpool dijo...: Excelente lo hice es mas logre editar los psd y me salio padrisimo mil gracias; 1 de julio de 2011 19:05
Anónimo dijo...: hola, he buscado la aplicacion fnml pero no la he encontrado, por ahi lei que facebook la elimino... que hago?; 15 de julio de 2011 08:39
Santi Folch dijo...: ¿Has puesto FBML en el buscador? A mí me sigue apareciendo, se llama "FBML estático".; 16 de julio de 2011 14:11
Anónimo dijo...: Hola amigo, esta muy interesante todo en este sitio, pero tengo la duda de como puedo editar el contenido de estas plantillas. (no se editar html ni fbml)
Muchas gracias de antemano

Saludos.; 24 de agosto de 2011 19:04
Santi Folch dijo...: Hombre, yo creo que la respuesta está en tu misma pregunta... deberías estudiar HTML :) Es más fácil de lo que parece.

Si tu proyecto es muy grande, tb puedes contratar a un profesional, que para eso estamos ;); 26 de agosto de 2011 20:36
Anónimo dijo...: Buenas, tengo una duda que seguro ya te han preguntado miles de veces pero de verdad que he estado investigando por internet y no encuentro una solución: Tengo una página de facebook de mi empresa, hoy decidí darle un aspecto más profesional y hacerle una pestaña de bienvenida, hice todos los pasos que encontré en los tutoriales y todo iba perfectamente hasta que llegó el momento de hacer que esta pestaña fuese la principal, no me aparece la opción de pestaña de inicio predeterminada en Gestionar permisos... lo único que quiero saber es si esto es un problema de facebook que se solucionará más adelante o que he de hacer para que sea principal sin necesidad de marcar esta opción, hice una página nueva y SI ME DABA ESA OPCIÓN pero mi pagina antigua ya tiene seguidores y notas que no me gustaría perder... me podrías dar alguna solución? muchas gracias.; 17 de octubre de 2011 13:58
Santi Folch dijo...: Hola anónimo. Pues sí, me lo han preguntado muchas veces :) Lo más probable es que tu página sea del tipo "de comunidad".

Lo único que puedo decirte es que cuando yo creé mi página no existía la opción 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 se 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.

Si tu página no es de ese tipo, pues no sabría decirte.; 17 de octubre de 2011 18:18
mensajes claro dijo...: Funciono de maravillas.; 8 de noviembre de 2011 22:01
enviar mensajes claro dijo...: Estoy de acuerdo con @santy; 14 de marzo de 2012 19:41