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