Desarrollo: Cómo crear pestañas tabuladas con FBML

FBML FacebookTodos hemos visto que muchas aplicaciones de Facebook tienen estas elegantes pestañas:
Pestañas tabuladas con FBML para Facebook

¿Cómo podemos crearlas utilizando FBML?

Pues muy fácil, con dos tags, fb:tabs y fb:tab-item.

Os pongo aquí el ejemplo con el que he generado las  pestañas de arriba:

<fb:tabs>
	<fb:tab-item href='http://apps.facebook.com/tuapplicacion/instrucciones.php' title='Instrucciones' selected='true'/>
	<fb:tab-item href='http://apps.facebook.com/tuaplicacion/top10.php' title='Top 10' />
	<fb:tab-item href='http://apps.facebook.com/tuaplicacion/jugar.php' title='Jugar' />
</fb:tabs>

Cómo veis con fb:tabs creamos la zona de las pestañas y luego con los tags fb:tab-item creamos las pestañas.

Las propiedades del tag fb:tab-item son las siguientes:

  • href: contiene el enlace al que irá el navegador si se hace click sobre ella.
  • title: sirve para mostrar el nombre de la pestaña.
  • selected: si tiene el valor true muestra la pestaña como seleccionada.
  • align: no la he usado en este ejemplo, puede ser hacia la izquierda (left) o hacia la derecha (right).

