LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Crear una aplicación para facebook, primeros pasos

| 12 Comments

Rev: 13/04/2012: Las app que no cuentan con un servidor seguro https están dejando de funcionar

Actualmente Facebook revoluciono la manera de comunicarse y de hacer presencia en la Web. En la actualidad no hay sitios sin la inclusión de redes sociales a sus notas o portal. Hasta alguno van mas allá, creando aplicaciones.

Cuando necesitamos hacer uso de la API de facebook o cualquiera sea, se nos presenta los requerimientos y metodologías propias de la misma mas allá del lenguaje a utilizar. Este es uno de los puntos donde el desarrollador deberá escrudiñar y resolver que métodos son los mejores, actuales y futuros para la aplicación a crear.

Facebook en la evolución de su plataforma fue presentando diferentes métodos de comunicación, los cuales en la actualidad aun viven todos por igual. Vale aclarar que por ejemplo el método FBML el cual consiste de la utilización de etiquetas para comunicarse con la plataforma de Facebook, no solo que esta desestimado sino que a partir de este año no es mas compatible con la API. Por esta razón Facebook alienta a usar su Graph API la cual innova en métodos y propiedades ya que la misma se basa en formato JSON logrando mayor compatibilidad con los lenguajes disponibles, como por ejemplo: JavaScript, PHP, ActionScript, .NET y la mayoría de lenguajes OOP.

Por esta razón es que la API de facebook en la mayoría de los casos se vuelve complicada, redundante y anti newbie para quienes dan sus primeros pasos. Es tanta las posibilidades, métodos y nuevos cambios que agregan que suele ser media tediosa. La idea de este mini tutorial es saltear los obstáculos innecesarios de investigación e ir directamente a la plataforma recomendada utilizando después de ahí en mas el lenguaje que mas común les sea.
En los siguientes tutoriales usaremos actionscript, javascript y algunos en php.

Para comenzar es importante listar que necesitamos:

  • Registrarnos o tener una cuenta de usuario de Facebook
  • Una vez identificado, registrarnos como desarrolladores en https://developers.facebook.com/ haciendo clic en “aplicaciones” [ver imagen].
  • La primera vez nos solicitara permiso para acceder a la información de nuestra cuenta [ver imagen]
  • Completado el permiso a nuestros datos hacemos clic en “crear aplicación“ [ver imagen]
    Importante: se nos pedirá validar nuestra cuenta con un numero de móvil, deben cargar el numero de su teléfono móvil y esperar que la plataforma les envié un código de validación.
    Recuerden que si están en Argentina deben usar el dígito 9 para indicar que es un teléfono celular. Ejemplo: Argentina - Córdoba: 9 351 6252233 donde 9 es la característica que indica que es un celular, 351 es la característica de Córdoba, 6252233 el numero celular sin el prefijo 15. [ ver imagen ]
    - Una vez validado el número de teléfono, llenaremos los campos “Nombre para mostrar de la aplicación” y “Espacio de nombres de la aplicación“. En el primer campo colocare un nombre que describa nuestra aplicación, en el segundo campo un nombre exclusivo de nuestra app, este no puede tener espacios ni mayúsculas y finalmente aceptamos los términos de uso, luego presionamos continuar. [ ver imagen ]
  • Verificar si somos humanos mediante capcha [ ver imagen ]
  • Completado todos estos pasos, ya logramos tener nuestra primera aplicación, así mismo queda unos puntos mas a detallar para concluir con lo mínimos requerimientos para luego ya pasar a interactuar con la plataforma.
    Vease la imagen que el indicador A: es el id de la app que luego usaremos para interactuar con esta aplicación, cada aplicación tiene su único identificador. B: Este es el código secreto para la dicha app, en algunos casos se le requerirá este código.
    Dado el caso de que vamos a trabajar en pos de crear una app para facebook vamos a completar los siguientes campos:
    La información básica ya fue cargada previamente, aunque si se requiere se puede editar en esta etapa (1, 2, 3).
    En el apartado “Seleccione como tu aplicación se integra con Facebook” seleccionamos “Aplicación en Facebook” y completamos los campos siguientes:
    Canvas URL“: Aquí indicamos la url o dominio donde tenemos alojados nuestros archivos html, php, asp etc.
    URL segura de la página principal“: Aquí podemos colocar el mismo dominio que pusimos en el campo anterior y en la parte del protocolo http cambiarlo por “https”. [ ver imagen ]
  • Finalmente en el apartado “Pestaña de página” Colocamos un nombre, y nuevamente las url de nuestro canvas, siguiendo el mismo criterio que en el paso anterior, no olviden de donde pide url segura usar https [ ver imagen ]

