Crear aplicación “Hello World” en Facebook con PHP


En estos días comencé a probar la API de Facebook y me anime a crear este tip que consiste en crear una aplicación que muestra un “Hello World” en Facebook utilizando PHP.

Para poder crear aplicaciones en Facebook necesitamos estar registrados en la comunidad, ya registrados nos unimos al grupo de developers.  Al entrar al grupo nos va a preguntar si permitimos que acceda a nuestro perfil como cuando agregamos cualquier aplicación, luego de aceptar podremos crear aplicaciones, acceder al foro y otras funcionalidades.

Cuando creamos aplicaciones en Facebook hay que saber que la aplicación que creamos no residen en los servidores de Facebook(el código fuente), sino en un servidor publico común y corriente.  Cuando utilizamos aplicaciones creadas por terceros o creamos nuestras propias aplicaciones, Facebook lo que hace es pasar esas solicitudes a otros servidores que procesan los datos e imprimen una respuesta que es leída por Facebook y mostrada al cliente.

Este tip estará dividido en dos pasos:

  1. Crear y configurar la aplicación en Facebook.
  2. Subir archivos al servidor, configurar, programar y probar.

Paso 1: Crear y configurar la aplicación en Facebook

En la pagina de developers existe un botón que dice Set Up New Application, ese botón es el que nos permite crear y configurar nuestra aplicación.  Allí nos encontramos con un formulario que nos solicita el nombre que llevara nuestra aplicación y si aceptamos las políticas de uso.

Luego de crear la aplicación nos queda configurar ciertos parámetros como el URL de la aplicación en Facebook, la ruta del servidor en donde residen los archivos de la aplicación que va a responder a las peticiones hechas por Facebook, imagen e icono que identifica a la aplicación, etc.

Basic:

En esta sección asignamos el nombre de nuestra aplicación, descripción, icono, logo, idioma, desarrolladores que estan relacionados con la aplicación, etc.

También podemos notar que aparece un Application ID, API KEY y Secret

  • Application ID: es el identificador único de nuestra aplicación.
  • API KEY: llave privada para acceso al API.
  • Secret: códido secreto de nuestra aplicación.

Autenticaction:

La primera opción indica a que tipo de perfil puede ser instalada la aplicación.

El punto mas importante a notar en esta sección es el campo Post-Authorize Callback URL, esta ruta indica en donde se encuentra alojada nuestra aplicación.

Canvas:

En el canvas configuramos la dirección de la aplicación en Facebook y el Callback URL de la aplicación.

Con la configuración de estos parámetros podemos continuar al siguiente paso que sera subir los archivos a nuestro servidor programar el mensaje y probar :D

Paso 2: Subir archivos al servidor, configurar, programar y probar.

Antes de comenzar a programar vamos a descargar las librerías PHP que nos permitirán interactuar con el API de Facebook.

La estructura en mi servidor es la siguiente:

En la carpeta includes se encuentran las librerías descargadas y un archivo llamado facebook_config.php creado por mi el cual tendrá como contenido el API KEY de nuestra aplicación, el código secreto(Secret), además una instancia de la clase “Facebook” seguido de una variable que tiene el id del usuario que este utilizando la aplicación.

Archivo facebook_config.php:


<?php
/**
* @Archivo que contiene los parametros de configuración "facebook_config.php"
* @versión: 1.0
* @autor: Psycho
*/

require_once 'facebook-platform/php/facebook.php';

// codigo(KEY) que identifica a nuestra aplicación y es utilizadas en cada llamada a Facebook
$appapikey = 'Coloca tu API Key aquí';

// llave privada para autenticar la aplicación en el servidor de Facebook
$appsecret = 'Coloca tu Application Secret aquí';

// Crear una instancia del objeto Facebook
$facebook = new Facebook($appapikey, $appsecret);

// Obtener el id del usuario que este utilizando la aplicación
$id_usuario = $facebook->require_login();
?>

El ultimo paso es crear el archivo index.php que sera la aplicación como tal, este archivo va a ser que el maneja la instancia del objeto Facebook que se encuentra en el archivo facebook_config.php e imprime “Hello World”.

