X

Cómo actualizar una pestaña FBML a iFrame en tu página de Facebook

Con el ánimo de ayudar a todos los afectados por el cambio anunciado por Facebook, de dar por muerto el FBML y apostar por los iFrames, os presentamos un pequeño manual de cómo migrar una pestaña en FBML a una pestaña con iFrames. Como veréis es sencillo y es para todos los públicos. ¡Empezamos!

Comencemos definiendo unos conceptos:

  • Pestaña/Opción menú: zona o apartado en nuestra página en Facebook que podemos personalizar para una mejor experiencia de usuario.
  • FBML: digamos que es una especie de pseudo-html en el que se incluyen algunas etiquetas propias de Facebook con el que podemos personalizar esas pestañas de nuestra página de empresa en Facebook.
  • iFrame: en síntesis es un marco o ventana dentro de una página web que permite cargar en su interior otra página completa.
  • Aplicación Facebook: es una herramienta que puedes instalar y utilizar en Facebook. Por ejemplo los famosos juegos como la granja o aplicaciones como RSS Graffiti.

En definitiva el cambio propuesto por Facebook lo podemos traducir como pasar de tener pestañas limitadas por el FBML, a tener pestañas preparadas para cargar una página web en su interior, permitiendo javascript, flash, etc. Sí, vas a poder meter tu código de Analytics. ¿Entonces por qué estamos tan mosqueados con este cambio si es para mejor? Vamos a disponer de muchas más posibilidades.

La idea es crear una página web con el código FBML de la pestaña que queremos migrar y subirlo a nuestro servidor, para posteriormente cargar esta página en una pestaña a través de una aplicación de Facebook.

formacion redes sociales Cómo actualizar una pestaña FBML a iFrame en tu página de Facebook

Para la primera parte te puedes descargar este archivo quitarle la extensión .txt y sustituir el código indicado por el de tu pestaña. Matiz importante sobre los tamaños: Para el alto de la pestaña de la fan page no hay problema. La cuestión está en el ancho. Si bien es cierto que el ancho máximo de una aplicación en facebook es de 760px, al meter esa aplicación en una pestaña, este ancho se reduce a 520px como máximo como se puede ver en http://developers.facebook.com/docs/guides/canvas/

formacion redes sociales Cómo actualizar una pestaña FBML a iFrame en tu página de Facebook

Pero, ¿cómo hacemos una pestaña con iframe? Sigue los siguientes pasos:

1. Creamos una aplicación de Facebook

formacion redes sociales Cómo actualizar una pestaña FBML a iFrame en tu página de FacebookPara crear una pestaña con iframe, Facebook nos obliga a hacerlo a través de una aplicación. Para crear una aplicación nos dirigimos a la dirección http://facebook.com/developers Si es la primera vez que entras, te pedirá permiso para acceder a tu información básica. Hacemos clic en el botón de "Crear una nueva aplicación" y especificamos el nombre de esta aplicación. Confirmamos las condiciones y le damos al botón "Create App".

Y ya la tenemos creada. ¿Vamos a por el siguiente paso?

2. Configuramos la aplicación

Ahora tenemos que configurar dicha aplicación para decirle qué pagina web vamos a cargar dentro de esta. De las (seis) opciones que nos aparecen en la parte izquierda seleccionamos la que pone "Sitio Web". Y el campo que tenemos que rellenar es:

formacion redes sociales Cómo actualizar una pestaña FBML a iFrame en tu página de Facebook

  • "Site URL" donde le especificaremos la dirección de nuestra página que queremos cargar en la pestaña. Ojo, hay que tener en cuenta lo siguiente, sólo debes especificar el directorio donde está el index.html que has creado anteriormente. El resto de opciones las dejamos como están.

La siguiente opción a tratar es la de "Integración con Facebook". Aquí debemos indicar dentro del grupo Canvas los siguientes campos:

