Publi

Creando una aplicación para Facebook (paso a paso)

monitor_poesia

He decidido hacer esta guía porque Facebook anda cambiando los métodos para hacer aplicaciones y varias partes de su API. Los chicos de Facebook no paran de meter y sacar cosas y no dejan la página quieta. Después de hacer varias guías para “publicar definitivamente” en Facebook, van y cambian la forma de hacerlo.

Aunque parece que se han estabilizado, todos estos cambios han sido para llegar a la Graph API, se ha quedado bien hecha y estable, y yo creo que es posible aprender mucho de ella.

Aunque en esta guía empezaré desde el principio, desde que se crea la aplicación, paso a paso, ya que actualmente crear una aplicación vale para muchas cosas, no sólo para algo que resida dentro de Facebook sino para webs o clientes que funcionan fuera de Facebook e interactúan con la red social.

He de decir también que esta guía está hecha en Enero de 2012, por lo que si entras aquí en el futuro, puede que hayan hecho otro cambios definitivo más en Facebook.

Primer paso: Crear la App

Para ello debemos dirigirnos a https://developers.facebook.com/apps. Éste será nuestro centro de control de aplicaciones, donde podremos ver y editar los datos de éstas. Allí encontraremos en la parte superior de la página:

facebook_create_app

Pulsamos sobre Create New App, tras ello veremos un diálogo como este:

facebook_create_app_dialogEn el que en:

  • App Display Name debemos decir el nombre de nuestra aplicación, o si es una aplicación para identificarnos en una página, el nombre de la página. Es un nombre que la identifique.
  • App Namespace es el nombre que tiene nuestra aplicación en la URL de aplicaciones de Facebook. Es decir https://apps.facebook.com/AppNamespace . Dependiendo del ámbito de nuestra aplicación (si es accesible a través de Facebook.com o no) rellenaremos este campo o no.

Si continuamos, a veces la web de Facebook dará un error (comprobado el 7 de Enero de 2012), por lo que podemos volver a la página de las aplicaciones y continuar.

En la configuración de la aplicación, le damos a Edit Settings, y saldrá una pantalla así:

facebook_app_basica

