Usar JSON para leer Facebook (Parte 1)

JMiur

También Facebook es accesible via JSON aunque, en este caso, la configuración de privacidad debe ser establecida para que sean públicas y si bien no podemos tener acceso a todo, los feeds pueden ser leidos del mismo modo que todos los vistos anteriormente, utilizando esta dirección:

http://graph.facebook.com/nombre_usuario/feed

Esto es válido tanto para un Perfil como para una Page y los datos devueltos en ambos casos son similares así que podemos proceder igual que para cualquier otra dirección, agregando los párámetros de limit para establecer la cantidad de datos a leer y callback para ejecutar una función que los interprete. Estos datos, son diversos y lo mejor para entenderlos, es con un ejemplo.

Voy a agregar una función antes de </head>:

<script type="text/javascript">
//<![CDATA[
function leerallfacebook(json) {

  // aquí voy a iniciar algunas variables
  var data, fecha, tipo, link, message, source, link, picture, likes, from;
  var salida = "";
  var contarsalidas = 0;
  
  // como en todos los otros ejemplos, se ejecuta un bucle que lee una cierta cantidad de entradas
  for (var i = 0; i < json.data.length; i++) {
    var post = "";

    // guardo los datos de cada entrada en un array llamado data
    data = json.data[i];
    // si no hay nada, termino porque significa que hay menos de las que solicité leer
    if (i==json.data.length) { break; }

    fecha = data.created_time; // esta es la fecha de publicación
    icon = data.icon; // este es el ícono que depende del tipo de publicación
    tipo = data.type; // este dato nos indica qué tipo de publicación es

    // esto nos dice la cantidad de "Me Gusta" que tiene
    likes = 0;
    if(data.likes) {likes = data.likes.count;}

    // este dato, indica quién lo publicó
    from = data.from.name;
    // como sólo quiero ver las mias, si no lo son, las ignoraré
    if(from!="mi_nombre") {tipo="dummy";}

    // y ahora, según el tipo de publicación, leo los datos
    switch(tipo) {

    case "photo": // es del tipo Foto
      picture = data.picture; // esto contiene la dirección URL de la miniatura
      link = data.link; // esto contiene la dirección URL a la imagen
      message = data.message; // esto contiene el texto que le hayamos agregado
      // voy armando mi código HTML para mostrarla
      post += "<a target='_blank' href='" + link + "'><img src='" + picture + "'/></a>";
      break;

    case "video": // es del tipo Video
      picture = data.picture; // esto contiene la dirección URL de la miniatura
      link = data.link; // esto contiene la dirección URL del video
                             // por ejemplo: http://www.youtube.com/watch?v=XXXXXXXXXXX
      source = data.source;  // esto contiene la dirección URL que usamos para insertarlo en una web
                                       // por ejemplo: http://www.youtube.com/v/XXXXXXXXXXX&autoplay=1
      // voy a usar una ventana modal para mostrar esos videos pero puede usarse cualquier otro método
      // dependiendo del servicio, uso diferentes tamaños
      if(source.indexOf("www.youtube.com")>0) {
        post += "<a class='lightwindow' params='lightwindow_width=640,lightwindow_height=390,lightwindow_loading_animation=true' title='' rel='' href='" + source + "'><img src='" + picture + "'/></a>";
      } else if(source.indexOf("vimeo.com")>0) {
        post += "<a class='lightwindow' params='lightwindow_width=560,lightwindow_height=312,lightwindow_loading_animation=true' title='' rel='' href='" + source + "'><img src='" + picture + "'/></a>";
      } else {
        // cualquier otro es mostrado como un enlace
        post += "<a href='" + link + "'><img src='" + picture + "'/></a>";
      }
      break

    case "link": // es del tipo Enlace
      picture = data.picture; // esto contiene la dirección URL de la miniatura
      link = data.link;  // esto contiene la dirección URL del enlace
      // voy armando mi código HTML para mostrarlo
      post += "<a target='_blank' href='" + link + "'><img src='" + picture + "'/></a>";
      break

    default: // cualquier otro no lo voy a mostrar en este ejemplo
      // hay varios; puede ser "swf", "music", "status", etc
      break
    }

    // ahora, verifico que la publicación sea una del tipo que quiero mostrar
    if(post!="") {
      // si es así, coloco los datos en un código HTML
      salida += "<div class='fbpost'>";
      salida += post;
      salida += "<img class='icon' src='" + icon + "' />";
      salida += "<span class='like'>" + likes + "</span>";
      salida += "</div>";
      // y voy contando hasta completar la cantidad que quiero mostrar
      contarsalidas ++;
      if(contarsalidas==24) { break; }
    }
  }

  // terminado el bucle, escribiré los datos en un DIV al que le pondre un ID especifico
  document.getElementById("resultados").innerHTML = salida;
}
//]]>

</script>

¿Que faltaría para que funcionara? Agregar un DIV en alguna parte, allí donde quisiéramos que se nuestre e inmediatamente después, llamar a la función:

<div id='resultados'> C A R G A N D O </div>

<script src="http://graph.facebook.com/mi_nombre/feed?limit=20&amp;callback=leerallfacebook"></script>

donde mi_nombre es el nombre (o número) de nuestro Perfil o Page y limit es la cantidad de datos que leeremos.

Si usamos CSS, podemos crear cualquier tipo de página:

<style>
  .fbpost {
    background-color: #444;
    border: 1px solid #666;
    display: block;
    float:left;
    height: 160px;
    margin: 2px;
    padding: 10px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 160px;
  }
  .like {
    background: transparent url(URL_imagenlike) no-repeat left 50%;
    bottom: 10px;
    color: #9FAECC;
    display: block;
    font-size: 18px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 50px;
  }
  .icon {
    bottom: 10px;
    display: block;
    position: absolute;
    left: 10px;
  }
</style>

El resultado de todo este delirio es lo que puede verse en este ejemplo online: