Inserire il widget degli "articoli correlati" in Blogger

Quando i post sul tuo blog su piattaforma Blogger diventano piuttosto numerosi, può essere una buona idea quella di creare un widget dei post correlati al contenuto dell'articolo, basato sulle medesime etichette (o tags).


Per poter far ciò, bisogna mettere mano al codice HTML del template, per cui vai in Layout - Modifica HTML e seleziona Espandi i modelli widget. Salva una copia di backup del modello completo, tanto per essere sicuri di non fare danni inutili.


Clicca Ctrl + F, cerca la stringa </head> e incolla appena prima di essa il codice seguente:

<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 (sempre con Ctrl + F) cerca la stringa blog1, e individua il blocco di codice seguente:

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

Selezionalo tutto e sostituiscilo con il codice seguente:

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


Salva il modello
Il passaggio successivo è quello di inserire un widget, per cui vai in Elementi pagina, crea un gadget di tipo HTML/JavaScript, chiamalo come vuoi, per esempio Post correlati ed incolla il codice:

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Per questioni di ordine trascinalo poi sotto il widget del post.

Ora torna in Modifica HTML, ed espandi i modelli widget. Cerca il widget appena inserito, ovvero Post correlati.

Esso sarà simile al seguente, ad eccezione delle parti in verde che dovrai aggiungere tu manualmente:

<b:widget id='HTML13' locked='false' title='Post Correlati' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Salva il modello e goditi il nuovo widget. 

N.B.: nella riga di codice dove ho segnato il numero 10 con il rosso, è buona norma mettere un numero basso (tipo 3-4) per non appesantire molto il template, e quindi il caricamento della pagina; il numero non rappresenta il numero di post, in quanto ha a che fare con le etichette.

Nessun commento:

Posta un commento