Leer y mostrar un feed completo de Blogger sin limitaciones. Índice total.

No hace mucho Blogger redujo la capacidad de lectura de sus feeds mediante JSON, de 500 a sólo 150 entradas por petición y eso ha causado algún que otro inconveniente con los gadgets que se basan en la lectura de un feed para mostrar el contenido de un blog.

Por ejemplo, esto ha generado problemas en los que se utilizan para crear índices de las entradas publicadas (1) (2), pues si las peticiones están programados para sacarlas de 500 en 500 o, en cualquier caso, en tandas de más de 150, no se extraerán bien todas las entradas.

También se han visto afectados los sitemaps que podemos añadir a WebMasters Tools con este tipo de feeds.

Pero para ambos casos, como las entradas se pueden cargar repitiendo la petición mediante start-index y max-results, la solución sencilla pasa por cargar de 150 en 150 (como máximo) en lugar de hacerlo en bloques de 500:

http://tudireccion.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=150&callback=funcion
http://tudireccion.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=151&max-results=150&callback=funcion
http://tudireccion.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=301&max-results=150&callback=funcion
etc.

Sin embargo este método no es suficiente para otros artilugios que necesitan cargar todas las entradas (o más de 150) previamente, para luego realizar una selección filtrada y/o ordenada, como por ejemplo ocurre con los índices por etiquetas (1) (2) (3).

Para estos casos -y para casi para todos realmente- he creado este script que lee de una sola vez todas las entradas que necesitemos, independientemente del límite por feed que existe actualmente o que pueda existir en el futuro.

El algoritmo básico es averiguar el total de entradas publicadas y luego con esa cifra crear automáticamente tantas peticiones como sea necesario, en función del máximo que se admita por petición.

Esas distintas peticiones las gestionaremos indicando un punto de comienzo distinto cada vez (start-index) y el resultado de leer cada "subfeed" se irá añadiendo a un array de feeds. Luego ya será sólo cuestión de recorrer ese array para extraer lo que necesitemos en cada caso.


Como me gusta dar casos generales y así cada cual podrá adaptarlo a sus necesidades, el siguiente código lee todos los datos del feed de Blogger (incluso la miniatura correspondiente al avatar del autor de cada entrada). Pero para no mostrar todo si no es necesario, también he incluido unas variables configurables que podéis ver al principio y mediante las que podréis seleccionar qué elementos mostrar (true) y cuáles no (false).


Esta sería la parte que tendríamos que insertar en plantilla (entre ]]></b:skin> y </head> para no tener que estar repitiéndola si la vamos a usar para varias utilidades (eliminar línea al principio que carga jQuery si ya tenemos esa librería para otra cosa):

