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