formacion redes sociales Cómo actualizar una pestaña FBML a iFrame en tu página de Facebook

  • "Página de trabajo o Canvas Page" es la url de nuestra aplicación. Especificamos un nombre para ella (máx. 20 caracteres y sin mayúsculas),
  • "Canvas URL" aquí ponemos la misma url que escribimos en el paso anterior. El resto de los campos de este grupo los dejamos como tal.

Ahora dentro de esta misma opción, en la parte inferior donde el grupo "Page Tabs", debemos especificar:

formacion redes sociales Cómo actualizar una pestaña FBML a iFrame en tu página de Facebook

  • "Nombre de la pestaña" Indicar el nombre que queremos que tenga la pestaña (máx 16 caracteres).
  • "Pestaña URL" donde escribiremos el archivo web que queremos incluir en la pestaña iframe. En este caso ponemos index.php

Guarda los cambios

3. Añadir la aplicación a la página

formacion redes sociales Cómo actualizar una pestaña FBML a iFrame en tu página de Facebook

En esta pantalla, donde aparecen todos los datos de la aplicación que acabas de crear, tienes una opción para ir al perfil de la aplicación, desde donde podrás añadir esta a tu página. Todas las aplicaciones tienen un perfil con su muro, etc.

formacion redes sociales Cómo actualizar una pestaña FBML a iFrame en tu página de Facebook

4. Configurar la aplicación en la página.

formacion redes sociales Cómo actualizar una pestaña FBML a iFrame en tu página de Facebook

Una vez añadida la aplicación a nuestra página de fans, debemos editar nuestra página y acceder al listado de aplicaciones que tenemos instaladas, con la opción "Aplicaciones". Localizamos la aplicación que acabamos de crear y hacemos click en "Editar configuración". Y ya sólo nos queda agregar esta aplicación como pestaña en nuestra página para terminar con el proceso sin morir en el intento ;)

¿Fácil, verdad? Esperamos que os resulte de utilidad y que hayamos aportado algo de luz a este cambio. Si se os ocurre alguna mejora en estos pasos, o creéis que se pueden complementar estaremos encantados de escucharos.

ACTUALIZACIÓN 15-4-11

Por cierto, acabamos de publicar un post para aprender a convertir un perfil personal en una página de fans con Facebook Migrate. Dedicado a empresas que tienen una presencia en Facebook no adecuada. Hay que utilizar páginas de fans.

Artículos relacionados:

  1. Utiliza Facebook como empresa. Novedades en las páginas de fans
  2. Curso: Cómo utilizar las Redes Sociales en la Empresa
  3. Sorteo de una plaza gratis para el curso Cómo Utilizar las Redes Sociales en la Empresa
  4. Curso: Cómo utilizar las Redes Sociales en la Empresa
  5. Curso: Cómo utilizar las Redes Sociales en la Empresa

Si te ha gustado Compártelo