<!-- Lector de feeds total www.oloblogger.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
// Parámetros configurables
var web = 'http://www.oloblogger.com'; // Dirección del sitio. Evitar barra "/" al final
var vertotal = true; // Ver número total de entradas publicadas true/false
var total = $('#total'); // Nombre caja para total entradas publicadas
var cajasalida = $('#feed'); // Nombre caja para insertar posts
var postsxfeed = 150; // Como mucho el tope entradas que admite el feed
var leermaximo = 1; // Máximo de entradas que queremos leer/mostrar
var verimagen = true; // Imagen true/false
var anchoimagen = 100; // Ancho/alto de la miniatura
var sinimagen = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgerbNvRWZUneYI3TxMRiuFkvftKZO_NNckQif1hiWwMRJNE-sMxfQORcgK7abf8Sq1y-dxJKTMrIX6bOgKYUTrIZrEP7bWYyRNhw_bZrp03ESoMt63AF-Dkjpd4hrLa1eJFbcwsjXAO6Hn/s400/cooltext90744301.jpg'; // Miniatura por defecto
var vercontador = true; // Ver Ordinal de los posts mostrados
var verfecha = true; // Ver fecha true/false
var veretiquetas = true; // Ver las etiquetas true/false
var separadoreti = '- '; // Símbolo de separación etiquetas
var verautor = true; // Ver autor de la entrada
var vernumcom = true // Ver número comentarios
var vertitulo = true; // Ver título entrada true/false
var vertexto = true; // Ver sumario true/false
var maxcaracteres = 200; // Número caracteres por sumario
// Parte ejecución
var feed=web+'/feeds/posts/default';var contposts=-1;var reimg=/[\/=][sw][0123456789].+[\/o]/g;var reimg2=/\/s[012345679].+\/$/g;$.getJSON(feed+'?alt=json&callback=?').done(function(data){var longfeed=data.feed.openSearch$totalResults.$t;if(vertotal){$(total).append('Total entradas publicadas: '+longfeed)}if(longfeed>leermaximo){longfeed=leermaximo;$(total).append('. Mostrando '+leermaximo)}else{$(total).append('. Mostrando '+longfeed)}var peticiones=Math.ceil(longfeed/postsxfeed);var ajax=[];for(i=0;i<peticiones;i++){if(peticiones===1){ajax.push(leerfeeds(i),'');ajax.push('')}else{ajax.push(leerfeeds(i))}}function leerfeeds(id){var startindex=(i*postsxfeed)+1;var maxresults=postsxfeed;if(i==(peticiones-1)){maxresults=leermaximo-(postsxfeed*i)}var url=feed+'?orderby=published&start-index='+startindex+'&max-results='+maxresults+'&alt=json&callback=?';return $.getJSON(url)}$.when.apply($,ajax).done(function(data){var obj=[];for(var i=0;i<arguments.length;i++){obj.push(arguments[i][0])}for(i=0;i<arguments.length;i++){contposts++;$.each(obj[i].feed.entry||[],function(i,e){var salida='<div class="itempost">';var url=(e.link||[]).pop().href;if(verimagen){var thumbnail;if(e.media$thumbnail){thumbnail=(e.media$thumbnail.url||'')}else{thumbnail=sinimagen}thumbnail=thumbnail.replace(reimg,'/s'+anchoimagen+'-c/');thumbnail=thumbnail.replace(reimg2,'=s'+anchoimagen);salida+='<a class="itemimagen" href="'+url+'"><img src="'+thumbnail+'"/></a>'}if(vercontador){salida+='<div class="itemcontador">'+((contposts*postsxfeed)+i+1)+'</div>'}if(verfecha){var fecha=new Date(e.published.$t||Date.now());fecha=(new Date(fecha)).toLocaleDateString('es-es',{month:'2-digit',day:'2-digit',year:'2-digit'});salida+='<div class="itemfecha">'+fecha+'</div>'}if(verautor){var autor=(e.author[0].name.$t||'');salida+='<div class="itemautor"><a href="'+e.author[0].uri.$t+'">'+autor+'</a><div class="itemautorimg"><a href="'+e.author[0].uri.$t+'"><img src="'+e.author[0].gd$image.src+'"/></a></div></div>'}if(vernumcom){var numcom=(e.thr$total.$t||'');salida+='<div class="itemnumcom"><a href="'+url+'#comments">'+numcom+' comentarios</a></div>'}if(veretiquetas){var etiquetas=[];if(e.category){for(var k=0;k<e.category.length;k++){etiquetas+='<a href="'+web+'/search/?q=label:'+e.category[k].term+'">'+e.category[k].term+'</a>';if(k<e.category.length-1){etiquetas+=separadoreti}}}else{etiquetas+='Sin etiquetas'}salida+='<div class="itemetiquetas">'+etiquetas+'</div>'}if(vertitulo){var titulo=(e.title.$t||'');salida+='<div class="itemtitulo"><a href="'+url+'">'+titulo+'</a></div>'}if(vertexto){var sumario;if('content'in e){sumario=e.content.$t;var reghtml=/<\S[^>]*>/g;sumario=sumario.replace(reghtml,'');if(sumario.length>maxcaracteres){sumario=sumario.substring(0,maxcaracteres)+'...'}}else if('summary'in e){sumario=e.summary.$t+'...'}salida+='<div class="itemsumario">'+sumario+'</div>'}salida+='</div>';$('.loading').remove();cajasalida.append(salida)})}})});//]]></script>

A continuación para que salgan las entradas leídas y ya en una entrada o en un gadget, lo que habrá que escribir será lo siguiente:

<div id="total"></div>
<div class="loading"></div>
<div id="feed"></div>
<script type='text/javascript'>//<![CDATA[
// Parámetros configurables
var web = 'http://www.oloblogger.com'; // Dirección del sitio. Evitar barra "/" al final
var vertotal = true; // Ver número total de entradas publicadas true/false
var total = $('#total'); // Nombre caja para total entradas publicadas
var cajasalida = $('#feed'); // Nombre caja para insertar posts
var postsxfeed = 150; // Como mucho será el tope de entradas que admite el feed
var leermaximo = 1; // Máximo de entradas que queremos leer/mostrar
var verimagen = true; // Imagen true/false
var anchoimagen = 100; // Ancho/alto de la miniatura
var sinimagen = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgerbNvRWZUneYI3TxMRiuFkvftKZO_NNckQif1hiWwMRJNE-sMxfQORcgK7abf8Sq1y-dxJKTMrIX6bOgKYUTrIZrEP7bWYyRNhw_bZrp03ESoMt63AF-Dkjpd4hrLa1eJFbcwsjXAO6Hn/s400/cooltext90744301.jpg'; // Miniatura por defecto
var vercontador = true; // Ver Ordinal de los posts mostrados
var verfecha = true; // Ver fecha true/false
var veretiquetas = true; // Ver las etiquetas true/false
var separadoreti = '- '; // Símbolo de separación etiquetas
var verautor = true; // Ver autor de la entrada
var vernumcom = true // Ver número comentarios
var vertitulo = true; // Ver título entrada true/false
var vertexto = true; // Ver sumario true/false
var maxcaracteres = 200; // Número caracteres por sumario
//]]></script>

