JMiur [E]

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>,

6 comentarios:

Emilio Cobos Álvarez  

Una idea para sacar la imagen con un regex (no sé si será mejor o no, pero aquí está):
function extraer_imagen(s){
var reg = /<img\s[^\/>]*src=('|")(\S*)(\1)/
if( reg.test(s) )return s.match(reg)[2];
else return "";
}

Explicación del regEx: Buscamos una etiqueta "<img" sequida de un espacio, y seguida de un número cualquiera de caracteres que no sean ni una barra "/" ni el cierre ">". Tras esos caractereres buscamos su "src=" seguida de una doble comilla o una simple. después buscamos un número indeterminado de caracteres que no sean un espacio (la imagen en sí) y la comilla simple o doble que encontramos antes. Si se quiere asegurarse por si la etiqueta no está en mayúsculas podrías agregar la flag "i" después de la última / del regEx

JMiur  

Me gusta. No entiendo nada de regEx pero funciona. Es un tema que me ha sdio negado para esta vida, quizá en otra, logre entenderlo pero ... lo dudo.

Por ahora, simplemente le hago caso, Don Emilio y listo :D

Emilio Cobos Álvarez  

No me trates de usted por favor ;)
PD: donde sale el icono del guiño debería ir un corchete cerrando el abierto

JMiur  

Es que ese emoticón generaba problemas cuando se escribía código así que fue eliminado y sólo está habilitado si se agrega la naricita ;-)

Responder
VacilandoUnRap  

Hola, una consulta, este "gadget" ya es aplicable?, esta funcionando, tengo una idea en mente y quisiera ver si funciona, en que parte se modifica para ver de donde se extraerán las imágenes del fanpage, espero la respuesta, saludos maestro.

JMiur  

EL ejemplo real es el que está funcionando en el post y el código es el que se muestra ahí. Simplemente, se lee el feed y se extraen los datos.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR