Widget articoli correlati per Blogger


Quando scriviamo un articolo ci poniamo come obbiettivo di realizzarlo per bene in modo descrittivo, senza errori e alla portata di tutti. Molto probabilmente se l'articolo ha questi tre requisiti piacerà al visitatore di turno e probabilmente si metterà alla ricerca di altri articoli simili su Google ma siete furbi dovete mostrarglieli direttamente nel vostro blog ed esattamente nella stessa pagina in cui si trova. Tutto questo si può fare utilizzando il widget degli articoli correlati applicabile solo su Blogger/Blogspot; è presente un lungo procedimento per "installarlo" correttamente però quelli di Blogger non si sono presi la briga di creare un widget predefinito per cui chi volesse installarne uno dovrà iniziare proprio da qui.

Il risultato finale è proprio quello illustrato nell'immagine in alto: un elenco puntato, semplice, senza immagini a fianco che va benissimo per la sidebar di Blogger. Associa gli articoli correlati in base al tag utilizzato nel post.

Se trovate difficoltà con l'implementazione di questo widget oppure non volete perdere troppo tempo potete inserire sul vostro blog il widget di Linkwithin che funziona alla stessa maniera ed in più mostra anche le immagini (se disponibili).

Se invece soddisfa le vostre richieste, per implementarlo, dovete andare su Modello > Modifica HTML e subito dopo il tag <head> dovete inserire questo codice:
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Adesso dovete individuare questo codice nel modello:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

e lo dovete andare a sostituire con quest'altro:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

A questo punto salvate il modello, e se avete fatto tutto correttamente non dovrebbe riportarvi alcun errore, altrimenti ricontrollate attentamente tutti i passaggi.

L'ultimo passo da compiere, che è anche quello più semplice è andare su Layout > Aggiungi un gadget > Html/Javascript e richiamare i codici precedenti incollando questo piccolo codice:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Salvate la finestra del gadget appena aggiunto ed adesso dovrebbe apparirvi anche nel blog, ovviamente essendo un widget potete spostarlo ovunque vogliate e mostrarlo solamente in determinate sezioni del blog.

Per variare il numero di articoli correlati dovete modificare max-results=10" inserendo un numero diverso ma inferiore a 10, in quanto è il numero massimo possibile. Tra l'altro se utilizzate due o più etichette, potreste addirittura visualizzare 20 articoli correlati.



Nessun commento :

Scrivi un commento

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".