Cómo crear paginas personalizadas en facebook (Iframe)
Ahora que no hay posibilidad de crear pestañas FBML, los usuarios de Facebook tienen que utilizar el método IFrame con el fin de agregar pestañas personalizadas a su página de fans. Las pestañas IFrame son sin duda un poco más complicadas para crear en comparación con las pestañas FBML, debido principalmente al hecho de que es necesario configurar una aplicación de Facebook ( clic aqui para ver cómo preparar una aplicación facebook para el uso de pestañas personalizadas iframe).
A pesar de que puede ser más difícil de crear, existen numerosas ventajas para el uso de pestañas IFrame en lugar de las extintas FBML, el código se encuentra en tu propio servidor, el flash no requiere activación, un sin fin de oportunidades Javascript, y mucho más. En la entrada anterior mostraba cómo configurar la aplicación Facebook, ahora vamos a ver cómo crear la actual pestaña personalizada Facebook IFrame y la manera correcta de sincronizarlo con nuestra aplicación.
Paso 1: Crear la base de aplicaciones de Facebook
Con el fin de crear una pestaña Facebook IFrame primero tendrás que crear una aplicación de Facebook. Si aún no lo ha creado tu aplicación, házlo ahora. Si no sabes cómo configurar una aplicación de Facebook para su pestaña personalizada IFrame, por favor, primero lee y completa este tutorial: Cómo preparar una aplicacion facebook para el uso de pestañas personalizadas iframe
Paso 2: Configuración de la base de archivos PHP
Ahora que tienes la aplicación de Facebook en funcionamiento y listo para empezar a crear tu actual Pestaña IFrame, deberías tener un archivo en blanco ‘index.php’ listo para editar. Lo primero que haremos es agregar lo normal de código HTML necesario para conseguir que nuestro archivo php funcione. Abre el archivo PHP y añade el siguiente código:
TU CODIGO AQUI
Ahora debes tener el archivo ‘index.php’ en funcionamiento básico. Todo esto es HTML muy básico y cualquiera que sepa algo de HTML no debería tener problemas para comprender lo que se ha hecho aquí.
En el interior de la etiqueta <head> te darás cuenta de que he vinculado a una hoja de estilo externo “style.css”, a esto se hará referencia más adelante en Paso 5.
el “base Target” se establece como _blank siempre y cuando queramos que cualquier enlace salga fuera del iframe, en caso contrario deberemos usar _self.
Finalmente, una vez que hayas completado los pasos de este post ya deberias crear tu codigo personalizado donde dice “TU CODIGO AQUI“.
Paso 3: Agregar el Javascript Facebook
Ahora que tenemos el archivo ‘index.php’ funcional, podemos añadir el Javascript Facebook que se necesita para ayudar a crear nuestra pestaña personalizada IFrame. Este poco de Javascript es lo que realmente hará que nuestro “index.php” se comunique con nuestra aplicación de Facebook. Añade el siguiente script justo antes de cerrar la etiqueta </body>:
Asegúrate de cambiar donde dice “INSERTA TU APP ID AQUI” para la identificación real de la aplicación única, que conseguiste al crear la aplicacion en facebook.
Paso 4: Eliminar las barras de desplazamiento no deseado mediante Javascript
Este script te ayudará a cambiar el tamaño del lienzo IFrame para eliminar barras de desplazamiento no deseadas que suelen resultar del uso de un IFrame. De forma dinámica se ajustará tu IFrame de tamaño de modo que no es necesario para establecer realmente una altura predeterminada. Esto es definitivamente una ventaja adicional para los usuarios cuya pestaña contará con contenido actualizable que no siempre se ajusta a un determinado tamaño. Coloca el siguiente código dentro de etiqueta <head> dentro de tu index.php
Paso 5: Uso CSS
Crear el archivo “style.css” lo pones junto a tu ‘index.php’ archivo. Agregua el siguiente codigo CSS a tu archivo:
body{
margin: 0;
overflow: auto;
}
#container{
width: 520px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
Este codigo ayudará a eliminar correctamente las barras de desplazamiento no deseado de nuestra ficha. Ya que nuestra área real de la pestaña IFrame es sólo 520px, se requierer establecer el “margin” a cero, lo que ayudará a eliminar cualquier margen adicional no deseado en nuestro IFrame. Al añadir el “overflow” como auto o a nuestro “cuerpo” estamos asegurando que nuestros pestaña IFrame muestre correctamente el tamaño, su falta se traducirá en una pestaña IFrame muy inestable.
Los estilos que se añaden para el div contenedor son sólo una sugerencia, y se puede alterar esto de cualquier manera. Pero recuerda que es una buena practica ceñirse a esos 520px de ancho…
Paso 6: Sube, prueba, e inicia la codificación
Ahora sube tus archivos index.php y style.css a tu servidor en la direccion que especificaste a tu aplicacion facebook. La falta de estos se traducirá en una pestaña rota IFrame. Después de cargar los archivos, vamos a tu página de fans en Facebook, buscas la pestaña en el menú de la izquierda y si todos los pasos se realizaron correctamente, deberías ver “TU CÓDIGO AQUÍ”. Ahora que tu ficha IFrame está en pleno funcionamiento,puedes insertar tu codigo.
CODIGO COMPLETO:
TU CODIGO AQUI
TweetDiscover: Plataforma de análisis para Social Media y campañas de marketing en Twitter
Adios FBML, Hola IFrames
La nueva creatividad de los perfiles Facebook
About The Author
Hola Raúl me gusto mucho tu post pero tengo una duda. seguí todos los pasos. y logro ver el app que cree pero solo en mi cuenta no en la de fan( por lo tanto solo yo puedo ver), tu explicacion dice que tendria que verse tambien en la de fan. es correcto o entendi mal? tienes idea que podria estar pasando? te adjunto una imagen para aclarar un poco. espero me puedas guiar. gracias.
http://www.webinnova.com.ar/fb_index/imagenes/face.jpg
Realmente, y siguiendo los pasos , la aplicacion generada se tendria que ver en la pestaña personalizada creada en el post anterior/posterior a este. Totalmente independiente de tu perfil personal.
Un autentico placer haberte servido de ayuda! 😉 Wilmer!
Hola luego de varios cabezazos me di una segunda vuelta y encontré esto que me resolvió el problema, espero los ayude http://www.emenia.es/crear-una-pestana-iframes-pagina-fans-facebook/
Muy bueno el post, pero me ayudas a insertar una imagen dentro de la pagina? donde debe estar hosteada?
ojala puedas ayudarme…
gracias!
la imagen debes de alojarla en tu servidor y llamarla con la ruta remota… es decir… dentro del codigo del iframe añadir el tag html correspondiente ( ) por ejemplo.
JmL gracias por el enlace ! 😉
hola mi estimado busque por mucho en google con respecto al tema de los iframe para facebook y todas ponian codigos pero ninguna explicaba de la forma detallada como tu lo haces gracias por compartir tus conocimientos con los usuarios novatos pero con ganas de aprender ..
no se si sera mucha la patudes pero me gustaria saber como crear paginas de aterrisaje he visto muchas parece q lo hacen con flash pero no se relamente si es flash o algun lenguaje de programacion como php ..
porque dicen que nos e puede insertar un flash en facebook (una pagina web hecha en flash )
Hola Gino, efectivamente.. al usar un iframe para lanzar tu porcion de página web dentro de facebook no te limita a ningun estilo, codigo, etc… simplemente decirte que puede ir un cuadro flash, codigo javascript, etc… cualquier cosa. 🙂
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
gracias por el aporte Jorge 😉
Pues no me funciona, jodidas barras
la berdad esqe busqo una qosa y me sale otra cosa la berdad osea jelopuuuu
ubiqense un formato en HTML qe onda qon el face