Tutorial, Crear una aplicacion para Facebook

Hoy, vamos a hacer una pequeña aplicacion para el facebook, de esas que muestran una frase al azar, y claro, les podra servir como pauta para crear aplicaciones similares pues su codigo es abierto.

Porque crear una aplicacion para el facebook? ademas de presumir que son desarrolladores de la red social mas grande de internet, tambien pueden incluir sus anuncios dentro de la aplicacion, y asi sacar un dinerito extra, bien, si su aplicacion se vuelve algo viral, les puedo asegurar viviran unos meses sin problemas financieros. ganando hasta 150 USD al dia (claro que esto casi nunca pasa) pero en su mayoria, las aplicaciones tienen un exito moderado dada la cantidad de usuarios del fb, asi que podrian estar ganando 100USD mensuales sin mover un dedo, genial no?

Bueno, comenzemos; en primer lugar, vamos a descargarnos los archivos y programas  necesarios para configurar nuestra aplicacion:

Cliente FTP: http://filezilla-project.org/

Archivos fuente: http://www.mediafire.com/?mkmwo1qumfo

Una vez que hemos descomprimido los archivos en nuestra PC, e instalado nuestro cliente FTP, vamos a introducir en nuestro navegador:

http://www.facebook.com/developers/

Y haremos click en crear nueva aplicacion, ingresamos nuestro nombre y aceptamos los terminos del servicio...

Nos aparecera una ventana con nuestra api key y nuestro secret, esos dos datos son los que permiten conectar nuestra app con la interfaz de facebook, asi que son sumamente importantes.

Entre los archivos que descargaron, encontraran una carpeta llamada footprints y dentro un archivo llamado config.php bastara con abrir el archivo para realizar la operacion descrita en la  imagen

Una vez que han llenado los campos en el archivo config.php con los suministrados por facebook, guardamos el archivo y procederemos a editar nuestra app rellenando los campos de descripcion, desarrolladores, iconos, etc

Guardamos los cambios, y dejamos la ventana del navegador abierta, en una nueva pestaña; vamos a conseguir un espacio para alojar nuestra app, podemos hacerlo desde mi@ pues es un host bastante solido, y muy importante, Gratuito

Tras registrarnos, vamos a http://hosting.miarroba.com/ y seguimos los pasos que se nos indican para obtener un nuevo espacio

Una vez en el panel de control, vamos a tomar estos datos:

Dejamos el sitio abierto, y regresamos a la pestaña de configuracion del facebook, nos dirigiremos a la seccion Canvas y la editatemos como muestra la imagen a continucacion, con los datos del dominio que recien creamos (recomiendo no usen carpetas como yo en la imagen solo el dominio ejemplo: http://dominio.webcindario.com)

RECUERDEN MARCAR UNA APLICACION DEL TIPO FBML

Guardamos los cambios y procedemos a editar en conexion

Una vez hecho esto, volvemos a la carpeta principal donde hemos guardado todos los archivos que descomprimimos y abrimos index.php para editar nuestra aplicacion, aqui podremos modificar las frases que mostrara nuestra aplicacion.

No olvidemos buscar y reemplazar: 

http://todotutoriales.netai.net/facebook/DrHouse.jpg  << Esta sera la imagen que mostrara su aplicacion cambienla

http://apps.facebook.com/frasediariadehouse/index.php  << Pongan su propio canvas

http://live-mex.webcindario.com/facebook/ads.html << Pueden poner sus propios anuncios

Otra Frase del Dr House << Reemplazen esto por supuesto

Frase diaria del Dr House << El nombre de su App

http://apps.facebook.com/frasediariadehouse << Pongan la direccion de su canvas

Tengan cuidado, y no toquen las comillas que rodean a las frases o las direcciones a menos que sepan lo que hacen.

Una vez que han Editado su aplicacion, (espero que hayan dejado los creditos de bloggeandolo U.U) vamos a abrir nuestro cliente FTP y vamos a usar los datos de mi@ que hace un par de pasos les pedi dejaran abiertos.

Recuerden subir todos los archivos al directorio que definieron como canvas, si no NO funcionara, si atendieron a mi sugerencia, solo arrastren todos los archivos al directorio principal que les mostrara filezilla.

Una vez que han terminado, pueden probar su app desde el canvas page URL o bien verla desde facebook/developers

Y asi deberi quedar:

Espero les sea de utilidad este tutorial, como siempre a la espera de sus comentarios, un saludo

Posted in: Aplicaciones Web,Trucos,Tutoriales,Web 2.0