PD: Fíjese que la ultima imagen difiere de las restante por los últimos cambios realizados por Facebook en su plataforma, así mismo los pasos anteriores siguen siendo validos para crear una app

Finalmente pudes ver aqui el resultado de todos estos pasos y de nuestra primera APP!

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, para sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, conocimientos en CEO. Desarrollador de sitios multi plataformas en, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Director de la carrera de diseño gráfico, Profesor de Diseño III y Diseño Web, en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

12 Comments

  1. Muy buen paso a paso. Muchas gracias por explicarlo tan bien. Me gustaría saber como incluyes despues la aplicacion a la pestaña de la pagina de facebook.

    Podrías decirmelo si sabes? Te lo agradeceria mucho.

    Un saludo y seguire tu pagina a partir de ahora.

  2. Gracias por los comentarios, estoy por subir un tutorial de como agregar una pestaña a la pagina. pero para saciar tu duda te envío lo siguiente;

    entra a esta url: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

    donde dice YOUR_APP_ID > ahi colocas la id de la app
    YOUR_URL > colocas la url de la Página de trabajo

    Dale enter y aparecerá una pantalla donde te muestra tus páginas y solicita que indiques en cual de ellas queres la solapa.
    Esto esta documentado pero medio perdido ya que antes no era así, podes leerlo aquí: https://developers.facebook.com/docs/reference/dialogs/add_to_page/

  3. Pingback: Crear force liked o contenido diferente si un usuario es fan | LeoBaraldi - Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

  4. Un gran post. Felicidades desde España.
    Hemos desarrollado una aplicación, hemos seguido tus pasos y, nos encontramos que algunos usuarios ven la pagina de la aplición en blanco, ¿Sabes que puede ser?

    Gracias por tu ayuda.

  5. @Pascual, se me ocurre que no estas usando un servidor seguro, cuéntanos un poco más.

  6. Buenaso me sirvio bastante

  7. Hola mira, tengo problemas de donde alojarla app, osea no tengo ni idea, y tambien me cuesta configurarla. Yo le quiero poner un boton de “suscribirse” si me la puedes crear te lo agradeceria mucho contactame al e-mail y charlamos. Muy buen tutorial igualmente!

  8. Ah y si la alojo en Heroku, cuando aprietas en el boton “ir a la aplicacion” se me va a la pagina de heroku y no a lo que quiero que valla. Espero respuesta: REPITO AL E-MAIL porfavor. Muchas gracias genio!

  9. Estoy intentando configurar una app pero mi hosting no tiene activo el ssl activo y marca error en la seguridad ssl, es necesario que mi hosting lo tenga activo?

  10. Muy buen post, la mayoria que hay en internet esta desactualizada pero la suya me ayudo mucho.
    Muchisimas gracias.

  11. hola
    quiero comenzar en el desarrollo de app para facebook, y quiero de inicio hacer mi propio formulario de contacto o sea para que mis amgos o posibles fanes contacten conmigo atraves de un formulario, que dando un click en un boton de mi dashboard del perfil ded mi fb se muestre este formulario, este formulario es para enviar msje hacia una cuenta mia de email.
    que debo hacer? ees una app de facebook? o es una app para web?
    me pueden ayudar en eso?
    saludos
    thomas

  12. Que pasa si no cuentas con una url https, hay alguna manera de resolver este problema

Deja un comentario

Required fields are marked *.