Crear pestaña iframe para pagina Facebook

Facebook a comenzado a abandonar el código FBML por HTML iFrames; de modo que progresivamente los códigos fbml dejaran de funcionar, teniendo que reemplazarlos por html.

Agregar iframe a nuestra pagina Facebook es básicamente agregar una aplicación creada por nosotros donde estará el contenido de la pestaña, que luego agregaremos a la pagina Facebook.

Paso 1:
Crearemos el archivo html al que llamaremos index.

ejemplo de codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.container {
width:495px;
height:700px;
background:#000000 no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
}


.mensaje {
text-align:center;
font-size:58px;
font-weight:bold;
padding-top:200px;
}


.url {
color:#dddddd;
font-size:38px;
text-align:center;
padding-top:50px;
}

</style>
</head>
<body>


<div class="container">
<div class="mensaje">AQUI VA EL CONTENIDO </div>


<div class="url">facebook.com/trucosfb</div>


</div>




</body>
</html>

Lo que esta en otro color es lo editable, colocaremos el código html que deseemos, también podriamos colocar los social plugins facebook para sitios web, como el boto me gusta, recomendaciones y el resto.

Paso 2:
Lo subimos a un servidor, recomiendo Miarroba que es gratuito, creamos nuestra cuenta y accederemos a hosting y luego en crear nuevo espacio. Una vez creado nos dará la siguiente información



Ahora lo subiremos utilizando el programa Filezilla, instalado el programa lo conectaremos con el servidor de Miarroba completando servidor, nombre de usuario y contraseña con los datos de acceso cliente ftp.
Cuando ya estemos conectado en el lado derecho del programa buscamos el archivo que ya creamos en el paso 1 ( index.html)


Al hacerle doble clic sera subido al servidor, copiándose en el recuadro de al lado.


Paso 2:
Debemos crear nuestra aplicación; nos dirigimos a desarrolladores  y procederemos a crear la aplicacion haciendo clic en Crear una nueva aplicacion, colocamos el nombre y aceptamos.



Ahora nos dirigimos a editar la información de la aplicación; en Acerca de colocaremos un icono que es el que se vera junto al nombre de la pestaña (una de las ventaja es que ya no tendremos el icono fbml y colocaremos el que deseemos)



Luego nos dirigimos a Sitio web; Donde colocaremos la URL (en mi arroba mirar información general), en este caso es http://aplideprueba2.webcindario.com/



Por ultimo vamos a Integración con Facebook; En canvas rellenaremos los campos de Pagina de trabajo donde colocaremos la url de nuestra aplicacion en Facebook, es colocar un nombre no mayor a 20 caracteres.
En Canvas url colocaremos la URL que colocamos en sitio web (ejemplo http://aplideprueba2.webcindario.com/)
En Canvas type seleccionamos iframe.
Ahora nos dirigiremos a la parte inferior donde se encuentra Pestaña;
En Nombre de la pestaña colocaremos el nombre que tendrá la pestaña en nuestra pagina facebook (en el caso de este ejemplo es Bienvenidos)
Y por ultimo en URL de pestaña colocaremos index.html ( que es el archivo que creamos en el paso 1).

Ya realizado todo esto hacemos clic en GUARDAR CAMBIOS.

Paso 3:
Ya hemos creado nuestra aplicación, lo único que nos falta es agregarla a nuestra pagina Facebook.
Para esto nos dirigimos a Perfil de la aplicación y haremos clic en agregar a mi pagina; donde seleccionamos la pagina a la que agregaremos la pestaña





EL RESULTADO SERA ESTE 




Las preguntas que soliciten respuesta hazlas en nuestra pagina Facebook
 
Trucos Facebook | Trukibook © 2014
Powered by Trukibook - FB Me Gusta pop up