Aquí podremos rellenar el Namespace (mencionado antes), el mail de contacto y el dominio donde está alojada la aplicación (muy importante, ya que si la aplicación no está en el dominio indicado, no funcionará; además de la categoría de nuestra aplicación.

Por otra parte, arriba vemos la App ID y la App Secret. La primera es el identificador de nuestra aplicación, y la segunda una clave secreta que no se debe compartir con nadie para que la aplicación pueda interactuar con Facebook, algo así como el nombre de usuario y contraseña de nuestra aplicación. (Yo lo he puesto aquí, pero en realidad lo he regenerado varias veces).

La aplicación que crearemos servirá para enlazar una página web con Facebook y poder utilizar esa información, para eso debemos rellenar el apartado App Domain (por ejemplo minutodecaos.com), con el dominio donde estén alojadas las páginas de la aplicación, si no, la aplicación no estará autorizada y, un poco más abajo Site URL con la dirección exacta donde estará alojada nuestra aplicación.

fb_website

Código fuente de la App

Es hora de crear nuestra aplicación en PHP. Lo primero que tenemos que hacer es descargarnos los archivos de la API desde esta dirección, dentro de GitHub. En principio trabajaremos en la web en modo local, por lo que creamos un directorio en nuestro disco duro (proyectos/facebook/tests/ dentro de mi home) Y descomprimimos los archivos dentro del directorio de nuestro proyecto. Aunque no es estrictamente necesario, yo lo he descomprimido dentro de lib/facebook, por lo que esos archivos estarán en $HOME/proyectos/facebook/tests/lib/facebook; y creamos el siguiente index.php (que luego subiremos al servidor junto con los ficheros de biblioteca de Facebook) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php

$api_key = 'xxxxxxxxxx';
$api_sec = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

require_once('lib/facebook/facebook.php');

$facebook = new Facebook(array(  
                   'appId'  => $api_key,
                   'secret' => $api_sec,
                   'cookie' => true ,
                 ));

$sesion = $facebook->getUser();
if ($sesion)
  {
    echo "Estamos identificados en Facebook<br/>";
  }
 else
  {
    echo "No estamos identificados en Facebook ";
    $login_url = $facebook->getLoginUrl();
    echo '<a href="'.$login_url.'">Click para identificarte</a>';
  }

?>

Este código nos mostrará, la primera vez que entremos: “No estamos identificados en Facebook. Click aquí para identificarte”, eso no significa que no hayamos entrado a la página de Facebook, significa que la página web no te ha identificado como usuario y de ser autorizada, por eso hacemos click en la pantalla anterior y aparecerá lo siguiente:
fb_website1

Login automático

Si no queremos mostrar el enlace para identificarnos en la aplicación, podemos utilizar el siguiente código:

1
2
3
4
5
6
7
8
if ($sesion)
   echo "Estamos identificados en Facebook";
else
{
   $login_url = $facebook->getLoginUrl();
   header('Location: '.$login_url);
   die();
}

Mostrando datos de usuario, o cogiéndolos

En la parte de “Estamos identificados en Facebook”, podemos hacer:

1
2
3
4
5
6
7
if ($sesion)
{
   echo "Estamos identificados en Facebook<br/>";
   echo "Usuario: ".$sesion."<br/>";
   $userData = $facebook->api('/me');
   echo nl2br(print_r($userData, true));
}

Con estas líneas podemos ver información del usuario que está actualmente identificado en nuestra aplicación, y podremos utilizar los datos del array $userData:

  • [‘name’] – Nombre completo del usuario
  • [‘first_name’] – Nombre
  • [‘last_name’] – Apellidos
  • [‘link’] – Enlace a la página del usuario en Facebook
  • [‘username’] – Nombre de usuario de Facebook
  • [‘about’] – Frase personal
  • [‘gender’] – Género
  • y mucho más que podemos ver cuando ejecutamos el ejemplo anterior

Ahora en Facebook, siempre que queramos acceder a información tanto de páginas, grupos, usuarios, etc, sólo tenemos que acceder a través de la llamada a api(‘/localizacion’), con la palabra especial /me, como hemos visto para el usuario actual. Esto nos puede ayudar a identificarnos en nuestra web, sin pedir usuario, ni contraseña, a través de la Graph Api.

También podría interesarte...

There are 17 comments left Ir a comentario

  1. Pingback: Bitacoras.com /

  2. Pingback: BlogESfera.com /

  3. Pingback: Poesía binaria » Escribiendo en muros desde nuestra aplicación de Facebook /

  4. Arekuzu /
    Usando Google Chrome Google Chrome 13.0.782.215 en Windows Windows XP

    Consulta: Que ocurre cuando pide URl segura?, use el mismo codigo de su ejemplo y para URL segura use un interprete: https://secure.social-server.com/facebook/ (te logueas, creas el perfil y te otorga una credencial para redireccionar a tu URL que pusiste previamente en el caso que montes la app en un servidor publico) Sin embargo me sigue apareciendo: FBML Error (line 8): illegal tag “body” under “fb:canvas”
    Igual Felicitaciones, esta muy explicativo el tutorial!!
    Saludos

  5. Gaspar Fernández / Post Author
    Usando Mozilla Firefox Mozilla Firefox 8.0 en Ubuntu Linux Ubuntu Linux

    @Arekuzu
    Bien, te refieres a la integración de una aplicación dentro de Facebook¿? De todas formas, el FBML está prohibido, mejor utiliza el código dentro de un Iframe, creo que esa es una de las opciones que ellos te dan. Si la aplicación la creaste hace tiempo tal vez te siga saliendo.

    Saludos

  6. Pingback: Poesía binaria » Publicando mensajes en Facebook sin que el usuario esté ahora mismo en la web [ modo offline ] /

  7. Pingback: Poesía binaria » Publicando en Facebook como página para mantener a nuestros fans /

  8. ame /
    Usando Mozilla Firefox Mozilla Firefox 14.0.1 en Windows Windows XP

    hola, necesito hacer una aplicacion en la que se suban fotos y luego se puedan guardar en el album de perfil o en la portada…*** AYUDA !!!!!!!!! ***

    1. Gaspar Fernández / Post Author
      Usando Mozilla Firefox Mozilla Firefox 13.0.1 en Ubuntu Linux Ubuntu Linux

      Espero poder escribir algo así pronto, aunque tengo muchos artículos en el tintero ya, pero me lo apunto, es algo que quiero hacer desde hace tiempo. Hace un par de años hice una aplicación parecida pero tras actualizaciones de la API de Facebook dejó de funcionar.

  9. cmarfil /
    Usando Google Chrome Google Chrome 22.0.1229.94 en Windows Windows XP

    Geniales todos los articulos que tienes about api facebook!

    Estoy revisando a la vez los artículos que tienes sobre publicar en el muro y publicar en el muro con user offline.

    Me surge una duda; Si necesito a través de la misma web usar facebook para el login/registro y además quiero poder compartir en el muro del usuario y acceder a su lista de contactos.
    ¿Necesito varias aplicaciones de facebook?
    Lo comento porque ahora cuando creas la aplicación abajo hay una serie de opciones y una es: Website with Facebook Login
    Si le das desplega un campo y te obliga a poner una URL de retorno y solo una.

    La idea era pedir permisos de escritura en el muro, acceso a la lista de contactos y offline_access cuando un usuario se registra a través de facebook, de esta manera guardas el id y ya tienes permiso para todo, pero si tengo que indicar una misma url de callback para todo es imposible.

    Gracias, un saludo.

    1. admin / Post Author
      Usando Mozilla Firefox Mozilla Firefox 16.0 en Ubuntu Linux Ubuntu Linux

      Yo creo que no hace falta, sólo con una aplicación vale. De todas formas, tengo que probarlo, y dentro de poco tiempo tengo que hacer un proyecto parecido por lo que lo más seguro que publique algo cuando lo termine.

      Muchas gracias por tu comentario

  10. cmarfil /
    Usando Google Chrome Google Chrome 22.0.1229.94 en Windows Windows XP

    @admin

    Ok, estaré a la expectativa!
    De todas formas parece que offline_access ya esta deprecated.. ya mismo para buscar documentación de la api de facebook en google tendremos que limitar la búsqueda a 2 días atrás…

    https://developers.facebook.com/roadmap/offline-access-removal/

    Un saludo.

    1. admin / Post Author
      Usando Mozilla Firefox Mozilla Firefox 16.0 en Ubuntu Linux Ubuntu Linux

      Lo vi hace tiempo, según parece, ahora podemos tocar el tiempo de expiración del token y lo podemos alargar. Aunque de vez en cuando se pierde, lo estoy experimentando desde hace tiempo con algunas de mis apps, cuando pasa un tiempo, los usuarios tienen que entrar para renovar el token, a ver si puedo solucionar el problema un día de estos.

      Gracias por tu aporte!

  11. Hernan Nieto /
    Usando Mozilla Firefox Mozilla Firefox 15.0.1 en Windows Windows 7

    Hola, muy claro tu series de articulos. Hago la siquiente consulta, hize una aplicacion q publica en mi muro un msje, pero lo veo solo yo, ninguno de mis amigos o contactos lo ve, es posible realizar esto? mi idea es mostrar mensaje de forma automatica en el muro del usuario y q sea visto por todos sus contactos. Gracias

    1. admin / Post Author
      Usando Mozilla Firefox Mozilla Firefox 16.0 en Ubuntu Linux Ubuntu Linux

      En este caso, yo creo que es problema de la privacidad de tu usuario dentro de Facebook. No debe haber problemas de visualización siguiendo el artículo. A priori.

  12. monica /
    Usando Internet Explorer Internet Explorer 10.0 en Windows Windows 7

    hola a todos,
    he tratado de colocar en apps domain, todas las combinaciones posibles y siempre da error! alguna idea?
    http://sociali.es/facebook
    http://sociali.es/facebook/
    http://www.sociali.es/facebook
    http://www.sociali.es/facebook/
    http://www.sociali.es
    http://www.sociali.es/facebook
    …. me doy 🙁

    1. admin / Post Author
      Usando Mozilla Firefox Mozilla Firefox 24.0 en Ubuntu Linux Ubuntu Linux

      ¿ Qué error te da ?

Leave a Reply