Leggi e visualizza un feed Blogger completo senza limitazioni. Indice completo.

Non molto tempo fa, Blogger ha ridotto la capacità di leggere i suoi feed tramite JSON , da 500 a sole 150 voci per richiesta, e questo ha causato alcuni problemi con i gadget che si basano sulla lettura di un feed per visualizzare il contenuto di un blog.
Ad esempio, questo ha generato problemi con quelli utilizzati per creare indici delle voci pubblicate ( 1 ) ( 2 ), perché se le richieste sono programmate per essere recuperate 500 alla volta, o in lotti di più di 150, non tutte le voci verranno estratte correttamente.
Anche le Sitemap che possiamo aggiungere a Strumenti per i Webmaster con questo tipo di feed sono state interessate .
Tuttavia, in entrambi i casi, poiché i post possono essere caricati ripetendo la richiesta utilizzando start-index e max-results , la soluzione più semplice è caricarli 150 alla volta (al massimo) invece che a blocchi di 500:

http://yourdirection.blogspot.com/feeds/posts/default?alt=json-in-script &start-index=1&max -results=150
& callback= function http://tudirection.blogspot.com/feeds/posts/default?alt=json-in-script &start-index=301&max-results=150 &callback=function ecc.

Tuttavia, questo metodo non è sufficiente per altri gadget che hanno bisogno di caricare in precedenza tutte le voci (o più di 150) e poi effettuare una selezione filtrata e/o ordinata, come ad esempio avviene con gli indici per tag ( 1 ) ( 2 ) ( 3 ).
Per questi casi - e per quasi tutti, in realtà - ho creato questo script che legge tutte le voci di cui abbiamo bisogno contemporaneamente, indipendentemente dal limite per feed attualmente esistente o che potrebbe esistere in futuro.

L'algoritmo di base consiste nel calcolare il numero totale di post pubblicati e quindi creare automaticamente tutte le richieste necessarie con quel numero, in base al massimo consentito per richiesta.
Gestiremo queste diverse richieste indicando ogni volta un punto di partenza diverso ( start-index ) e il risultato della lettura di ogni "subfeed" verrà aggiunto a un array di feed. Dopodiché, si tratta semplicemente di esplorare quell'array per estrarre ciò di cui abbiamo bisogno in ciascun caso.
Poiché preferisco fornire casi generali in modo che ognuno possa adattarli alle proprie esigenze, il codice seguente legge tutti i dati dal feed di Blogger (inclusa la miniatura corrispondente all'avatar dell'autore per ogni post). Per evitare di mostrare tutto se non è necessario, ho incluso anche alcune variabili configurabili che potete vedere all'inizio, tramite le quali potete selezionare quali elementi mostrare ( true ) e quali no ( false ).
Questa sarebbe la parte che dovremmo inserire nel modello (tra ]]></b:skin> e </head> per non doverla ripetere se dovessimo utilizzarla per diverse utilità (eliminare la riga all'inizio che carica jQuery se abbiamo già quella libreria per qualcos'altro):

