Usar JSON para leer Facebook (Parte 2)

JMiur

En un artículo anterior se mostraba como leer los feeds de un Perfil o Page de Facebook siempre que estos fueran públicos; allí se filtraban algunos tipos de publicaciones y luego se procedía a crear una página con el contenido. Ese mismo método nos permite mostrar cualquier cosa o un solo tipo de publicación.

Por ejemplo, supongamos que sólo quisiéramos mostrar las imágenes, podríamos crear un script que leyera la última publicada para mostrarla en la sidebar como si fuera un gadget.

C A R G A N D O

Agrego mi función antes de </head>:

<script type="text/javascript">
//<![CDATA[

function leerpicsfacebook(json) {

  // aquí voy a iniciar algunas variables
  var data, tipo, link, source, picture, from, extra;
  var salida = "";
  var extra = "";

  // 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; }

    tipo = data.type; // es dato nos indica qué tipo de publicación es (busco que sea photo)

    // 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";}

    // si es una Foto, voy a leer los datos
    if(tipo=="photo") {
      picture = data.picture; // esto contiene la dirección URL de la miniatura
      link = data.link; // esto contiene la dirección URL a la imagen real que puede estar en Facebook o bien ser un enlace externo
      // voy armando mi código HTML para mostrarla
      post += "<a target='_blank' title='" + message + "' href='" + link + "><img src='" + pic + "'/></a>";
      // si la foto está en Facebook sólo podrá verse si uno está logueado
      if(link.indexOf("www.facebook.com")>0) {
        // le agregaré un texto debajo para indicarlo
        extra = "<span>VIA FACEBOOK</span>"
      }
      // creo el código HTML de mi gadget
      salida += "<div class="fbpic">";
      salida += post + extra;
      salida += "</div>";
      // y termino porque sólo quiero mostrar una, la última publicada
      break;
    }
  }

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

</script>

Como en el caso anterior, en un elemento HTML de la sidebar pongo el DIV donde se mostrará la imagen, el estilo y la llamada a la función:

<style>
  .fbpic {
    background-color: #BBB;
    border: 2px solid #FFF;
    display: table-cell;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    width: 150px;
  }
  .fbpic img {
    max-height: 120px;
    max-width: 130px;
  }
  .fbpic span {
    color:#000;
    display:block;
    font-size:11px;
    text-align:center;
  }
</style>

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

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

donde mi_nombre es el nombre (o número) de nuestro Perfil o Page y limit es la cantidad de datos que leeremos ya que si bien vamos a mostrar una sola, debemos leer varios apra asegurarnos que haya alguna.

Lo mismo puedo hacer con los videos, por jemplo, aquí, mostraría los últimos tres publicados:

C A R G A N D O

<script type="text/javascript">
//<![CDATA[

function leervidsfacebook(json) {
  var data, tipo, link, source, picture, from;
  var salida = "";
  var contarsalidas = 0; 
  for (var i = 0; i < json.data.length; i++) {
    var post = "";
    data = json.data[i];
    if (i==json.data.length) { break; }
    tipo = data.type;
    from = data.from.name;
    if(from!="mi_nombre") {tipo="dummy";}
    if(tipo=="video" {
      source = data.source
      link = data.link
      picture = data.picture
      post += "<a target='_blank' href='" + source + "'><img src='" + picture + "'/></a>";
      salida += "<div class='fbvid'>";
      salida += post;
      salida += "</div>";
      contarsalidas ++;
      if(contarsalidas==3) { break; }
    }
  }
  document.getElementById("vidfacebook").innerHTML = salida;
}

//]]>

</script>

<style>
  .fbvid {
    margin: 5px 0;
  }
  .fbvid img {
    background-color: #FFF;
    height: 97px;
    padding: 2px;
    width: 130px;
  }
</style>
<div id='vidfacebook'> C A R G A N D O </div>
<script src="http://graph.facebook.com/mi_nombre/feed?limit=20&amp;callback=leervidsfacebook"></script>

Tanto en este caso como en los ejemplos previos, la cantidad de datos que pueden leerse son muchos y siempre se utiliza la misma sintaxis, se define una variable para guardarlos y luego, se agrega un punto con el nombre del dato; si a la variable la llamase leer, estos son algunos a los que puede accederse:

leer.id es el número indicativo de la publicación
leer.from.name es el nombre del Perfil o Page
leer.from.id es el ID del Perfil o Page
leer.icon es la imagen del ícono distintivo del tipo de publicación
leer.type indica el tipo de publicación
leer.created_time y leer.updated_time son las fechas de creación

leer.picture es la imagen miniatura
leer.source es la fuente (de un video o swf por ejemplo)
leer.name es el título del video o del enlace
leer.caption es el nombre del servicio que provee el video
leer.description es el texto secundario del video o del enlace
leer.application indica la aplicación que lo agrega (si es que hay una)
leer.properties.name, leer.properties.text y leer.properties.href son las referencias al sitio original de un enlace

leer.likes.count es la cantidad de MeGusta que posee esa publicación
leer.likes.data[i].name es la lista de usuarios que lo han marcado con Me Gusta

leer.comments.count es la cantidad de comentarios que tiene una publicación
leer.comments.data[i].from.name es el nombre de los comentaristas
leer.comments.data[i].message es el comentario en si mismo
leer.comments.data[i].created_time es la fecha del comentario

Además, hay dos datos extars que nos permitirían seguir leyendo más datos:

leer.paging.previous es el enlace que deberíamos utilizar para leer las 25 publicaciones anteriores (si es que hay) por ejemplo:
     http://graph.facebook.com/mi_nombre/feed?limit=25&since=2011-01-17T04%3A31%3A59%2B0000

leer.paging.next es el enlace que deberíamos utilizar para leer las 25 publicaciones siguentes (si es que hay) por ejemplo:
     http://graph.facebook.com/mi_nombre/feed?limit=25&until=2011-01-14T08%3A23%3A38%2B0000