Crear un gadget de Facebook usando Json (3)

Voy a insistir en que la forma de mostrar los datos que leemos de un feed usando Json es subjetiva y podemos hacer casi cualquier cosa, sólo hay que saber cuáles son y aprender la forma de manipularlos, armando la salida de modo personal (más información: 1, 2)

En este último ejemplo, vamos a tratar de diferenciar el contenido y mostrarlo de distinto ¿Qué contenido? Por ejemplo trataremos a las imágenes que subimos a Facebook de modo diferenciado, mostrándolas más grandes o con un formato especial ¿Cómo podríamos hacer esto? leyendo el HTML y verificando la dirección URL de esas imágenes; una posibilidad:

var externo = elHtml.indexOf("safe_image.php");

La variable externo tendrá un valor mayor o igual a cero si dentro del contenido se encuentra ese texto que indica que la imagen no la hemos subido nosotros sino que es externa, ya sea porque lo que compartimos es un enlace o un video así que, si se trata de ese tipo de entradas, armaré un DIV de un tipo; por el contrario, si no se encuentra ese texto y hay una imagen, esa imagen la hemos subido nosotros y la URL es algo así:

https://fbcdn-photos-a.akamaihd.net/......./xxxxxxx_s.jpg

Donde el _s final indica que el tamaño de la imagen es pequeño (small) y es el dato que contiene el feed; mide 130 pixeles de ancho; si cambio _s por _n vería la imagen original con su tamaño normal, lo mismo si pasaría si usara _b..

Podría usar esas pero son muy grandes así que elegiré una intermedia y cambiare _s por _a que me dará una imagen de 180 pixeles de ancho.

¿Cómo haría eso? Por ejemplo, de este modo:

laImagen = laImagen.replace("_s.jpg","_a.jpg")

No son las únicas alternativas; _t es una miniatura de 75 pixeles, _o nos devuelve una imagen de 540 pixeles y _q o _x también tienen 180 pixeles ¿Por qué? No sé. Habrá que preguntarles a ellos.

Ahora que tengo todos los pedazos y un lio bárbaro en al cabeza, me dedico a armar la función y ver qué sale:

<,script type='text/javascript'>,
//<,![CDATA[

function extraer_imagen(htmltag) {
  var s, a, b, c, d;
  var imagen = "";
  s = htmltag;
  a = s.indexOf("<img");
  b = s.indexOf("src=\"",a);
  c = s.indexOf("\"",b+5);
  d = s.substr(b+5,c-b-5);
  if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
    imagen = d;
  }
  return imagen;
}

function feedFacebook(json) {
  var entry, mensaje, enlace, elResumen, elHtml, externo, laImagen;
  var salida = "";
  for (var i = 0; i < json.responseData.feed.entries.length; i++) {
    entry = json.responseData.feed.entries[i];

    // los datos del feed
    mensaje = entry.title;
    enlace = entry.link;
    elResumen = entry.contentSnippet;
    elHtml = entry.content;

    // los datos que verifico
    externo = elHtml.indexOf("safe_image.php");
    laImagen = extraer_imagen(elHtml);

    // y voy armando la salida
    salida += "<div class='cadaitem'>";

    if(externo!=-1) {

      // enlaces
      salida += "<div class='titulo'><a href='" + enlace + "' target='_blank' >" + mensaje + "</a></div>";
      salida += "<div class='contenido enlace'>";
      salida += "<img src='" + laImagen + "'/>";
      salida += "<p>" + elResumen + "</p>";
      salida += "</div>";
      salida += "<div class='clear'></div>";

    } else {

      // imágenes
      salida += "<div class='contenido imagen'>";
      if(laImagen) {
        laImagen = laImagen.replace("_s.jpg","_a.jpg");
        salida += "<a href='" + enlace + "' target='_blank'><img src='" + laImagen + "'/></a>";
        if(mensaje) { salida += "<span>" + mensaje + "</span>"; }
        if(elResumen) { salida += "<span>" + elResumen + "</span>"; }                

      }
      salida += "</div>";

    }
    salida += "</div>";

  }
  document.getElementById('divFACEpage').innerHTML=salida;
}

//]]>,
<,/script>,

El resto es un poco de CSS:

<,style>,
  #divFACEpage {
    margin: 0 auto;
    width: 250px;
  }
  .cadaitem {
    background-color: #FFF;
    font-family: Tahoma;
    font-size: 13px;
    margin-bottom: 5px;
  }
  .cadaitem .clear {
    clear:both;
    padding:10px;
  }
  .cadaitem .contenido.enlace {
    width:250px;
  }
  .cadaitem .titulo {
    overflow: hidden;
    padding: 10px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }
  .cadaitem .titulo a {
    color:DeepSkyBlue;
    font-weight:bold;
  }
  .cadaitem .contenido.enlace img {
    float: left;
    max-width: 100px;
    padding: 0 10px;
  }
  .cadaitem .contenido.enlace p {
    color: #666;
    float: right;
    font-size: 11px;
    overflow: hidden;
    padding-right: 10px;
    width: 120px;
    word-wrap: break-word;
  }
   .cadaitem .contenido.imagen {
    position:relative;
  }
  .cadaitem .contenido.imagen img {
    display: block;
    margin: 0 auto;
    padding: 20px 0;
  }
  .cadaitem .contenido.imagen:hover span {
    display: block;
  }
  .cadaitem .contenido.imagen span {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: #FFF;
    display: none;
    font-size: 11px;
    margin: 0 20px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top:30%;
    width: 200px;
}
<,/style>,