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