45 COMENTARIOS Para “Cómo actualizar una pestaña FBML a iFrame en tu página de Facebook”

  1. Pasape 03/03/2011 a 11:17 am

    Muy buen post! Sólo preguntar que dimensiones (ancho y alto) recomiendas para las páginas en facebook?

    Muchas gracias

  2. Gerardo Prieto 03/03/2011 a 12:20 pm

    ¡Hola @Pasape! Muchas gracias. Para el alto de la fan page no hay problema. La cuestión está en el ancho. Si bien es cierto que el ancho máximo de una aplicación en facebook es de 760px, al meter esa aplicación en una pestaña, este ancho se reduce a 520px como máximo como puedes ver en http://developers.facebook.com/docs/guides/canvas/
    Actualizamos el artículo para que todo el mundo lo conozca.

    Salu2.0

  3. paula 03/03/2011 a 1:42 pm

    hola, muy útil la guía! a mi no acaba de funcionarme… creo que el problema está en el paso: (“Pestaña URL” donde escribiremos el archivo web que queremos incluir en la pestaña iframe. En este caso ponemos index.php )

    Qué archivo ponemos ahí? Quiero decir, yo quiero que se vea por ejemplo mi pagina web, así que pongo “index.html” y me da error…

    Gracias

  4. Isaias Martinez 04/03/2011 a 7:15 am

    no entendi,,, osea tengo que tener tener una pagina web hecha aparte para integrarla al fanpage de facebook??

  5. Blanca 04/03/2011 a 5:20 pm

    Mil gracias por el post. Le he pasado la URL a varias personas para que visiten esta fabulosa web.
    Por cierto, ¿sabéis como poner Landing Page en la nueva versión de FB? Parece que no es tan fácil como antes… ¿hay que meter algún código?

    Un saludo y gracias!!

  6. andres 05/03/2011 a 4:48 am

    Pero cobran por esto? al crear la aplicacion me pide tarjeta de credito o numero de movil

  7. Juankar 08/03/2011 a 2:15 am

    Buenas, buen tutorial. pero tengo un problemilla:
    como administrador de la pagina, me funciona bien la pestaña iframe, con su aplicacion, pero cuando entro con otro perfil, no veo el contenido del iframe, sale en blanco. la web a la que enlaza el iframe es index.html, sérá por eso que no se ve.
    gracias por tuto y un saludo

  8. luis 08/03/2011 a 2:38 pm

    Hola, he seguido todos los pasos y ya tengo configurado el iframe, pero al cargar me da un error de llamada a facebook.php.
    ¿Cómo soluciono este error?
    ¿Tengo que cargar este archivo en mi directorio? Si es así ¿dónde se encuentra?

    Muchas gracias de antemano.

  9. Gerardo Prieto 08/03/2011 a 3:28 pm

    Hola Paula. Disculpa el retraso en la respuesta. ¿Has incluído en tu host el archivo index.php? Es ese nombre el que debes poner en ese caso “index.php”

  10. Gerardo Prieto 08/03/2011 a 3:29 pm

    Si. Las pestañas ahora son una especie de marcos de fotos donde vas a poder poner “tu foto” o web. Saludos

  11. Gerardo Prieto 08/03/2011 a 3:47 pm

    Hola Andrés. No, puedes crear una aplicación de forma gratuita. ¿Has seguido los pasos del manual?

  12. Gerardo Prieto 08/03/2011 a 3:55 pm

    Hola Blanca. Si, es cierto que en algunos casos parece que ha desaparecido la opción de Landing Page. Puede que esté ocurriendo lo siguiente:
    1. Que hayas convertido tu página de fans en una página “Places” que no permite Landing tabs. Si necesitas volver a una página de fans al uso puedes seguir estas instrucciones http://www.insidefacebook.com/2010/12/23/allows-places-pages-unmerge/
    2. O es posible que todavía no hayas instalado ninguna aplicación de Facebook en tu página todavía.

    Ya nos cuentas. Salu2.0

  13. Blanca 09/03/2011 a 12:04 am

    lo miro! mil gracias!

  14. Andres Cabrera Valenzuela 09/03/2011 a 8:56 am

    Hola Gerardo gracias por tu respuesta!
    Si he seguido los pasos. pero me quedo en donde me pide el numero del movil o la tarjeta. ya ingrese el numero de movil, peor no me enviaron ningun mensaje con codigo, y en el siguiente paso me pide ese dichoso codigo.
    Un saludo y gracias!

  15. oscar 09/03/2011 a 1:59 pm

    Hola mi pregunta es yo tengo mi pagina web hecha y e intentado hacer la web para facebook en
    un archivo dentro de mi web algo asi http://www.generando-ingresos.info/facebook, cuando configuro el iframe pongo esa dirccion, pero al clikar en la aplicacion me aparece la pagina de error de mi web y el enlace a la web original cliko el enlace y aparece mi web completa solo que con los desplazadores, la pregunta es ¿ tengo que comprar otro dominio y crear ai la web de facebook para llevarla al index?
    ¿ puede funcionar en subdirectorios o carpetas ?

  16. Javier 09/03/2011 a 4:49 pm

    Lo primero de todo felicitaros por este gran manual.
    He seguido el manual, pero me da el siguiente error:
    FBML Error (line 16): illegal tag “body” under “fb:tab-position”

    Que puede ser?

  17. Marcelo Vasquez Giakoni 10/03/2011 a 4:30 pm

    Hola Genteeee… espero que me puedan ayudar, el post lo encuentro de maravilla pero aun con un problema, ojalá tengan un tiempito para ayudarme. Voy a explicar paso a pasa lo que he hecho para que no quede duda.
    Ya tengo creada una página.
    Tengo creada la aplicación, Iframe con los siguientes parámetros.
    En configuración de aplicación. Sitio web:
    URL del Sitio: http://www.ecmetal.cl/carpeta/ que es donde tengo el archivo index.html
    En configuración de aplicación. Integración con Facebook:
    Página de trabajo : http://apps.facebook.com/ ecmetal/
    Canvas URL: http://www.ecmetal.cl/carpeta/
    URL de pestaña: http://apps.facebook.com/ecmetal/ index.html

    Luego en el perfil de mi aplicación, le doy a la opción agregar a mi página, seleccionando la pág. que tengo creada desde el principio.

    El problema es : yo al ingresar desde la pág. a la pestaña de mi aplicación veo todo correctamente , obviamente con los permisos de administrador, pero cuando alguien ingresa sin ser administrador la pagina no muestra nada. Solo muestra el iframe en blanco.

    Porfavoooor, si alguien sabe que podría ser, o alguna acotación será bien recibida, espero sus respuestas… muchas gracias

  18. vera 10/03/2011 a 4:57 pm

    A mi también me da el error:
    La aplicación no está disponible temporalmente
    Errores de Análisis:
    FBML Error (line 16): illegal tag “body” under “fb:tab-position”

    Nos puedes ayuda, por favor?

  19. Jorge Alberca 15/03/2011 a 3:05 am

    Hola y felicitaciones por la web y el post, muy interesante y enriquecedor…
    Quisiera hacer una consulta… y es que yo no puedo salir del paso inicial que es crear la aplicación desde http://www.facebook.com/developers/apps.php… Puesto que al darle en la crear aplicación me sale el mensaje “Tu cuenta deber ser verificada antes de que puedas realizar esta acción. Por favor, verifica tu cuenta añadiendo tu teléfono móvil o tu tarjeta de crédito.” y luego de eso no pasa nada… lo ultimo que conseguí fue que me pidiera un código que supuestamente me llegaría al móvil y nada… allí me he quedado…

    Alguien podría echarme un cable? o es que quizá ya existe otro método y no me enteré?… Por favor ayuda… que necesito con urgencia crear algunas pestañas …

    Se los agradeceré infinitamente…

    Saludos

  20. Silvestre 16/03/2011 a 11:31 am

    vaya!! Andrés a mi también debe ser que me ven con cara de tonto y pone algo de verfificar y telf, tarjeta etc. Pego aquí lo que sale a la hora de crear una app.

    “Tu cuenta deber ser verificada antes de que puedas realizar esta acción. Por favor, verifica tu cuenta añadiendo tu teléfono móvil o tu tarjeta de crédito.

  21. Silvestre 16/03/2011 a 11:35 am

    exactamente sustituiré las tags ya que saca el código para pegar.
    —————CODE
    Tu cuenta deber ser verificada antes de que puedas realizar esta acción. Por favor, verifica tu cuenta añadiendo tu <a onclick=”var newwindow = window.open(&quot;http:\/\/www.facebook.com\/confirmphone.php&quot;,'confirm_phone', 'height=350, width=520, left=100, top=100, resizable=yes, scrollbars=no, toolbar=no, status=no');if (newwindow) { newwindow.focus();} else { alert(&quot;Es posible que un bloqueador de elementos emergentes est\u00e9 inhabilitando la ventana de verificaci\u00f3n de m\u00f3vil.&quot;);}”>teléfono móvil</a> o tu <a href=”https://secure.facebook.com/cards.php” target=”_blank”>tarjeta de crédito</a>.
    —————————-

  22. Omar Guerrero 22/03/2011 a 7:36 am

    tengo el mismo problema que tiene Silvestre, intenté acceder con varios usuarios con otros varios browsers que tenían deshabilitado el bloqueador de pop-ups y nada, si alguien sabe cómo resolverlo les agradezco la respuesta.. de momento lo voy a reportar directo a FB

  23. Alexis 23/03/2011 a 1:51 am

    Esto es lo que sale al darle click en “Crear una nueva aplicación” : Tu cuenta deber ser verificada antes de que puedas realizar esta acción. Por favor, verifica tu cuenta añadiendo tu teléfono móvil o tu credit card.

  24. Omar Guerrero 23/03/2011 a 8:11 am

    resuelto! todo lo que se necesita es verificar tu cuenta de Facebook, ya sea por uno de dos métodos, vía mensaje SMS a tu celular y confirmando el código que te llegue o bien anexando la información de tu tarjeta de crédito a tu cuenta… yo tuve que elegir la última opción ya que mi operadora de telefonía móvil Telcel no está dada de alta dentro de las operadoras disponibles, todo este rollo lo puedes hacer acá: https://www.facebook.com/help/?faq=17580

  25. Omar Guerrero 23/03/2011 a 8:11 am

    resuelto! acá la liga de ayuda: https://www.facebook.com/help/?faq=17580

  26. Xavyer 29/03/2011 a 5:54 pm

    Hola muy excelente el post!!! pero tengo una duda… a mi me da el error el require once… sera que tengo que crear el archivo facebook.php??? Y de ser asi que condigo necesito ponerle????

  27. Monicopy 31/03/2011 a 6:14 pm

    Hola, lo primero mil gracias, me ha resultado súper útil, y lo segundo es si sabéis qué grado de participación tiene facebook en el contenido de cada aplicación.
    Me explico, tengo un cliente que tiene un formulario de prueba de producto, como no quería pagar aplicación pusimos un jpg en fbml con link al formulario real, un poco cutre, pero resultón. Ahora, probando con este tutorial, puedo poner el formulario dentro de la “pestaña” iframe, pero nos surge la duda… ¿cuándo un fan rellene ese formulario (alojado en el servidor del cliente) y envíe sus datos? Esos datos son accesibles para Facebook?? O sólo sirve como alojamiento pero no procesa los datos internos de la aplicación?
    Gracias!

  28. Samuel 05/04/2011 a 12:58 am

    EXCELENTEEEE No morí en el intento, gracias por tomarte el tiempo para explicar esto, te lo agradezco muchisimo, es gratificante haberlo logrado y más gratificante para ti saber, que el artículo que compartiste sirve.

    Tengo un problemin con el ancho de 760, mi pagina tiene un ancho de 733 y me muestra los scrollbars, alguna solución?

    Gracias mil!

  29. Samuel 05/04/2011 a 2:31 am

    Como le hago para que la pestaña cargue ni bien entren a mi página?
    Gracias

  30. Samuel 05/04/2011 a 5:30 pm

    Ya lo solucioné lo del ancho con la medida de 520px

  31. miguel 11/04/2011 a 12:19 am

    Ante todo daros las gracias por este post he echo todo pero no se como hacer luego para poder ver mi pagina fans con la que he creado me podeis ayudar gracias

  32. dobleveta 11/04/2011 a 12:36 pm

    Gracias por el post tengo un problema con la identidad si he seguido los pasos pero cuando llego a developers crear una aplicacion nueva me pide un codigo para confirmar cuenta me manda el codigo lo confirmo pero me dejaConfirma Tu Telefono

    Tu teléfono móvil ha sido verificado correctamente.

    Su proveedor también soporta Mensajes de texto. Leer más y activar. ahi
    mi pregunta cuesta dinero donde activo
    Gracias si podeis ayudarme he perdidi ya 2 dias de trabajo con los iframe de facebook

  33. rogelio portal 12/04/2011 a 4:25 pm

    Primero que todo gracias por este magnifico post. En verdad tube algunos de los problemas antes mencionados pero al final despues de algunos tropiezos he logrado que mi app funcione como una pagina de bienvenida http://www.facebook.com/assumptesdedisseny?sk=app_201034936595812 yo lo direciono a un archivo index.htlm no es necesario un .php
    lo unico que a la hora de colocar un boton de enlace a mi web como podran ver en ves de enviarme a esta me la carga dentro del iframe y esto no se como solucionarlo

  34. Rafa 12/04/2011 a 9:02 pm

    Muchas gracias por la información. Me ha venido genial para crear la landing page de mi empresa. Os invito a visitarla http://www.facebook.com/OitentaEdiciones/ espero que os guste, ya estoy trabajando en otra pestaña para una promoción…
    Saludos y gracias de nuevo!

  35. Samuel 13/04/2011 a 7:23 pm

    Como le haces para que aparezca de frente en la página que creaste cuando entran a tu facebook page?

  36. emanuel 16/04/2011 a 4:47 am

    Por que escriben iFrame, no es iPhone o iPad o iMac, ya dejen un poco de relacionar todo con Apple no ? es iframe o IFRAME
    http://www.w3.org/TR/1999/REC-html401-19991224/present/frames.html#h-16.5

  37. Gerardo Prieto 16/04/2011 a 9:47 am

    Por cierto amigos, acabamos de publicar un post para aprender a convertir un perfil personal en una página de fans con Facebook Migrate. Esto es MUY INTERESANTE para empresas que tienen una presencia en Facebook no adecuada. Recordar que tenemos que utilizar páginas de fans. Esperamos sea de utilidad
    http://www.socialdente.com/2011/04/15/aprende-a-convertir-tu-perfil-personal-en-una-pagina-de-fans-con-facebook-migrate/

  38. alberto 29/04/2011 a 8:53 pm

    hola, gracias por el post pero no termina de funcionar, sale un error en la linea 10, la cual seria:

    $facebook = new Facebook(array(

    que hay que cambiar??? muestra este mensaje de error:

    Fatal error: Class ‘aplicacion_bebe’ not found in /home/partner/public_html/bebe-4u.com/pj_carters.php on line 10

    gracias por anticipado

    a.

  39. DORALY 14/07/2011 a 2:23 am

    quiero instalar una ventana de chat en mi pagina tengo 153,000 seguidores pero no pude :(

  40. Roman Jesus Astorga Guzman 16/08/2011 a 6:52 am

    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

¿Hablamos?

Puedes utilizar el formulario de contacto siguiente para ello

  • Responsable: SOCIALDENTE SERVICIOS SOCIAL MEDIA - NIF: B54515887
  • Finalidad: Gestión de la relación con los clientes y potenciales mediante envío de información sobre productos y servicios
  • Legitimación:Tu consentimiento
  • Destinatarios:Los datos facilitados están alojados en el proveedor de hosting CDMON perteneciente a la Unión Europea.
  • Derechos:Tienes derecho a acceder, limitar, rectificar y suprimir tus datos.

Contacta con Socialdente

Puedes utilizar la siguiente información para contactar con nosotros.

Nombre: Socialdente Internet & Marketing Online
Teléfono: +34 682 770 680
Skype: socialdente
Dirección: Avenida Maisonnave 18, 3-1 03003 Alicante
 Google+