26
Ramiro Javier Chuquimia Ticona @ramir0ck [email protected] Desarrollo de Aplicación para Facebook con PHP

Desarrollo de aplicacion facebook con php - Basico

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Desarrollo de aplicacion facebook con php - Basico

Ramiro Javier Chuquimia Ticona@ramir0ck

[email protected]

Desarrollo de Aplicaciónpara Facebook con PHP

Page 2: Desarrollo de aplicacion facebook con php - Basico

Primero ingresamos a la URLhttps://developers.facebook.com/apps

Facebook Develpoer

Para administrar nuestras

Aplicaciones debemos usar la

Aplicación “Developer” de

Facebook, asi que en pantalla, hacemos click en el boton

“Go to App”

Page 3: Desarrollo de aplicacion facebook con php - Basico

En la siguiente pantalla en la parte derecha hacemos un click en el Botón “Crear Nueva Aplicación”

Create New App

Page 4: Desarrollo de aplicacion facebook con php - Basico

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”

Create New App

Page 5: Desarrollo de aplicacion facebook con php - Basico

Rellenamos el Captcha para poder continuar, y hacemos click en el boton “Aceptar”

Create New App

Page 6: Desarrollo de aplicacion facebook con php - Basico

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

Configuración Básica de la App

Page 7: Desarrollo de aplicacion facebook con php - Basico

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

Configuración Básica de la App

Page 8: Desarrollo de aplicacion facebook con php - Basico

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”

Configuración Básica de la App

Page 9: Desarrollo de aplicacion facebook con php - Basico

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.

Configuración Básica de la App

Page 10: Desarrollo de aplicacion facebook con php - Basico

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”

Documentación de App

Page 11: Desarrollo de aplicacion facebook con php - Basico

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

Documentación de App

Page 12: Desarrollo de aplicacion facebook con php - Basico

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

Documentación de App

Page 13: Desarrollo de aplicacion facebook con php - Basico

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”

Documentación de App

Page 14: Desarrollo de aplicacion facebook con php - Basico

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

Documentación de App

Page 15: Desarrollo de aplicacion facebook con php - Basico

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

Documentación de App

Page 16: Desarrollo de aplicacion facebook con php - Basico

Empezamos el codigo PHPLlamando 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

Aplicación de Facebook

Page 17: Desarrollo de aplicacion facebook con php - Basico

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

Aplicación de Facebook

Page 18: Desarrollo de aplicacion facebook con php - Basico

Aplicación de Facebook

Page 19: Desarrollo de aplicacion facebook con php - Basico

Probando la Aplicación desde el url de nuestro servidor

http://www.dobleclick.biz/www/appsfb/php0/

Aplicación de Facebook

Page 20: Desarrollo de aplicacion facebook con php - Basico

Probando el Canvas PageIframe a nuestra aplicación, que se visualiza dentro de Facebook

http://apps.facebook.com/phpcero

Aplicación de Facebook

Page 21: Desarrollo de aplicacion facebook con php - Basico

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

Aplicación de Facebook

Page 22: Desarrollo de aplicacion facebook con php - Basico

Configuración de Auth Dialog

Aplicación de Facebook

Page 23: Desarrollo de aplicacion facebook con php - Basico

Una vez que iniciamos Sesion en Facebook, nos mostrará la siguiente ventana, con los datos del usuario activo

Aplicación de Facebook

Page 24: Desarrollo de aplicacion facebook con php - Basico

En lugar de mostrar todo el VectorPodemos usar solo los datos que nos interesan,Por ejemplo, el nombre, apellido y nombre de usuarioEl id de usuario , nos sirve para obtener el Avatar del usuario

Con el codigohttps://graph.facebook.com/<?php echo $user_profile[‘id’]; ?>/picture

Aplicación de Facebook

Page 25: Desarrollo de aplicacion facebook con php - Basico

El resultado final de mostrar sólo los datos del usuario que necesitamos,

Aplicación de Facebook

Page 26: Desarrollo de aplicacion facebook con php - Basico

Ramiro Javier Chuquimia Ticona@ramir0ck

[email protected]

Pueden descargar el ejemplo de:

https://www.box.com/s/9c420ae78dba7ffca133