Si los parámetros originales no los vais a cambiar, podéis no repetirlos aquí. Bastará con que pongáis aquellos que cambien con respecto a los que incluí en el script que dije de insertar en plantilla.

Mención importante para la variable leermaximo, que es el tope de entradas que leeremos. Esto lo puse así porque si no necesitamos realmente leer todas las entradas publicadas, evitaremos demoras innecesarias. Las lecturas de feeds son lentas, así que sólo debemos pasar por el número de entradas que sea necesario, ni más, ni menos.

En la plantilla puse esa variable con el valor 1 y así no se ejecutará con otro mayor salvo cuando se le ordene directamente desde el gadget o entrada

El resultado sería este y en él podréis descubrir cómo de lenta puede ser la carga de unas 800 entradas (clic sobre el siguiente bloque para ejecutar o sobre este enlace para ver funcionando en Codepen). Desde allí podréis hacer pruebas para ver qué ocurre si cambiáis las distintas variables.

See the Pen Lector de feed completo. Blogger by Oloman (@oloman) on CodePen.

El estilo lo podéis cambiar fácilmente porque todos los elementos salen con su propia clase, pero para que tengáis una base sobre la que poder modificar, este es el que he usado en la demo. Al igual que antes, desde Codepen podéis hacer alterar fácilmente el CSS para ir viendo cómo podría quedar la cosa y adaptar la salida a vuestra propia estética.

#total{display:block;font-size:22px;line-height:24px;margin-bottom:10px;padding:10px;border:2px solid #000;box-sizing:border-box;text-align:center;color:#eee;background:#333}
.itempost{display:block;padding:10px;clear:both;box-sizing:border-box;overflow:hidden}
.itempost:nth-of-type(odd){background:#EFD689}
a.itemimagen{float:left;margin:0 20px 0 0}
.itemimagen img{border:1px solid #999;box-sizing:border-box}
.itemcontador{display:inline;margin:0 10px 0 0;font-size:80%}
.itemfecha{display:inline;margin:0 10px 0 0;font-size:80%}
.itemautor{position:relative;display:inline;margin:0 10px 0 0;font-size:80%}
.itemautorimg{display:none;position:absolute;top:14px;left:0}
.itemautorimg img{width:32px;height:32px}
.itemautor:hover .itemautorimg{display:block}
.itemnumcom{display:inline;margin:0 10px 0 0;font-size:80%}
.itemetiquetas{display:inline;font-size:80%}
.itemetiquetas a{display:inline-block;margin:0 5px 0 0;background:#eee;padding:0 5px;box-sizing:border-box}
.itemautor a,.itemnumcom a,.itemetiquetas a{color:#B38D1C;text-decoration:none}
.itemnumcom a:hover{text-decoration:underline}
.itemtitulo a{display:block;margin:10px 0;font-size:20px;color:#B38D1C;text-decoration:none}
.loading{display:block;width:80px;height:80px;margin:10px auto;border-width:30px;border-radius:50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border-style:double;border-color:#666 transparent}
.loading:before{content:"CARGANDO";font-weight:700;line-height:80px;color:#900}
@-webkit-keyframes spin {100%{-webkit-transform:rotate(359deg)}}
@keyframes spin {100%{transform:rotate(359deg)}}

Y bien, con todo lo anterior ya podéis montar un índice integral que muestre todas las entradas publicadas en un blog Blogger. Si tenéis algún gadget que os funciona actualmente de manera deficiente por este tema, comentadlo e intentaré sacar algo de tiempo para reconstruirlo con esta utilidad. De momento ando ya trabajando con el "índice por etiquetas".

Seguramente, con el nuevo sitemap de serie podríamos hacer algo más básico para mostrar sólo título de cada entrada y su enlace, pero eso también será en otra ocasión.

Y por supuesto, si encontráis cualquier cosa que se pueda optimizar en el código, con gusto recogeré la sugerencia.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter