Micaela 10 de Octubre de 2009 a las 10.10
   Imprimir artículo
elWebmaster.com

Crea tu propia aplicaci贸n de Facebook en pocos minutos


facebookYa sea que quieras integrar presentaciones en tu perfil en Facebook o compartir tus libros y pel铆culas favoritas con amigos, es probable que ya exista una aplicaci贸n de Facebook para resolver tu problema.

Sin embargo, si eres un poco m谩s aventurero y quieres desarrollar tu propia App para Facebook que funcione como quieres y no lleve marcas de terceros o publicidades, aqu铆 hay un tutorial f谩cil para ayudarte a empezar.

C贸mo escribir tu propia aplicaci贸n Facebook en 5 minutos

El Plan: Vamos a escribir una aplicaci贸n b谩sica de Facebook que tendr谩 enlaces a nuestros perfiles sociales y un cuadro de b煤squeda del sitio de Google. M谩s adelante, podr谩s expandir la idea para construir aplicaciones algo m谩s complejas que contengan canales RSS, videoclips, etc

Cosas que necesitas: No tienes que ser un "geek" para escribir las aplicaciones b谩sicas de Facebook. Todo lo que necesitas es un poco de conocimiento de lenguajes de programaci贸n web y algo de espacio libre en un servidor web donde alojar tu aplicaci贸n Facebook (que no son m谩s que simples archivos PHP).

OK, ahora si, empecemos

Paso 1. Asumiendo que ya posees una cuenta en Facebook, agrega la aplicaci贸n de desarrolladores a tu perfil de Facebook. Para ello, debes ingresar aqu铆禄 y, a continuaci贸n, hacer clic en el bot贸n "Set Up New Application" que puedes encontrar en la parte superior derecha.

Paso 2. Dale a tu nueva aplicaci贸n Facebook un nombre, acepta los t茅rminos y luego sube alguna imagen para el logotipo de tu aplicaci贸n.

12

Paso 3. De la configuraci贸n de aplicaciones, selecciona Canvas y establece FBML como el m茅todo de representaci贸n. La otra opci贸n es IFRAME pero usaremos FBML por el momento, para mantener las cosas simples.

Paso 4. Utilizando cualquier editor de HTML WYSIWYG (o incluso el bloc de notas), escribe el contenido que deseas mostrar en el interior de tu aplicaci贸n de Facebook.

En este ejemplo, estamos agregando s贸lo dos im谩genes con hiperv铆nculos con un cuadro de b煤squeda de Google y por lo tanto el c贸digo ser铆a algo como esto:

  1. <p>
  2.  <a href="http://twitter.com/labnol">
  3.    <img src="http://labnol.org/twitter.png"/></a>
  4.  <a href="http://www.youtube.com/labnol">
  5.    <img src="http://labnol.org/youtube.png"/></a>
  6. </p>
  7. <form action="http://search.labnol.org/">
  8.  <input type="text" name="q" size="15" />
  9.  <input type="submit" name="s" value="Search" />
  10. </form>

Paso 5. Inicia sesi贸n en el servidor web que albergar谩 la aplicaci贸n Facebook y crea un sub-directorio llamado "facebook". Por lo que si su dominio es example.com, a la aplicaci贸n Facebook se podr谩 acceder desde example.com/facebook.

Bajo el directorio de Facebook, descarga (wget) la plantilla de aplicaci贸n y cambia el nombre del archivo a index.php. Sustituye la clave de la API y la clave secreta en index.php con valores reales y tambi茅n copia y pega el c贸digo HTML (que has creado en el paso 4) en el archivo index.php.

Paso 6. Mientras est谩s dentro del directorio "Facebook", descarga la biblioteca de Facebook (a trav茅s de wget) y extrae los archivos en este archivo a trav茅s de gunzip y tar. Ahora ejecuta el siguiente comando para mover facebook.php y otros archivos de la librer铆a fuera de la plataforma del subdirectorio facebook.

  1. $ mv facebook-platform/client/facebook*.php .

