Se muestra como Crear una Aplicación en Facebook, Configuración paso a paso , con una funcionalidad basica de obtener datos del usuario que usa la Aplicación

1. Desarrollo de Aplicación
para Facebook con PHP
Ramiro Javier Chuquimia Ticona
@ramir0ck
ramiro@confianet.com

2. Facebook Develpoer
Primero ingresamos a la URL
https://developers.facebook.com/apps
Para administrar
nuestras Aplicaciones
debemos usar la
Aplicación
“Developer” de
Facebook, asi que en
pantalla, hacemos
click en el boton
“Go to App”

3. Create New App
En la siguiente pantalla en la parte derecha hacemos
un click en el Botón “Crear Nueva Aplicación”

4. Create New App
En la siguiente pantalla, ingresamos el nombre de la
Aplicación, y un “Espacio de Nombre”, si no tenemos
un servidor propio con soporte de SSL, podremos
usar un Hosting gratuito seleccionando la Casilla
“Web Hosting”, luego hacemos click en “Continuar”

5. Create New App
Rellenamos el Captcha para poder continuar, y
hacemos click en el boton “Aceptar”

6. Configuración Básica de la App
Observamos App ID, y App Secret, que usaremos mas
adelante. Llenamos las opciones de Información Básica,
Display Name, Namespace, email, App Domains (el dominio
principal) y Categoria

7. Configuración Básica de la App
Habilitaremos la opción:
“Website with Facebook Login”
Y en la opción pondremos el URL de la carpeta donde se
encuentra la Aplicación en Facebook, ya que Facebook sólo
aceptará la Autentificación de Usuarios en dicha carpeta

8. Configuración Básica de la App
Seleccionamos la opción“Aplicación en Facebook” y se
habilitarán dos espacios, ingresaremos la ubicación de
nuestra aplicación en nuestro servidor propio (la URL segura
es obligatoria), luego click en “Guardar Cambios”

9. Configuración Básica de la App
Una vez que guardamos nuestra Aplicación, debemos publicar
nuestros archivos en nuestro servidor para probar la
aplicación, copiaremos los datos App ID y App Secret para
configurar nuestra aplicación.

10. Documentación de App
Para descargar el un ejemplo de prueba de una Aplicación de
Facebook, ingresaremos a la siguiente dirección:
https://developers.facebook.com/docs/
O podemos hacer click en el Menú a la opcion “Documentación”
Luego ingresaremos a la opción “Apps on Facebook”

11. Documentación de App
En la Pantalla de “Apps on Facebook”
Buscaremos en la columna izquierda la opción SDK Reference, y
hacemos click en esta opción, para elegir el lenguaje del SDK

12. Documentación de App
En la Pantalla de “SDKs”
Buscaremos la opción “Facebook SDK for PHP” al hacer click nos
empezará a mostrar la referencia del SDK para PHP

13. Documentación de App
En la Pantalla de “Facebook SDK for PHP”
Encontramos un enlace a GitHub, donde se encuentra la libreria
SDK de Facebook, para que podamos trabajar en PHP, por ello
le hacemos click a la opción “GitHub”

14. Documentación de App
En la Pantalla de “GitHub”
Buscaremos el Boton “ZIP” que nos descargará el SDK de
facebook, ademas archivos de pruebas, y ejemplos que
podremos usar para nuestras Aplicaciones

15. Documentación de App
De los archivos que descargamos, tenemos una carpeta llamada
“src” dentro de ella se encuentran los archivos para poder crear
las aplicaciones de Facebook
El archivo que llamaremos dentro de nuestra aplicación sera el
“facebook.php”

16. Aplicación de Facebook
Empezamos el codigo PHP
Llamando a la libreria del SDK, que se encuentra en la carpeta
“sdk-fb” (para nuestro ejemplo)
Los datos importantes que tenemos que cambiar son el appId y
el secret, parametros que nos sirven para poder crear una
instancia de Facebook

17. Aplicación de Facebook
Llamamos al método getUser, que nos devolverá el nombre de
usuario si éste se autentificó en la Aplicación.
Luego preguntamos por esta variable para definir el
comportamiento de la Aplicación

18. Aplicación de Facebook

19. Aplicación de Facebook
Probando la Aplicación desde el url de nuestro servidor
http://www.dobleclick.biz/www/appsfb/php0/

20. Aplicación de Facebook
Probando el Canvas Page
Iframe a nuestra aplicación, que se visualiza dentro de Facebook
http://apps.facebook.com/phpcero

21. Aplicación de Facebook
Al hacer click en el link de “Iniciar Sesión” nos muestra la
siguiente pantalla, donde tenemos que hacer click en “Ir a la
aplicación” para poder usar la Aplicación.
Esta pantalla se puede configurar en la opción “Auth Dialog” de
la configuración de nuestra Aplicación

22. Aplicación de Facebook
Configuración de Auth Dialog

23. Aplicación de Facebook
Una vez que iniciamos Sesion en Facebook, nos mostrará la
siguiente ventana, con los datos del usuario activo

24. Aplicación de Facebook
En lugar de mostrar todo el Vector
Podemos usar solo los datos que nos interesan,
Por ejemplo, el nombre, apellido y nombre de usuario
El id de usuario , nos sirve para obtener el Avatar del usuario
Con el codigo
https://graph.facebook.com/<?php echo $user_profile[‘id’]; ?>/picture

25. Aplicación de Facebook
El resultado final de mostrar sólo los datos del usuario que
necesitamos,

26. Pueden descargar el ejemplo de:
https://www.box.com/s/9c420ae78dba7ffca133
Ramiro Javier Chuquimia Ticona
@ramir0ck
ramiro@confianet.com