Crear un gadget de Facebook usando Json (2)

En la primera parte hablaba de crear un gadget a partir de los datos de un feed de Facebook pero ¿cómo se diseña el gadget? Tal como se diseña un post, usando HTML y haciendo que sea la función el que escriba esos códigos. Para esto no hay un solo método, hay muchas formas; yo uso siempre el mismo, creo una variable de texto, voy "sumando" las distintas etiquetas y cuando termina el bucle, la "escribo" en el DIV.

El resto, es subjetivo; me imagino un gadget que colocaré en la sidebar así que será "angosto" y estaría más interesado en mostrar imágenes que en mostrar textos así que, para complicarme la vida, debería "detectar" esas imágenes y separarlas de los textos. Usaré sólo cuatro datos: entry.title, entry.link, entry.content y entry.contentSnippet; no me meteré con la fecha que requiere códigos más largos para formatearlas de manera "razonable" y quisiera mantener todo lo más simple posible para concentrarme en lo que realmente me parece importante aunque, como dije, todo esto es absolutamente subjetivo y esa es justamente lo verdaderamente interesante de Json, que con los mismos datos, podemos armar cosas completamente distintas.

¿Por que no pensar primero el modelo que quisiera que se viera escribiendo el HTML tal como haría en una entrada? Un ejemplo:

<div class='cadaitem'>
  <div class='titulo'>
    <a href='URL_entrada' target='_blank' > ... el texto del mensaje ... </a>
  </div>
  <div class='contenido'>
    <img src='URL_imagen'/>
    <p> ... aquí pondría el resumen ... <p>
  </div>
</div>

Bastaría establecer las reglas de estilo CSS para cada cosa u ordenarlas de cualquier otro modo y luego, usar eso en la función, agregando los datos correspondientes:

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

Pero ... me falta laImagen; debo "encontrarla" dentro del contenido (entry.content) y para eso, usaré una función extra que es la misma que usamos en Blogger para detectar al primera imagen de las entradas:

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

Así que en mi función, la variable laImagen será:

var elHtml = entry.content;
var laImagen = extraer_imagen(elHtml);

o directamente:

laImagen = extraer_imagen(entry.content);