Paso 7: Ya casi terminamos. Vuelve a la p谩gina de tu aplicaci贸n Facebook en el navegador, haz clic en "Edit Settings" y programa los valores para Canvas.

  • Canvas Page URL - selecciona una linda URL para tu aplicaci贸n.
  • Canvas Callback URL - locaci贸n del servicio web en el que est谩n albergados tus archivos (en nuestro caso, esta ser铆a example.com/facebook).

22

Y listo. Cualquiera ahora puede a帽adir tu aplicaci贸n a su perfil.

Extiende tu aplicaci贸n Facebook

  • Simplemente hemos creado una app b谩sica, pero puedes crear aplicaciones mucho m谩s 煤tiles con simples modificaciones. Algunas ideas:
  • Puedes incorporar RSS feeds en tu aplicaci贸n para crear una librer铆a de an谩lisis de feeds como SimplePie.
  • Puedes rastrear el uso de tu aplicaci贸n Facebook v铆a Google Analytics. Simplemente a帽adiendo el siguiente c贸digo en tu PHP:
    1. <fb:google-analytics uacct="UA-12345-xx" />

  • Puedes utilizar en tu aplicaci贸n el mismo esquema de colores y los mismos estilos CSS que son utilizados en el sitio principal de Facebook.
  • Si deseas emebeber videos YouTube o presentaciones Slideshare en tu aplicaci贸n, deber谩s usar la etiqueta <fb:swf> .
  • En lugar de utilizar un cuadro de b煤squeda plano, deber铆as considerar implementar la API de b煤squeda Google AJAX (ejemplo) lo que te permitir谩 personalizar el look de los resultados de b煤squeda para que combinen con otros elementos de la p谩gina Facebook.

Verdaderamente sencillo y genial.

驴Ustedes que aplicaciones han creado?

