Desarrollo de Aplicación
para Facebook con PHP
    Ramiro Javier Chuquimia Ticona
              @ramir0ck
       ramiro@confianet.com
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”
Create New App
En la siguiente pantalla en la parte derecha hacemos
un click en el Botón “Crear Nueva Aplicación”
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”
Create New App
Rellenamos el Captcha para poder continuar, y
hacemos click en el boton “Aceptar”
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
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
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”
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.
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”
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
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
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”
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
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”
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
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
Aplicación de Facebook
Aplicación de Facebook
Probando la Aplicación desde el url de nuestro servidor

http://www.dobleclick.biz/www/appsfb/php0/
Aplicación de Facebook
Probando el Canvas Page
Iframe a nuestra aplicación, que se visualiza dentro de Facebook

http://apps.facebook.com/phpcero
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
Aplicación de Facebook
Configuración de Auth Dialog
Aplicación de Facebook
Una vez que iniciamos Sesion en Facebook, nos mostrará la
siguiente ventana, con los datos del usuario activo
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
Aplicación de Facebook

El resultado final de mostrar sólo los datos del usuario que
necesitamos,
Pueden descargar el ejemplo de:

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




Ramiro Javier Chuquimia Ticona
          @ramir0ck
   ramiro@confianet.com

Desarrollo de aplicacion facebook con php - Basico

  • 1.
    Desarrollo de Aplicación paraFacebook con PHP Ramiro Javier Chuquimia Ticona @ramir0ck [email protected]
  • 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 Enla siguiente pantalla en la parte derecha hacemos un click en el Botón “Crear Nueva Aplicación”
  • 4.
    Create New App Enla 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 Rellenamosel Captcha para poder continuar, y hacemos click en el boton “Aceptar”
  • 6.
    Configuración Básica dela 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 dela 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 dela 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 dela 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 Paradescargar 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 Enla 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 Enla 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 Enla 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 Enla 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 Delos 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 Empezamosel 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 Llamamosal 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.
  • 19.
    Aplicación de Facebook Probandola Aplicación desde el url de nuestro servidor http://www.dobleclick.biz/www/appsfb/php0/
  • 20.
    Aplicación de Facebook Probandoel Canvas Page Iframe a nuestra aplicación, que se visualiza dentro de Facebook http://apps.facebook.com/phpcero
  • 21.
    Aplicación de Facebook Alhacer 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.
  • 23.
    Aplicación de Facebook Unavez que iniciamos Sesion en Facebook, nos mostrará la siguiente ventana, con los datos del usuario activo
  • 24.
    Aplicación de Facebook Enlugar 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 Elresultado final de mostrar sólo los datos del usuario que necesitamos,
  • 26.
    Pueden descargar elejemplo de: https://www.box.com/s/9c420ae78dba7ffca133 Ramiro Javier Chuquimia Ticona @ramir0ck [email protected]