Como les contamos en nuestros post anteriores Facebook dejo de usar el formado fbml para cambiarlo por iframe. A los que les resulte un poco complicado les recomiendo utilizar la aplicación iframe app o cualquier otra aplicación, sin embargo el tutorial que les pasare a mostrar no es complicado, simplemente necesitan tiempo y paciencia para obtener un mejor resultado.
Lo primero que haremos es elegir una
plantilla, de las mas de 40
plantillas, para luego editarla.
La edicion de la plantilla nos resultara el paso mas largo, tómense su tiempo para que su pestaña quede excelente; Como ejemplo les mostrare como cree la pestaña "bienvenidos" de nuestra pagina Facebook,
Trucobook, he elegido la plantilla Night City, la descargaremos, descomprimimos y entramos a la carpeta
html donde se encuentran los html mas la carpeta de imágenes.
(si elegimos una plantilla sin pestañas, en este caso serian
home [index]
, about y contact, encontraremos un solo archivo html)
Procedemos a editar los html, los abrimos con
Aplicación MFC WORDPAD, (clic derecho, abrir con.., y eleguimos Aplicacion MFC WORDPAD), no necesitas instalarlo, a este programa las trean todas las pc con windows; y editamos la plantilla; y así lo hacemos con todos los html, en caso de que sea mas de uno.
El segundo paso son las imágenes, entramos a la carpeta
images, dentro de la misma carpeta html y encontraremos las imágenes, ahora deberemos crear nuestras propias imágenes, al crearlas lo haremos con el mismo nombre de la imagen que reemplazara y con el mismo tamaño.
si en la plantilla original vemos algo que nos gusta y queremos mantener (como por ejemplo en nuestro caso el diseño de los botones) nos dirigimos a a la carpeta psd donde encontraremos un archivo psd de photoshop, si no tienes el programa lo puedes descargar de muchos sitios, abres el archivo con el programa y en la parte derecha encontraras las carpetas que forman la imagen, de estas elegimos las partes que nos interesan, en nuestro caso fue en menu entonces fuimos a header, menu y encontramos lo que buscamos, ahora simplemente creamos una imagen del mismo tamaño y arrastramos la carpeta contact, por ejemplo, y la soltamos en la nueva imagen, luego modificamos la palabra contact por lo que deseemos, en mi caso fue TOP POST.
Cuando ya tenemos todo editado y hecho a nuestro estilo deberemos subirlo a un servidor, lo haremos con
000host, (puedes hacerlo con el servidor que desees como por ejemplo miarroba)
Hacemos clic en
sing up!
Elegimos el subdomino y completamos el resto de los datos y haremos clic en Create My Account.. luego al ir a Cpanel veremos a la derecha del sitio los datos del sitio que hemos creado
(si entran a la pagina trucobook.hostoi.com verán nuestra pestaña)
Nuestro sitio ya esta creado ahora debemos subir los archivos que editamos, para esto utilizaremos
FileZilla, donde en
servidor colocaremos
server name, en
nombre de usuario colocaremos
Username y en contraseña colocaremos la contraseña que elegimos al crear el sitio, con esos conectaremos con el sitio que hemos creado, nos mostrara dos archivos y una carpeta, a los archivos los podemos dejar no molestan, deberemos abrir la carpeta public_html y borramos el archivo que se encuentra en la carpeta, ahora procederemos por fin a subir nuestros archivos, simplemente buscamos la carpeta html (donde están los html y las imágenes), subimos los html mas la carpeta images, quedando asi:
Al entrar al sitio que creamos (url) veremos la pagina (en nuestro caso trucobook.hostoi.com).
Nuestra pestaña ya esta creada ahora la colocaremos en nuestra pagina Facebook.
Entramos en
desarrolladores y creamos una aplicación (puede llegar a pedirte que te identifiques con un numero telefónico o tarjeta de crédito, no tengas miedo es solo para comprobar tu identidad)
Luego 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 (trucobook.hostoi.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 la url de la pestaña que se mostrara ( trucobook.hostoi.com.index.html/)
Por ultimo la agregaremos a la pagina:
Nuestra pestaña ya esta lista, recuerda que te llevara tiempo, ten paciencia para que el resultado sea el mejor posible. esta es una imagen del original y el nuestro