28 comentarios sobre “Desarrollo: Cómo crear pestañas tabuladas con FBML

  • el 24 Agosto, 2009 a las 7:12 pm
    Permalink

    Estoy haciendo una aplicacion con pestañas tal cual como en tu ejemplo, pero encuentro que al momento de dar click en enlace, me coloca en el Iframe que utilizo todo el contenido de facebook incluida la app que estoy haciendo con la pestaña del enlace en cuestion seleccionada. Es decir me quedan dos veces las lineas de perfil, inicio, busqueda, etc.

    como puedo corregir esto?

    Respuesta
  • el 24 Agosto, 2009 a las 7:35 pm
    Permalink

    El ejemplo de este tutorial lo hice en modo canvas, no en modo iframe.

    En cuanto pueda lo pruebo en modo iframe y veo si el código del ejemplo me da el mismo problema que a ti.

    Un saludo,

    Respuesta
  • el 5 Enero, 2010 a las 10:38 pm
    Permalink

    quisiera crear pestañas en mi facebook pero no se como. no comprendo lo que explicas alli, por favor si puedes facilitarme un paso a pasa para poder comprender. gracias

    Respuesta
    • el 7 Enero, 2010 a las 11:27 pm
      Permalink

      El tutorial muestra como crear pestañas dentro de una aplicación de Facebook, no en tu perfil de Facebook.

      En ese caso debes utilizar el símbolo “+” que hay a la derecha de tus pestañas. Allí podrás crear pestañas predefinidas por Facebook o bien añadir alguna de tus aplicaciones favoritas.

      Espero haberte servido de ayuda.

      Respuesta
  • el 1 Febrero, 2010 a las 11:15 am
    Permalink

    Muy buenos días desde Mallorca, he creado mi pagina facebook y quiero personalizar las pestañas (crear una por ejemplo tipo nota pero que se llame booking) donde se tienen que pegar los codigos???
    mil gracias por responderme

    Respuesta
  • el 8 Febrero, 2010 a las 9:39 am
    Permalink

    Hola!
    Ya he probado tu codigo y me funciona perfecto. Excelente Post…
    Solo me queda una duda… en la liga de referencia usas http://apps.facebook.com/tuapplicacion/instrucciones.php

    Ya he creado mi FLMB y tengo la pestaña lista. Pero ahora como agrego dichas paginas?…instrucciones.php, top10.php, etc.

    Las tengo que subir o crearlas?
    Gracias!

    Respuesta
  • el 24 Febrero, 2010 a las 3:30 pm
    Permalink

    tengo la misma duda que karla ¿?

    Respuesta
  • el 27 Febrero, 2010 a las 10:09 am
    Permalink

    Para Karla y Mario, sí, hay que subirlas al servidor.

    Para Myriam, para meter FBML en una pestaña de una página o bien creas tu aplicación y la importas a la pestaña desde tus favoritos o bien te agregas una aplicación de FBML para poder meter dentro de su pestaña todo el código que quieras. Facebook tiene creada una propia. Pégale un vistazo a este post: http://www.faceblog.es/aplicaciones/como-personalizar-de-manera-facil-tu-pagina-de-empresa-en-facebook/

    Respuesta
  • el 7 Agosto, 2010 a las 3:41 am
    Permalink

    Hola Gabriel, quisiera saber si me puedes ayudar en algo, puesto que soy musico y quiero personalizar mas mi facebook. Mi idea era ponerle GIF’S en un album de fotos para luego poder seleccionarlas como foto de perfil justamente, pero aun no lo consigo, si me pudieras explicar o enviarme un correo con la explicación, me salvarias! si necesitas algo puedo ayudarte a cambio!

    Un saludo enorme, gracias por tu tiempo! 🙂

    Respuesta
  • el 23 Septiembre, 2010 a las 5:13 am
    Permalink

    Ola q tal estoy Muy Interesado en Apreder todo lo del facebook yo resien entro e este wed q es el facebook
    y no lo entiendo a la perfecion
    quisiera poder usar codigos como html
    pero no se como aserlos
    e visto maneras, formas de colocar codigos
    usando aplicasion
    una de ellas es (Belajar FBML)
    la verdad que e tartado de todo
    el como poder editar estos codigos fbml
    pero !
    pasa lo sigueinte me sale una pagina

    (http://apps.facebook.com/belajarfbml/)

    Respuesta
  • el 23 Septiembre, 2010 a las 5:18 am
    Permalink

    Ola q tal estoy Muy Interesado en Apreder todo lo del facebook yo resien entro e este wed q es el facebook
    y no lo entiendo a la perfecion
    quisiera poder usar codigos como html
    pero no se como aserlos
    e visto maneras, formas de colocar codigos
    usando aplicasion
    una de ellas es (Belajar FBML)
    la verdad que e tartado de todo
    el como poder editar estos codigos fbml

    pero !
    pasa lo sigueinte me sale una pagina
    (http://apps.facebook.com/belajarfbml/)
    la cual no entiendo el idioma
    *-Aplicaciones Belajar FBML
    Editar · Configuración de aplicaciones · Enlace de esta pestaña · Eliminar aplicación*

    eh visto en los tutoriales que cuando le das editar aparese un cuadro en el cual puedes agregar el codigo pero ami me sale esa pagina q no entiendo nada :S

    soy nobato lose
    por eso mismo recurro a tu ayuda espero aunquesea una respuesta
    mi correo es
    oskr.1@hotmail.com
    muchas grasias
    ATTE:
    Oskr

    Respuesta
  • el 16 Octubre, 2010 a las 3:51 pm
    Permalink

    quiero hacer una pagina fmlb con contenido web y no puedo… como lo hago? gracias!

    Respuesta
  • el 3 Marzo, 2011 a las 4:52 pm
    Permalink

    Buenas tardes. Mi duda es la siguiente… He creado una página y desde el primer momento las “secciones” me aparecen a la izquierda, cuando yo lo que quiero son las pestañas superiores que siempre venían por defecto. ¿Hay algún modo de volver a esa visualización y, a partir de ahí, usar FBML para crear nuevas personalizadas, si se da el caso de necesitarlo? El código que facilitas funciona (lo he probado dentro de una nueva sección), pero no sé dónde hay que usarlo para que las pestañas se vean en toda la página, no sólo en la sección que he creado con FBML. Muchas gracias.

    Respuesta
  • el 7 Marzo, 2011 a las 2:21 pm
    Permalink

    Hola, tengo la misma pregunta de Daniel Romero 🙁

    En mi perfil y en mis paginas no me salen en pestañas sino en la navegacion lateral …

    Por fa, ayudanos 😀

    Respuesta
  • el 7 Marzo, 2011 a las 5:15 pm
    Permalink

    Facebook está haciendo cambios en las páginas, y para algunos tipos de empresa ha quitado las pestañas. Lo siento.

    Respuesta
  • el 12 Marzo, 2011 a las 8:52 pm
    Permalink

    Agregue las cajas de FBML, pero me aparecen vertical a la izquierda, como hago para ponerlas arriba?

    Respuesta
  • el 23 Marzo, 2011 a las 5:18 pm
    Permalink

    Hola Gabriel!!
    Hace poco empezamos a desarrollar Facebook para nuestra empresa y somos bastantes novatos en este tema. Además de que tenemos un montón de dudas quería preguntarte una cosa específicamente:
    Supongamos que nuestra página está registrada en español pero nos interesa hacer publicaciones, aplicaciones,etc. en otros idiomas. Tenemos que hacer una página para cada idioma?Existe alguna aplicación para que se haga la traducción automáticamente?O depende del idioma del fan?
    En resumen cómo funciona Facebook con respecto a eso?
    Desde ya muchas gracias por tu contestación y te felicito por el blog, es muy útil!!!

    Respuesta
  • el 1 Abril, 2011 a las 11:35 am
    Permalink

    Hola Gabriel tus instrucciones me han sido de gran ayuda, de veras
    Como todos los que entramos por aqui tengo una duda, jejej,
    ¿Sabes si se pued crear una pestaña FBML en un grupo de FB? Si es que si, ¿Sabes como hacerlo?
    Muchas gracias

    Respuesta
  • el 22 Abril, 2011 a las 10:51 pm
    Permalink

    Necesito don About Gabriel Cuesta Arza que me ayudes de cualquier forma ha hacer una pagina de bienvenida con FBML… por favor contactese conmigo a mi correo
    cristian-mes-si@hotmail.es
    o dígame una forma de contactarme con usted directamente.
    Muchas Gracias!

    Respuesta
  • el 20 Agosto, 2011 a las 11:07 am
    Permalink

    Hola Gabriel Cuesta!!

    Muy Buenas..me gustaria que me ayudases, tengo un problema con un grupo de facebook que cree hace unos dias y es que no consigo que me salga las famosas pestañas del grupo…porfavor me podrias ayudar y decir paso a paso como puedo conseguirlo..si prefieres me puedes mandar la informacion por imail moreno-rrpp@hotmail.com muchas gracias saludos!!!

    Respuesta
  • el 2 Noviembre, 2011 a las 5:36 pm
    Permalink

    Podeis crear una PAGINA WEB COMPLETA DENTRO DE FACEBOOK de manera totalmente automática y con un diseño profesional gracias a la aplicación MITUCAN HTML. Esta aplicación se instala en tu página de empresa en facebook (Fan Page) y solo tendrás que elegir el diseño que más te guste y personalizarla. Lograras crear una landing pages (pagina de aterrizaje) con la que captar fans gracias al botón “me gusta”
    Podeis ver como funciona en la web oficial http://www.mitucan.com

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Sígueme