Fuente: Labnol


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (23)

  1. Adolfo Coll dice:

    Esta muy bien pero los que no sabemos lenguaje html necesitamos una explicci贸n y como hacerlo paso a paso con detalles para principiantes. Porque hablas con terminos tecnicos. Ademas tengo la instruc-ciones en espa帽ol y no hay ciertas expresiones en ingles

  2. jorge eduardo olaya perdomo dice:

    Cual es la "aplicaci贸n de desarrolladores"?

  3. Patricio dice:

    Cual es la aplicacion para los desarrolladores man ?

  4. Morton dice:

    Hola, Patricio y Jorge
    Se trata de configurar una nueva aplicaci贸n desde la p谩gina Developers de Facebook. Para ello, deben ingresar a http://www.facebook.com/developers/ y a continuaci贸n, hacer clic en el bot贸n "Set Up New Application" que puedes encontrar en la parte superior derecha.
    Saludos,

  5. lautaro esteban viscarra dice:

    holaaaaa me quiero hacer mi facebook y no se como me pueden ayudar

  6. lilian reyes dice:

    Me muy bueno y ayudeme a tener mi propia facebook

  7. lyyien dice:

    yo necesito mi facebook .y si me lo dan .muchas gracias

  8. lyyien dice:

    gracias

  9. lyyien dice:

    gracias por darmelo

  10. Will dice:

    Hola, gracias por el tuto. Queria preguntar, donde ingreso esto:
    1.

    2.

    3.

    4.

    5.

    6.

    7.

    8.

    9.

    10.

    Dices: escribe el contenido que deseas mostrar en el interior de tu aplicaci贸n de Facebook. pero no entiendo a que te refieres, si puedes ser un poco mas explicito por fa.

  11. victor dice:

    me pide la aplicacion facebook.php un api_client (error en la linea 38) pero en el index.php no trai donde ingresar ese campo me puedes ayudar?

  12. cesar sandoval dice:

    hola necesito ayuda!!! me quede en el paso

    Bajo el directorio de Facebook,!!

    como descargo esta plantilla y por mas que busco no encuntro el index?? ayuda
    descarga (wget) la plantilla de aplicaci贸n y cambia el nombre del archivo a index.php. Sustituye la clave de la API y la clave secreta en index.php con valores reales y tambi茅n copia y pega el c贸digo HTML (que has creado en el paso 4) en el archivo index.php.

    Paso 6. Mientras est谩s dentro del directorio "Facebook", descarga la biblioteca de Facebook (a trav茅s de wget) y extrae los archivos en este archivo a trav茅s de gunzip y tar. Ahora ejecuta el siguiente comando para mover facebook.php y otros archivos de la librer铆a fuera de la plataforma del subdirectorio facebook.

  13. cesar sandoval dice:

    la plantilla de aplicaci贸n y cambia el nombre del archivo a index.php. como es que hago eso:: no sabia que wget era un gestor de descargas recien me entero lo habia subido al direcotia facebook expliquen porfavor:

    haber tengo ya tengo la aplicacion creada en el facebook:;
    tengo la carpeta creada esta ubicada en http://www.cesarsandovall.com/portal/facebook
    entiendo que en la carpeta facebook debe de ir un archivo index.php pero a la ves una biblioteca de facebook, dondeubicola biblioteca a que ledecis biblioteca??? me podrian indicar loas pasos mas detallados ;; ta,poco entiendo donde esq que introdusco esatas linas:::
    $ mv facebook-platform/client/facebook*.php .

  14. carolina dice:

    hola mi nombre es carolina y me gustaria ser amigos de ustedes

  15. Isabel dice:

    hola, en primer lugar muchas gracias por el tutorial! estoy empezando a crear una aplicaci贸n, pero, en los primeros pasos ya no puedo. Tengo un servidor que ven铆a al comprar un dominio, pero al intentar usarlo me dice que dicho servidor no es v谩lido. Tengo que montar yo misma un servidor? o me vale con algunos que vienen al comprar dominios
    Muchas gracias!

  16. yesenia garcia gomez dice:

    no entiendo ya l e ise en crear aplicacion y me dice Tu cuenta deber ser verificada antes de que puedas realizar esta acci贸n. Por favor, verifica tu cuenta a帽adiendo tu tel茅fono m贸vil o tu tarjeta de cr茅dito.
    porkee?????????????????????????????????????????????????????

  17. DULCE MARIA dice:

    YO CREO KE EL FACEBOOK ES GENIAL

  18. Ministerio Apostolico Vicion Del Futuro dice:

    hola soy el pastor antonio vazquez

  19. jose carlos dice:

    hola
    tengo un problema
    como consigo

    Canvas URL:
    URL segura de la p谩gina principal de la aplicaci贸n:

  20. Sara Mor谩n dice:

    Existe una aplicaci贸n genial para Facebook. Se llama UFANBUILDER y consiste en generar autom谩ticamente una web completa de acabado profesional dentro de tu p谩gina de facebook. Una vez instalada se elige un dise帽o y se edita la web con un completo gestor de contenidos. Adem谩s, dispone tambi茅n de otras aplicaciones como Tienda en Facebook, Gesti贸n Inmobiliaria, etc...Podeis echarle un vistazo en la web oficial http://www.ufanbuilder.com
    Espero que os sirva. Saludos.

  21. brenda ortiz dice:

    mmmm,yo quiero hacerlos a los pasos

  22. seoexperto dice:

    Micaela en principio agradecerte por la info y queria saber si este codigo sigue siendo valido ya que el articulo es del 2009 .
    Saludos

  23. Jorge dice:

    Hola yo estoy intentando hacerlo pero me pone lo siguiente: (no ser谩 porque el dominio es .ES?)

    Error
    You have specified an App Domain but have not specified a valid integration URL.
    bulldogfrances.es must be derived from one of: URL del sitio, Mobile Site URL, Canvas URL, Secure Canvas URL, URL de pesta帽a de la p谩gina or URL segura de pesta帽a de la p谩gina.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesi贸n