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

Las pestañas individuales de Facebook con iframe nos ofrecen nuevas posibilidades para nuestra página de fans: Ahorra podemos utilizar muchas técnicas del desarrollo de páginas web que hasta ahora y con los tabs fbml no se podían. En este post explicamos en 5 pasos que crear una pestaña con iframe.

1. Crear una aplicación nueva

Vais a la página del desarrollador:  http://www.facebook.com/developers/ y hacéis clic en

botón crear una aplicación nueva en Facebook

A continuación hay que poner un nombre y confirmar las condiciones de uso.

2. Configurar la aplicación / “Sitio Web”

Hacéis clic en “editar configuración” y luego en “sitio web”

como configurar el menu `sitio web´ dentro del interfaz de crear una aplicación nueva

En la casilla “URL del sitio” hay que especificar la url de la aplicación.

Atención: una url tiene que terminar con un slash. Así que el formato falso es: “http://www.cuentamelared.com/iframetest”. El bueno es “http://www.cuentamelared.com/iframetest/

La casilla “dominio del sitio” es opcional y se puede dejar vacia.

3. Configurar la aplicación / “Integración con Facebook”

Hacéis clic en “editar configuración” y luego en “integración con Facebook”

screenshot del menu `integración con facebook´en el proceso de crear una aplicación nueva

  • En la casilla “página de trabajo” : hay que poner un nombre que va a ser la url para la aplicación
  • La “canvas url” es la misma que la “url del sitio” del paso 2
  • el “canvas type” lógicamente tiene que ser IFrame
  • con el tamaño el valor por defecto es “show scrollbars”
  • la casilla “marcador url” puede quedarse vacía al no ser que queráis especificar una url especial cuando un usuario hace clic en el bookmark de la aplicación

apartado page-tabs en el menú integración con facebook

  • nombre de la pestaña: ahí elegís con que nombre la pestaña va a aparecer en vuestra página
  • el “page tab type” tiene que ser IFrame, tal y como viene por defecto
  • la pestaña url tiene que ser el documento html (.html, php, etc. – lo que utilizáis en el webspace) dentro del archivo que habéis especificado en el paso nr. 2
  • la casilla “editar dirección” puede quedarse vacía. La podéis rellenar si queréis especificar una url donde los administradores de la página pueden editar la configuración de la aplicación. Atención: los administradores de la página y los administradores de la aplicación no tienen por que ser las mismas personas.

4. Añadir a la página

Hacéis clic en “Perfil de la aplicación”. Este enlace os lleva a la página de la aplicación.

Una vez ahí hay que cliquear en “Añadir a mi página”. Escogéis la página donde queréis integrar la pestaña y … hecho!

5. La página de la aplicación

No os olvidéis que la aplicación tiene automáticamente una página que está vinculada con ella. Así que conviene ocuparse también del diseño y la información pública de esta última.

la página que esta vinculada con la aplicación de Facebook

Este tipo de aplicaciones te servirán para hacer promociones en facebook y para lograr una mayor interacción con los usuarios y fans de facebook, en este artículo lo describimos más a detalle : Promociones: Organización de sorteos y concursos en facebook

¿Qué os parece?

Como el tema de los iframes en Facebook es un tema ya un poco más complicado contamos con vuestras preguntas, comentarios y dudas! Esperamos poder contestarlos todos…..


Austriaco y casado con una española, lleva años trabajando en marketing en internet como CEO de AVISEO, empresa especializada en SEO y SEM, también para el mercado español. Uno de sus primeros pasos fue escribir este blog sobre el mundo de Facebook para empresas.

Deja un comentario