<!-- Lettore feed totale www.oloblogger.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
// Parametri configurabili
var web = 'http://www.oloblogger.com'; // Indirizzo del sito. Evitare la barra finale "/"
var vertotal = true; // Visualizza il numero totale di post pubblicati true/false
var total = $('#total'); // Nome del box per il totale dei post pubblicati
var cajasalida = $('#feed'); // Nome del box in cui inserire i post
var postsxfeed = 150; // Numero massimo di post supportati dal feed
var leermaximo = 1; // Numero massimo di post che vogliamo leggere/mostrare
var verimagen = true; // Immagine true/false
var imageWidth = 100; // Larghezza/altezza miniatura
var noimage = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgerbNvRWZUneYI3TxMRiuFkvftKZO_NNckQif1hiWwMRJNE-sMxfQORcgK7abf8Sq1y-dxJKTMrIX6bOgKYUTrIZrEP7bWYyRNhw_bZrp03ESoMt63AF-Dkjpd4hrLa1eJFbcwsjXAO6Hn/s400/cooltext90744301.jpg'; // Miniatura predefinita
var vercontador = true; // Visualizza l'ordinale dei post visualizzati
var verfecha = true; // Visualizza la data true/false
var veretiquetas = true; // Visualizza le etichette true/false
var separadoreti = '-'; // Simbolo di separazione delle etichette
var verautor = true; // Visualizza l'autore della voce
var vernumcom = true // Visualizza il numero del commento
var vertitulo = true; // Visualizza il titolo della voce true/false
var vertexto = true; // Visualizza il riepilogo true/false
var maxcaracteres = 200; // Numero di caratteri per riepilogo
// Parte di esecuzione
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('Totale voci pubblicate: '+longfeed)}if(longfeed>readmaximum){longfeed=readmaximum;$(total).append('. Visualizzazione di '+readmaximum)}else{$(total).append('. Visualizzazione di '+longfeed)}var richieste=Math.ceil(longfeed/postsxfeed);var ajax=[];for(i=0;i<richieste;i++){if(richieste===1){ajax.push(readfeeds(i),'');ajax.push('')}else{ajax.push(readfeeds(i))}}function readfeeds(id){var startindex=(i*postsxfeed)+1;var maxresults=postsxfeed;if(i==(richieste-1)){maxresults=readmaximum-(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 output='<div class="itempost">';var url=(e.link||[]).pop().href;if(viewimage){var miniatura;se(e.media$thumbnail){miniatura=(e.media$thumbnail.url||'')}altrimenti{miniatura=nessunaimmagine}miniatura=miniatura.replace(reimg,'/s'+larghezzaimmagine+'-c/');miniatura=miniatura.replace(reimg2,'=s'+larghezzaimmagine);output+='<a class="itemimage" href="'+url+'"><img src="'+miniatura+'"/></a>'}se(vercounter){output+='<div class="itemcounter">'+((contposts*postsxfeed)+i+1)+'</div>'}se(verdate){var date=new Date(e.published.$t||Date.now());date=(new Data(data)).toLocaleDateString('es-es',{mese:'2 cifre',giorno:'2 cifre',anno:'2 cifre'});output+='<div class="itemdate">'+data+'</div>'}if(viewauthor){var author=(e.author[0].name.$t||'');output+='<div class="itemauthor"><a href="'+e.author[0].uri.$t+'">'+author+'</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||'');output+='<div class="itemnumcom"><a href="'+url+'#comments">'+numcom+' commenti</a></div>'}if(vertags){var tags=[];if(e.category){for(var k=0;k<e.category.length;k++){tags+='<a href="'+web+'/search/?q=label:'+e.category[k].term+'">'+e.category[k].term+'</a>';if(k<e.category.lunghezza-1){etichette+=separatoreti}}}altrimenti{etichette+='Nessuna etichetta'}output+='<div class="itemetiquetas">'+etichette+'</div>'}se(titolovista){var titolo=(e.titolo.$t||'');output+='<div class="itemtitulo"><a href="'+url+'">'+titolo+'</a></div>'}se(testovista){var riepilogo;se('contenuto'in e){riepilogo=e.contenuto.$t;var reghtml=/<\S[^>]*>/g;riepilogo=riepilogo.replace(reghtml,'');se(riepilogo.lunghezza>caratteri massimi){riepilogo=riepilogo.substring(0,caratteri massimi)+'...'}}altrimenti se('riepilogo'in e){summary=e.summary.$t+'...'}output+='<div class="itemsumario">'+summary+'</div>'}output+='</div>';$('.loading').remove();cajasalida.append(output)})}})});//]]></script>

Successivamente, per visualizzare le voci lette e aprire una voce o un gadget, sarà necessario digitare quanto segue:

<div id="total"></div>
<div class="loading"></div>
<div id="feed"></div>
<script type='text/javascript'>//<![CDATA[
// Parametri configurabili
var web = 'http://www.oloblogger.com'; // Indirizzo del sito. Evitare la barra finale "/"
var vertotal = true; // Visualizza il numero totale di post pubblicati true/false
var total = $('#total'); // Nome del box per il totale dei post pubblicati
var cajasalida = $('#feed'); // Nome del box per l'inserimento dei post
var postsxfeed = 150; // Questo sarà al massimo il limite di voci supportate dal feed
var leermaximo = 1; // Numero massimo di voci che vogliamo leggere/mostrare
var verimagen = true; // Immagine true/false
var anchoimagen = 100; // Larghezza/altezza miniatura
var noimage = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgerbNvRWZUneYI3TxMRiuFkvftKZO_NNckQif1hiWwMRJNE-sMxfQORcgK7abf8Sq1y-dxJKTMrIX6bOgKYUTrIZrEP7bWYyRNhw_bZrp03ESoMt63AF-Dkjpd4hrLa1eJFbcwsjXAO6Hn/s400/cooltext90744301.jpg'; // Miniatura predefinita
var vercontador = true; // Visualizza l'ordinale dei post visualizzati
var verfecha = true; // Vedi data true/false
var veretiquetas = true; // Vedi le etichette true/false
var separadoreti = '- '; // Simbolo di separazione dei tag
var verautor = true; // Visualizza autore del post
var vernumcom = true // Visualizza conteggio commenti
var vertitulo = true; // Visualizza titolo del post true/false
var vertexto = true; // Visualizza riepilogo true/false
var maxcaracteres = 200; // Numero di caratteri per riepilogo
//]]></script>

Se non intendi modificare i parametri originali, puoi ometterli. Inserisci semplicemente quelli che cambiano rispetto a quelli che ho incluso nello script di cui ho parlato riguardo all'inserimento nel template.
È importante menzionare la variabile leermaximo , che rappresenta il numero massimo di voci che leggeremo. Ho impostato la variabile in questo modo perché, se non dovessimo effettivamente leggere tutte le voci pubblicate, eviteremo inutili ritardi. Le letture dei feed sono lente, quindi dovremmo esaminare solo il numero di voci necessario, né di più né di meno.
Nel template, ho impostato questa variabile a 1, quindi non verrà eseguita con un valore superiore a meno che non venga ordinata direttamente dal gadget o dalla voce.
Il risultato sarebbe questo, e in esso potrai vedere quanto può essere lento il caricamento di circa 800 voci (clicca sul blocco seguente per eseguirlo o su questo link per vederlo funzionare in CodePen). Da lì, puoi eseguire dei test per vedere cosa succede se modifichi le diverse variabili.

Puoi facilmente cambiare lo stile perché ogni elemento ha una propria classe, ma per darti una base da modificare, questo è quello che ho usato nella demo. Come prima, puoi facilmente modificare il CSS da Codepen per vedere come potrebbero apparire le cose e adattare l'output alla tua estetica.

#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.itemimage{float:left;margin:0 20px 0 0}
.itemimage img{border:1px solid #999;box-sizing:border-box}
.itemcounter{display:inline;margin:0 10px 0 0;font-size:80%}
.itemdate{display:inline;margin:0 10px 0 0;dimensione carattere:80%}
.itemautor{posizione:relativa;visualizzazione:inline;margine:0 10px 0 0;dimensione carattere:80%}
.itemautorimg{visualizzazione:none;posizione:assoluta;superiore:14px;sinistra:0}
.itemautorimg img{larghezza:32px;altezza:32px}
.itemautor:hover .itemautorimg{visualizzazione:blocco}
.itemnumcom{visualizzazione:inline;margine:0 10px 0 0;dimensione carattere:80%}
.itemetags{visualizzazione:inline;dimensione carattere:80%}
.itemetags a{visualizzazione:inline-block;margine:0 5px 0 0;sfondo:#eee;imbottitura:0 5px;dimensione box:bordo-box}
.itemauthor a,.itemnumcom a,.itemtags a{color:#B38D1C;text-decoration:none}
.itemnumcom a:hover{text-decoration:underline}
.itemtitle 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 lineare infinito;animation:spin 1s lineare infinito;border-style:double;border-color:#666 transparent}
.loading:before{content:"LOADING";font-weight:700;line-height:80px;color:#900}
@-webkit-keyframes spin {100%{-webkit-transform:rotate(359deg)}}
@keyframes ruota {100%{transform:rotate(359deg)}}

Bene, con tutto quanto sopra, ora puoi creare un indice completo che mostri tutti i post pubblicati su un blog Blogger. Se hai qualche gadget che non funziona correttamente a causa di questo problema, fammelo sapere e cercherò di trovare il tempo per ricostruirlo con questo strumento. Attualmente sto lavorando all'" indice dei tag ".
Sicuramente, con la nuova mappa del sito standard , potremmo fare qualcosa di più basilare per visualizzare solo il titolo di ogni post e il relativo link, ma anche questo sarà per un'altra occasione.
E naturalmente, se trovi qualcosa che potrebbe essere ottimizzato nel codice, sarò felice di accogliere i tuoi suggerimenti.

fonte

Commenti

nome-foto