Jugando con el API de Facebook (JavaScript)

   Hace algún tiempo que publique como "Jugar con el API de Twitter en PHP", bien, ahora le toca el turno a Facebook, y que mejor forma de hacer que utilizando el lenguaje preferido de muchos (al menos del mío), JavaScript.

   Lo primero es crear el APP en Facebook, una vez hecho esto debemos poseer en nuestro servidor una certificado SSL, hay muchas formas de obtenerlo, sin embargo si solo vamos a desarrollar apps, no es necesario hacer el gasto puesto que podemos crear un certificado localmente firmado, para ello hay mucha info en la web.

   Una vez tengamos nuestra APP creada en facebook, vamos a tomar nota de su ID, es lo que nos interesa, ahora creamos un esquema típico HTML:

<!DOCTYPE html>
<html>
 <head>
  <title>Carlitox en la Web</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 </head>
 <body>
  <div id="response"></div>
 </body>
</html>

   Luego le agregamos el script de conexión del facebook junto con su "root" luego del body, nos guiamos por la documentación que nos ofrece facebook:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

   Ahora que tenemos todo listo, de ahora en adelante todo el código adicional debemos colocarlo antes de la carga del script... Vamos a comenzar con lo básico, verificar que el usuario se ha logeado al facebook, para ello el mismo API nos ofrece sus métodos, vamos a modificarlo un poco:

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
 var uid = response.authResponse.userID;
 var accessToken = response.authResponse.accessToken;
 FB.api('/me', function(response) {
   $("#response").html("Bienvenido "+ response.name +", has iniciado sesión en facebook");
 });
  } else if (response.status === 'not_authorized') {
 $("#response").html("Existe una sesión abierta pero no ha aceptado el APP");
 FB.login(function(response) {
  // Aqui solicitamos los permisos al usuario para utilizar el app con su cuanta
 }, {scope: 'publish_stream'});
  } else {
 $("#response").html("No hay sesión iniciada en facebook");
  }
});

   Ahora vamos a explicar con detalle esto, lo primero es el "response.status", este puede contener 3 valores que son devueltos por el API, los cuales son connectednot_authorized y unknow, es muy importante reconocer para que sirven cada uno de ellos:

   connected: el usuario acepto utilizar el app y esta conectado.
   not_authorized: el usuario esta conectado pero no ha aceptado el uso del app.
   unknow: el usuario no se ha conectado o hay problemas en la conexión.

   Sabiendo esto, mostramos los mensajes según la respuesta que obtengamos del API, si el estado es connected entonces procedemos a obtener el nombre de usuario, para ello utilizamos el método FB.api (hace llamadas al Graph API), con la llamada a "/me", la cual toma como valor el usuario que ha iniciado sesión, esto nos arroja los siguientes valores: JSON Graph API Explorer

   Esto lo tratamos como cualquier JSON o Array, ahora bien, si el usuario no ha aceptado el APP entonces llamamos al método FB.login para que en su sesión se le soliciten los permisos que hemos fijado, estos permisos los podemos ver en el siguiente enlace: permisos del facebook.

   Ahora que hemos explicado todo, vamos a extendernos un poco, como vemos, en el inicio de sesión solicitamos el permiso para publicar en el muro, para ello utilizamos el método FB.ui, y hacemos la llamada a "post", entonces colocamos esto luego de haber validado la sesión:

FB.ui(
  {
 method: 'feed',
 name: 'Carlitox en la Web',
 link: 'http://carlitoxenlaweb.blogspot.com/',
 picture: 'http://3.bp.blogspot.com/-9qycD8KGtcM/Tm91F3oK3PI/AAAAAAAABIc/zuhHN_S_KuM/s1600/Logo%2Bcarlitoxenlaweb.png',
 caption: 'Probando el API en JavaScript',
 description: 'Esto es una prueba utilizando el API de JavaScript.'
  },
  function(response) {
 if (response && response.post_id) {
   // El usuario publico en el muro
 } else {
   // El usuario cancelo y no publico nada
 }
  }
);

   Como vemos, solo es cuestión de rellenar los campos, luego de la llamada tenemos la función de retorno o callback que nos devuelve el estado del dialogo, si es cancelado y si fue publicado.... Por ejemplo, de esta forma sabremos si el usuario publico en su muro utilizando nuestra APP. Aquí el ejemplo completo

<!DOCTYPE html>
<html>
 <head>
  <title>Carlitox en la Web</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 </head>
 <body>
  <div id="fb-root"></div>
  <script type="text/javascript">
   $(document).ready(function() {
     window.fbAsyncInit = function() {
    FB.init({
      appId      : 'APP_ID',                             // Reemplazar el APP ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html',
      status     : true,
      xfbml      : true
    });

    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
     var uid = response.authResponse.userID;
     var accessToken = response.authResponse.accessToken;
     FB.ui(
       {
      method: 'feed',
      name: 'Carlitox en la Web',
      link: 'http://carlitoxenlaweb.blogspot.com/',
      picture: 'http://3.bp.blogspot.com/-9qycD8KGtcM/Tm91F3oK3PI/AAAAAAAABIc/zuhHN_S_KuM/s1600/Logo%2Bcarlitoxenlaweb.png',
      caption: 'Probando el API en JavaScript',
      description: 'Esto es una prueba utilizando el API de JavaScript.'
       },
       function(response) {
      if (response && response.post_id) {
        // El usuario publico en el muro
      } else {
        // El usuario cancelo y no publico nada
      }
       }
     );
     FB.api('/me', function(response) {
       $("#response").html("Bienvenido "+ response.name +", has iniciado sesión en facebook");
     });
      } else if (response.status === 'not_authorized') {
     $("#response").html("Existe una sesión abierta pero no ha aceptado el APP");
     FB.login(function(response) {
      // Aqui solicitamos los permisos al usuario para utilizar el app con su cuanta
     }, {scope: 'publish_stream'});
      } else {
     $("#response").html("No hay sesión iniciada en facebook");
      }
     });
     };

     (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
   });
  </script>
  <div id="response"></div>
 </body>
</html>

1 Comentarios:

Escribir Comentario
Anónimo
AUTOR
23 de junio de 2014, 18:47 delete

Muy buena información...

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon