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
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”
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”
- 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
- 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.
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…..
entradas relacionadas
- Taller: ¿Cómo mostrar contenido diferente en una pestaña de Facebook para fans y no-fans?
- Extended Info: incluye una pestaña con más información en Facebook
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???
Wohoo!!! Bravo por tu publicación..
excelente…
Tremendamente útil y de actualidad. Muchas gracias!
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
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
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!
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?
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.
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!! )
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
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
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
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
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
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
Muy buen tutorial. Yo lo he probado sin problemas, aunque ahora estoy trabajándome una página más curiosa.
Buen trabajo.
Una manera de ir progresando en las inovaciones de la internet, les agradesco este tutorial, sobre iframes, gracias.
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
Me da el siguiente error: “Validation failed.
Unable to update Canvas Page: The Canvas Page you requested is already taken.”
¿A que se debe?
Hola Pablo: esto se debe a que el nombre que le das ya está dado… intenta cambiarlo… Saludos! Kali
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
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.
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
Gracias por vuestra información!
Saludos a todos!
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)
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.
Excelente aporte, me ayudo mucho
muy buen tutorial pero tambien ay otra forma pueden ver eset video http://www.youtube.com/watch?v=PWYyz9OOs_8 nuevamnte muy buen tutorial
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
Una pregunta… la URL puede ser de una imágen sacada de algún muro de facebook por ejemplo?¿? Gracias por la info.
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
No le entendi ni madr….., he leido por dias este texto y no le entiendo, cosas pequeñas me atormentan … necesito mas ayudaaaaaaaaaaaaaaaaaaaaa