Archivo index.php


<?php
/**
* @Archivo que imprime Hello Wold al usuario que utiliza la aplicación "index.php"
* @versión: 1.0
* @autor: Psycho
*/

// Llamar el archivo que contiene los parametros de configuración y obtine el id del usuario
require_once 'includes/facebook_config.php';
?>

Hello World <fb:name uid="<?php echo $id_usuario; ?>" useyou="false" />

Luego de configurar la aplicación en Facebook, programar los archivos y subirlos al servidor nos queda probarla, en mi caso voy a la dirección http://apps.facebook.com/psychotuto/ y lo primero que deberías es ver una pagina parecida a esta en donde aceptas que la aplicación accesa a tus datos.

Luego de aceptar allí nuestra primera aplicación en Facebook :D

En caso de cualquier duda deja un comentario.

Descargar Ejemplo

,

  1. #1 by Geminita on June 25, 2009 - 10:38 pm

    Mira bajé el appserv, que contiene varios programas, entre ellos el apache, que segun entiendo es para lo de los archivos php, pero y después qué hago, ya hice mi aplicación en face, y me gustaría entre otras cosas, organizar el contenido por temas, se entiende?, bueno, de partida no se ve el cuadrado de invitación a los amigos (se ve una lista), entiendo que porque no he realizado ésto de example code en un servidor, pero hasta ahí me llega la vaina y no entiendo nada más, pucha que he salido dura, pero no me canso jajajaj,
    un abrazo y gracias desde ya.

  2. #2 by Geminita on June 25, 2009 - 10:45 pm

    Ya antes bajé wordpress, pero seguiré leyendo, gracias.

  3. #3 by Psycho on June 26, 2009 - 1:05 am

    @Geminita que quieres decir con organizar el contenido por temas?
    Escribe exactamente que quieres hacer en Facebook para ver si te puedo ayudar, ¿tu aplicación ya esta en funcionamiento en Facebook? si es así envíame el URL para revisarla.

  4. #4 by Geminita on June 30, 2009 - 2:40 pm

    cuál de éstas?

    http://gift.quizapps.com/?app_id=437425
    http://apps.facebook.com/entre-dichos-edhecf/
    http://apps.facebook.com/entre-dichos-edhecf/&link=dashboard

    mira lo que yo quiero conseguir es lo siguiente:

    http://apps.facebook.com/tarjetitas/

    algo así, en donde se puedan separar por temas, agrandar el mensaje enviado, en fin eso.
    puedes responder a mi correo si gustas, gracias.

  5. #5 by Geminita on June 30, 2009 - 3:59 pm

    Recibiste mi mensaje?

  6. #6 by Psycho on July 2, 2009 - 12:55 pm

    @Geminita el link http://apps.facebook.com/tarjetitas/ no funciona. Si quieres crear “temas” puedes utilizar tabs o funciones en javascript para que cargue cierta data.

  7. #7 by Franco on July 6, 2009 - 12:46 pm

    Quisiera saber si habrá mas tutoriales sobre como hacer aplicaciones, estoy buscando como agregar mas funcionalidades como agregar al perfil una aplicacion, escribir mensajes al muro de tu amigo y muchas cosas que se me ocurren, pero todo esto desde código.

  8. #8 by Eduardo on August 15, 2009 - 10:30 pm

    Hola buen tutorial, estoy viendo mas cosillas y quisera saber si sabes como publicar feeds directamente en el muro, lo que trato de hacer es un tipo juego de preguntas que se elija al azar una respuesta y luego al darle un boton aparezca estas ventanas que te digan si quieres publicarlo o no…
    Saludos

  9. #9 by Psycho on August 17, 2009 - 9:54 pm

    @Eduardo si, tengo un código de ejemplo por allí dame unos días y subo un tip sobre eso vale? Saludos

  10. #10 by Daniel on August 21, 2009 - 3:26 pm

    Me saca el siguiente error:

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /homepages/6/d206490135/htdocs/web_sumimagen/zapaticos/includes/facebook-platform/php/facebook.php on line 38

  11. #11 by Psycho on August 24, 2009 - 11:06 am

    @Daniel Es extraño que ese archivo te de ese error, al parecer es un error de sintaxis, lo has modificado o algo??. Te recomiendo colocar ese problema en un foro como Cristalab o en el Developers Forum de Facebook

  12. #12 by Marito on September 4, 2009 - 12:47 pm

    Hola, vistes esas aplicaciones donde un “alguien” te tira una frase al azar y despues la podes publicar en tu muro? Queria hacer algo asi, pero no encuentro por ningun lado ayuda como para empezar por lo menos.

    Desde ya muchas gracias, tu tuto es impecable.

    :)

  13. #13 by Psycho on September 4, 2009 - 3:42 pm

    @Marito no la he visto de hecho no utilizo mucho las aplicaciones que existen en Facebook, pero me puedes decir quien es ese “alguien”? es un bot o algo así?. Porque puedes tener una tabla en tu base de datos con frases en donde las cargas de forma aleatoria y haces que el usuario la coloque en si muro.

  14. #14 by Pablo on September 11, 2009 - 2:44 am

    @Marito yo tengo lo que buscas, un codigo limpio y desarrollador por mi, por el momento lo tengo en venta. El Sourcecode.
    Si te interes agregame
    yo[@}pablomacaluso.com

  15. #15 by cristian on September 22, 2009 - 4:43 pm

    Hola tengo una consulta , he seguido paso a paso el tutoríal ,subí los ejemplos que aquí se muestran , con mis claves api y secret (mi configuración) , pero no he conseguido hacer funcionar la aplicación.

    *La aplicación se llama : cine
    *La dir donde esta alojada es : http://d-todo.org/fb/01/
    *La CANVAS_URL es : tuspeliculas (http://apps.facebook.com/tuspeliculas)

    Como comente seguí paso a paso , hice todo , lo único que conseguí fue llegar al paso donde se agrega la aplicación pero desde la url donde esta alojada y no desde “CANVAS_URL ” ( http://apps.facebook.com/tuspeliculas )
    De todas formas desde esa url supuestamente la agregue , luego de hacer clic en agregar ,me aparese el hello word , pero en una pantalla totalmente en blanco , sin ningún marco de facebook o algo por el estilo.

    En resumen no me accede desde facebook solo directo.

    Espero haberme explicado bien ..

    Agradecería alguna ayuda.

  16. #16 by cristian on September 22, 2009 - 4:50 pm

    se me olvidaba aqui hay algunas imagenes con mi configuracion

    http://d-todo.org/fb/01/imagenes

    De antemanos gracias.

  17. #17 by Psycho on September 22, 2009 - 8:50 pm

    @cristian en la imagen no has colocado como se ya a llamar la aplicación al final de la imagen en donde dice “Pagina URL en blanco” que deberla decir cine. Y verifica que la pagina de inicio es un archivo index.php

  18. #18 by cristian on September 22, 2009 - 10:27 pm

    OOO muchas gracias , tenias toda la razon con eso de la pagina en blanco , tenia una pequeña cunfusion , te lo agradesco ..

    thanks . thanks

  19. #19 by joan on October 5, 2009 - 2:55 pm

    Hola, antes de nada, gracias por el post.

    ¿Alguien te ha dicho que en los archivos de nuestra tienes el archivo facebook_config.php~ con tus appapikey y appsecret?

    Lo comento para que los actualices sin ellos.

  20. #20 by Psycho on October 5, 2009 - 4:57 pm

    :O gracias por el comentario!

  21. #21 by roberto on February 25, 2010 - 10:48 am

    hola como puedo colocar mi aplicacion en el muro podrias ayudarme
    saludos

  22. #22 by Psycho on February 25, 2010 - 11:59 am

    @roberto hola, no entendí bien tu pregunta, pero seguro quieres que tu aplicación publique en el muro de los usuarios. Si es así revisa el siguiente tip en el blog http://psycho-side.com.ve/blog/actualizar-perfil-con-streampublish-en-facebook/

(will not be published)