35 comentarios

  1. jaime

    Gracias por la info pero no entiendo algo…hay q poner una URL de una pagina web y luego escoger un archivo (?), y si no tengo web? y para q quiere una web??… con la aplicacion Static FBML no necesitabamos de una web para crear pestañas, podiamos poner los codigos en la caja misma… esto no es igual???

  2. Hola, estoy muy interesado en hacer funcionar un iframe, sin embargo, algo me falla. Creo que es el paso “la pestaña url tiene que ser el documento html (.html, php, etc. – lo que utilizáis en el webspace) dentro del archivo que habéis especificado en el paso nr. 2″

    no acabo de comprender qué hay que poner aquí!

    Gracias

  3. Martin Zelewitz

    tienes el documento en un sitio web tuyo: p.ej.en http://www.misitioweb.es/micontenidoparafacebook/
    luego el documento tiene que tener un nombre, p.ej. index.html o texto1.php , etc . (lógicamente el documento tiene que ser accesible a traves de http://www.misitioweb.es/micontenidoparafacebook/index.html o
    http://www.misitioweb.es/micontenidoparafacebook/texto1.php etc) esto depende de como en tu sitio web tienes la denominación de documentos.
    en casilla luego tienes que poner este nombre o sea index.html, texto1.php

  4. Eestoy teniendo un curioso problema. Cree una aplicación en base a este post que publicaste. Eso sin problemas.

    Pude instalar la aplicación en una fan page nueva recién creada de las que son sin solapas y con sidebar a la izquierda. La aplicación funcionó perfectamente.

    Luego la instale en una fan page con el formato de tabs, apareción la pestaña con el nombre de mi aplicación. Pero al querer ingresar me da el siguiente error:

    La aplicación no está disponible temporalmente
    Errores de tipo Parse:

    FBML Error (line 243): illegal tag “body” under “fb:tab-position”

    Errores de tiempo de ejecución:

    URLExceptionInvalid scheme for url (javascript:void();)

    HTML error while rendering tag “link”: There is a hard limit of 2 css link

    Bueno espero me puedas dar una ayuda con esto. Gracias!

  5. Celia

    He seguido todos los pasos correctamente y en el iframe no me sale mi index.html sino lo siguiente.
    La aplicación no está disponible temporalmente
    Errores de tipo Parse:
    FBML Error (line 20): illegal tag “body” under “fb:tab-position”

    Mi index este programado como html, debe ser fbml?

  6. Gracias por el tutorial, lo he puesto en práctica y casi lo tengo.si me puedes ayudar me haces un gran favor.
    Tengo mi url con un index.html, consigo crear la pestaña con el iframe, pero solo me carga la web cuando veo mi pagina de facebook como administrador, el resto del mundo no puede verla. facebbok me dice algo de navegadores seguros y de actualizar una callback url, pero no se como, no lo encuentro,
    mil gracias y un saludo.

  7. Hola!! Lo primero decir q me encanta este blog!!!
    Lo segundo pedir “ayuda”!!! Estoy desarrollando un facebook para mi empresa y con el nuevo sistema no se como hacer para que cuando una persona ingrese en el perfil salte directamente la pestaña de bienvenido.
    Muchas gracias!!
    (si debo poner este coment en otro apartado, decirmelo!! )

    • Kali Tapia

      Hola Blanch, con las nuevas páginas tienes que ir al Menú “Editar la página”/ “Gestionar permisos”/”Pestaña inicial por defecto” y ahí indicas: cual pestaña quieres que sea la página inicial
      Saludos!
      Kali

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

  9. Vera

    Lo he probado en 2 páginas diferentes. En una (la más reciente) no me da problemas pero en la otra (donde tengo que instalarlo) me pasa como a Celia, me dice:
    La aplicación no está disponible temporalmente
    Errores de Análisis:

    FBML Error (line 16): illegal tag “body” under “fb:tab-position”

    Me podrás ayuda, por favor?
    Gracias
    V

  10. Soy un mar de dudas con Iframes. Se me antoja más complicado que la simpleza de Fbml.
    1º- ¿No se pueden programar cosas como antes se hacía en FBML?¿Es que necesito tener colgado en una Web externa todo lo que quiero colgar en Iframe? Por ejemplo, si quiero colgar una foto con un link a una página, en HTML no me funciona. Con FBML todo era más sencillo, ¿coexistirán FBML e Iframe? Espero que si.

    2º- Creo una pestaña Iframe, pero no hay manera de crear una segunda. En Fbml era sencillo porque el mismo programa te preguntaba si querías crear otra pestaña pero en Iframe, ¿tenemos que seguir todos estos pasos para hacer una pestaña?¿y si no tenemos web externa de la promoción que queremos hacer?
    Enhorabuena por la Web y muchas gracias

  11. Hola Kali Tapia, el problema es que en las nuevas páginas ya no aparece la opción de “Pestaña Inicial por Defecto” en Gestionar Permisos. Donde está ahora? Gracias

    • admin

      Hola Juan:
      seguramente hay algo que tienes que revisar en la Información básica de tu página…. a nosotros si nos sigue apareciendo en:
      “Editar página”/gestionar permisos/ “pestaña Inicial por defecto”
      saludos!
      Kali

  12. Muy buen tutorial. Yo lo he probado sin problemas, aunque ahora estoy trabajándome una página más curiosa.
    Buen trabajo.

  13. Alberto

    hola, tengo una duda referente a los iframe en si a la aplicacion, porque me pide crear un perfil de usuario para usar la aplicacion si segun esto esta prohibido por facebook para las paginas de fans
    gracias

  14. Me da el siguiente error: “Validation failed.
    Unable to update Canvas Page: The Canvas Page you requested is already taken.”

    ¿A que se debe?

  15. Kali Tapia

    Hola Pablo: esto se debe a que el nombre que le das ya está dado… intenta cambiarlo… Saludos! Kali

  16. Antrax13

    Hola,

    He creado una aplicación en iframe y funciona perfecta, queria saber si es posible hacer que esa aplicación la vean solo los fans.

    Gracias

  17. Arturo Hernandez

    Tengo una duda, cómo puedo hacer para que si tengo una aplicación, en particular, una trivia, el usuario sólo pueda acceder a ella si es Fan de la Página, de lo contrario lo lleve al inicio para dar clic en Me Gusta. Saludos y gracias.
    Artuto H.

    • Martin Zelewitz

      hola Arturo,
      lo que tu quieres es el así llamado fangating. El tema figura en nuestra lista para futuros artículos. Espero que logremos publicarlo más bien temprano que tarde.
      un saludo
      Martin

  18. gabriel

    Hola necesito ayuda….!!! colgue la pagina web que quiero que se me cargue dentro del fanpage de facebook y me salta este error….!! es como si no la cargara,…y tengo las dimensiones bien…alguien sabe que puede ser ??
    Conexión segura fallida

    Ha ocurrido un error durante una conexión a http://www.grupobalcones.com.

    SSL ha recibido un registro que excedía la longitud máxima permitida.

    (Código de error: ssl_error_rx_record_too_long)

  19. gabriel

    solucione el problema tenia que destildar la conexion segura de https …pero ahora me sale
    Method Not Allowed
    The requested method POST is not allowed for the URL /fanpage/index.htm.

  20. Hola muy buen tutorial, ya hize una tab asi, mi pregunta es si se puede crear con la misma aplicacion 2 tabs en la misma fanpage, saludos

  21. Una pregunta… la URL puede ser de una imágen sacada de algún muro de facebook por ejemplo?¿? Gracias por la info.

  22. No le entendi ni madr….., he leido por dias este texto y no le entiendo, cosas pequeñas me atormentan … necesito mas ayudaaaaaaaaaaaaaaaaaaaaa

  23. Claudia Loza Peña

    http://www.facebook.com/developers/ al hacer click en esto me pide información que no quiero brindar y donde queda mi pirvacidad Incluye nombre, foto del perfil, sexo, redes, identificador de usuario, lista de amigos y cualquier otra información .. no existe otra aplicación que me pueda ayudar a no pedir SOLICITUD DE permiso alguien que me deje un link o me adjunte un manual o archivo gracias por sus respuestas nenes y nenas

  24. ff

    hola, yo tengo una pagina web en paginawebgratis.es, y claro termina en es.tl, y no se que tengo que poner en la URL, si la dirección de mi web o que? estoy un poco pegada con esto.
    Si puede ayudarme se lo agradeceria. UN SALUDO