Tengo muchas direcciones de feeds y ahora, lo que quiero hacer es mostrarlos pero sin tener que escribir códigos especiales para cada uno de ellos y además quiero que se vean en un mismo lugar así que me aprovecho de jQuery y modifico un poco el script que se mostraba en esta entrada.

Allí, agregaré un par de funciones extras, una, llamada FEED_eliminartags() para que los contenidos puedan ser "recortados" y verlos como sumarios y otra para detectar la primera imagen que tengan FEED_primerimagen(); ambas cosas, son similares a cualquier otra función que interprete json que es el formato en que leeremos los feeds.

Agrego las funciones antes de </head>

<script type='text/javascript'>
//<![CDATA[
function FEED_primerimagen(cual) {
  var t = "", s, a, b, c, d;
  s = cual;
  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!="")) {t = d;}
  return t;
}

function FEED_eliminartags(cual,longitud){
  var r = cual.split("<");
  for(var i=0;i<r.length;i++){
    if(r[i].indexOf(">")!=-1){
      r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
    }
  }
  r = r.join("");
  var sss = "", p;
  var r2 = r.split(" ");
  for(var i=0;i<r2.length;i++){
    p = sss + r2[i] + " "
    if(p.length>=longitud) {break;}
    sss = p;
  }
  sss = $.trim(sss);
  if(sss) {sss += " …" }
  return sss
}

(function ($) {
  $.fn.FeedEk = function (lasopciones) {
    var opciones = {url: '', clase: '', cantidad: 3, lenres: 120};
    if (lasopciones) {$.extend(opciones, lasopciones)}
    var elID = $(this).attr('id');
    if (opciones.url == null || opciones.url == '') {
      $('#' + elID).empty();
      return
    }
    $.ajax({
      url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + opciones.cantidad + '&output=json&q=' + encodeURIComponent(opciones.url) + '&callback=?',
      dataType: 'json',
      success: function (data) {
        $('#' + elID).empty();
        $.each(data.responseData.feed.entries, function (i, entry) {
           var laimagen = FEED_primerimagen(entry.content);
           var contenido = FEED_eliminartags(entry.content,opciones.lenres);
           var salida = "<div class='ItemFeed "+opciones.clase+"'>";
           salida += "<div class='ItemTitle'><a href='" + entry.link + "' target='_blank' >" + entry.title + "</a></div>";
           salida += "<div class='ItemContent'>";
           if(laimagen){
             salida += "<img src='"+ laimagen +"' />";
           }
           if(contenido){
             salida += "<p>" + contenido + "</p>";
          }
          salida += "</div>";
          salida += "</div>";
          $('#' + elID).append(salida);
        })
      }
    })
  }
})(jQuery);
//]]>
</script>

Y en un elemento HTML, entrada, página estática o donde quiera que se muestren, el HTML que no es otra cosa que un DIV vacío y una serie de enlaces:
<div id="divRss"></div>

<div id="fenlaces">
  <a href="#" rel="1" class="ftwitter"> Twitter usuario </a>
  <a href="#" rel="2" class="ftwitter"> Twitter favoritos </a>
  <a href="#" rel="3" class="ftwitter"> Twitter menciones </a>
  <a href="#" rel="4" class="fyoutube"> YouTube usuario </a>
  <!-- coloco todos los enlaces que quiera -->
  <a href="#" rel="14" class="fstumble"> StumbleUpon blog </a>
</div>
Ahora, faltaría definir una lista de direcciones urls con los distintos feeds; uso un array o cualquier otro sistema:
<script type="text/javascript">
  var lista_feeds=new Array();
  lista_feeds[0] = "";
  lista_feeds[1] = "https://twitter.com/statuses/user_timeline/usuario.rss";
  lista_feeds[2] = "https://api.twitter.com/1/favorites/usuario.rss";
  lista_feeds[3] = "http://search.twitter.com/search.rss?q=to:@usuario";
  lista_feeds[4] = "https://gdata.youtube.com/feeds/api/users/usuario/uploads";
  // ....... sigo agregando las direcciones que quiera usar
  lista_feeds[14] = "http://www.stumbleupon.com/rss/stumbler/nombre/likes";

  // y el evento de jQuery apra detectar el click en esos enlaces
  $('#fenlaces a').live('click', function(e) {
    e.preventDefault(); // evito qe se ejecuta el href del enlace
    var url = lista_feeds[$(this).attr('rel')]; // leo el número de orden de la lista (1, 2, 3, 4, etc)
    var clase = $(this).attr('class'); // leo la clase de ese enlace
    // y ejecuto la función para leer los feeds
    // donde cantidad es el número de entradas a leer y lenres es la longitud máxima
    $('#divRss').FeedEk({url:url, clase:clase, cantidad: 3, lenres:200 });
  });

  // y por defecto, muestro el primero de la lista
  $(document).ready(function() {
    $('#fenlaces a').first().click();
  });
</script>
Por último, como siempre, el CSS que es lo que termina de personalizar las cosas:
<style>
  #divRss { /* el contenedor */
    background-color: #EEE;
    border: 1px solid #000;
    margin: 0 auto;
    outline: 3px solid #ABC;
    padding: 10px;
    width: 350px;
  }
  #divRss .ItemFeed { /* cada entrada */
    border-bottom: 1px dotted #000;
    color: #666;
    padding: 5px 0;
  }
  #divRss .ItemFeed:last-child {border: none;}
  /* y los detalles (título, contenido e imagen)
  #divRss .ItemTitle { }
  #divRss .ItemTitle a { }
  #divRss .ItemContent { }
  #divRss .ItemContent p { }
  #divRss .ItemContent img {height: auto;   width: 100%;}
</style>
Como los datos que nos muestran esos feeds pueden ser variables, la clase que se envia a la función, permite que los mostremos con alguna diferencia; por ejemplo:
#divRss .ItemFeed.ftwitter { }
#divRss .ItemFeed.fyoutube { }
#divRss .ItemFeed.fyoutube .ItemTitle { }
#divRss .ItemFeed.fstumble img { }


10 comentarios:

Beben Koben  

awesome \m/

Responder
Lautarorx  

Puse los dos scripts y llame al contenedor y no pasa nada. Eso es raro pero tal vez es un tema de incompatibilidad...

JMiur  

Si ver tu ejemplo, imposible decir nada.

Lautarorx  

En este blog de pruebas lo tenés, lo puse en la parte de "Anuncio Prueba", agradeceré todo tipo de ayuda. Gracias desde ya. :)

JMiur  

Lo primero que se ve es que la librería jQuery debería estar antes que cualquier otra función que la utilice.

Lautarorx  

:( ¿Y eso tiene alguna solución?

JMiur  

Poniéndola atnes en la plantilla, colocándola antes que las demás.

Lautarorx  

Emm...creo que funcionó. ¡Muchas gracias a todo el equipo de Vagabundia por ayudarme!

Responder
Reyanime  

habrá alguna forma de mostrar la imagen en miniatura de youtube? porque veo solo se agrega una por defecto. Por otro lado el de wordpress me viene bien para mostrar las entradas de un blog en otro sitio :)

JMiur  

Creo que la url de la imagen no es parte del feed así que no sería fácil hacer eso.

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