Cómo crear una pestaña en Facebook como iframe

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0

Ahora que los tabs fbml tienen fecha de caducidad, explicaremos como podemos crear una pestaña con el nuevo formato en iframes. Para poder configurarla deberemos tener el archivo (html, php, etc.) que queramos usar creado previamente y alojado en un servidor. Los pasos para crearla son los siguientes:

1. Crear una aplicación

Para crear una pestaña iframe, primero debemos crear una aplicación. Para ello debemos ir a la página de desarrollador de facebook http://www.facebook.com/developers/ y hacer clic en “Crear una nueva aplicación”.

A continuación se debe especificar el nombre de la aplicación y aceptar las condiciones de Facebook.

2. Configurar la aplicación

Acerca de

En “Acerca de” simplemente debemos configurar la información básica de nuestra aplicación: nombre de la aplicación, logotipo, email de contacto, etc.

Web Site / Sito Web

Una vez dentro de la aplicación y tras configurar nuestra información básica, accedemos a “Web Site / Sitio Web” donde nos aparecerá la ID de nuestra aplicación y donde deberemos especificar la url dónde tenemos la aplicación en la casilla “Site URL / URL del Sitio”. Para poder utilizar la aplicación debemos tenerla creada previamente y alojada a un servidor.

Facebook Integration / Integración con Facebook

En este apartado es dónde configuraremos los datos de la página web donde tenemos creada la promoción y configuraremos las opciones para integrarla en facebook como una pestaña en formato iframe. Para ello tenemos que rellenar los siguientes campos:

Canvas Page / Página de trabajo: nos pide especificar un nombre para la url de nuestra aplicación.

Canvas URL: en este apartado debemos especificar la url de la página web donde se encuentra el archivo que queremos mostrar en nuestra aplicación, que es la misma que nos han pedido anteriormente en Web Site – Site URL.

Secure Canvas URL: nos permite especificar una versión segura de la url de la web, para que facebook la use cuando un usuario acceda a la aplicación a través de una conexión segura (https). Podemos dejarlo vacío.

Tamaño de Iframe: anteriormente, tras especificar la url del canvas,  nos permitía escoger entre mostrar la pestaña como fbml o como Iframe. Ahora, en este apartado podemos especificar si queremos que la página muestre scrollbars (Show scrollbars) en caso de nuestra aplicación sea de mayor tamaño que el espacio que facilita facebook, o si queremos que la redimensione automáticamente (Auto-resize).

Marcador URL: en esta casilla, que también puede quedarse vacía, podemos introducir una url especial para cuando un usuario hace clic al bookmark de la aplicación.

Nombre de la pestaña: debemos escribir el nombre que queremos que tenga la pestaña.

Pestaña URL: es en esta casilla donde debemos poner la ruta (url) del archivo que queremos mostrar y que saldrá en la pestaña de nuestra aplicación (html, php, etc.).

Editar dirección: podemos dejar este campo vacío.  Sirve para especificar una dirección donde los administradores de la página podrán editar la configuración.

3. Añadir la pestaña a tu página

Entramos en “Perfil de la aplicación” y una vez dentro hacemos clic a “Añadir a mi pagina”. Nos abrirá una ventana donde deberemos escoger la página en la que queremos añadir la pestaña de la aplicación y ya estará hecho. Cuando entréis en la página escogida encontraréis la nueva pestaña en el lateral izquierdo de la página.

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0
<< Post Anterior
Post Siguiente >>

11 Comments

  • Luis Fdo

    Reply Reply 2 mayo, 2011

    Justo lo que necesito hacer.

    Lo único malo es que parece que Facebook en este momento tiene problemas en la página de agregar aplicaciones y no me deja crear una ¬¬

    Cuando esté disponible de nuevo esa herramienta probaré esto.

    De cualquier forma gracias por el aporte….Stay Metal \m/

  • montse

    Reply Reply 3 mayo, 2011

    Es posible que no se obtengan las medidas esperadas con “redimensione automáticamente (Auto-resize)?
    Gracias por este post.

  • Hans

    Reply Reply 25 mayo, 2011

    me da un error HTTP 405 y desde luego si lo hago directamente desde el explorador el URL que estoy colocando en “pestaña url” esta disponible, que puede estar sucediendo ahí?

  • ivonne

    Reply Reply 27 mayo, 2011

    tengo un problema. Ejecuto los pasos y cuando llamo a la aplicacion creada me dice ´Method not allowed error 405´

    porque puede ser? gracias
    La pagina que quiero mostrar esta alojada en blogger.. no se si puede ser importante…

  • MasFB

    Reply Reply 6 junio, 2011

    Empiezas el artículo con “Ahora que los tabs fbml tienen fecha de caducidad…”. Puedo saber esa fecha? Cómo será? Dejarán de funcionar las secciones con FBML ? Se sabe algo? Mucho mejor si me pasas un enlace oficial de Facebook donde leer al respecto., muchas gracias y excelente artículo, lo tendré en cuenta para un post que estamos redactando. Gracias.

    • Cristina Amor

      Reply Reply 22 julio, 2011

      Según tengo entendido, Facebook seguirá dando soporte a las tabs con FBML por algún tiempo, no ha especificado hasta cuándo. Por eso es recomendable ir haciendo el cambio a iframe lo antes posible.

  • Roger

    Reply Reply 12 junio, 2011

    Exelente informacion pero tengo una gran duda ¿como hacer que al momento de que alguien de clic en megusta lo envie a utra pagina creada un iframe como por ejemplo a una pagina de captura ?

  • alfredo

    Reply Reply 18 junio, 2011

    muy buen material amigo lo q necesitaba tb como decia roger como hago cuando alguien haga click en me gusta y muestre otra pagina gracias

  • Wilmer

    Reply Reply 18 agosto, 2011

    Me ha servido mucho su post, está muy bien explicado su información, si pude aplicarlo esa pestaña de iframe en mi facebook aunque me tarde un buen tiempo aplicándolo.
    Gracias por su ayuda.

  • Jorge

    Reply Reply 31 agosto, 2011

    Existe una aplicación GRATUITA en facebook llamada MITUCAN que genera automaticamente una web completa dentro de tu página de facebook. Una vez instalada se elige un diseño y se edita la web con un gestor de contenidos muy completo. Podeis echarle un vistazo en la web oficial http://www.mitucan.com
    Espero sirva de ayuda. Saludos

  • Cristian Gonzalez

    Reply Reply 22 noviembre, 2011

    También existe una aplicación muy chula para crear pestañas llamada http://cool-tabs.com 😀

Leave A Response

* Denotes Required Field