Navigando su molti blog, in cerca informazioni particolari, mi sono accorto che ciò che cercavo era spesso tra gli articoli correlati che appaiono in fondo ai ogni post.
Così ho deciso che questa funzione basata sui tags di ogni post, poteva essere utile a chi visita il mio blog.
Ora vi spiego come è "semplice" la procedura per inserire questa funzione.
- per prima cosa, andate su Modello->Modifica HTML, e salvate il vostro modello sul pc per mantenerlo in caso di errore, cliccando su"Scarica modello completo".
- trovate il tag <head> andate a capo e sotto inserite 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> - Salvate! poi sempre su Modello->Modifica HTML, espandete i wid get spuntando l'apposita casella e cercate questo:
<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 sostituitelo con questo, basterebbe inserire il codice in grassetto:
<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&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if> - Ok, Salvate, fatto ciò, andate su Modelli->Aggiungi elemento a pagina, aggiungete un box javascript/HTML, posizionatelo immediatamente sotto al post dategli il titolo "Articoli Correlati"e all'interno scrivete:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script> - Ora l'ultimo passo, andate su Modello->Modifica HTML, ri-espandete i widget e cercate il box appena creato, attenzione perché il tuo id='HTMLx' (la x un numero) potrebbe essere diverso dal mio. Per finire dovete solo inserire le righe in grassetto, e salvare:
<b:widget id='HTML13' locked='false' title='Related Posts' 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>
Dopo tutta questa fatica anche voi avete i vostri "Articoli Correlati", mi rimangono da fare solo alcune osservazioni: ovviamente gli articoli correlati appaiono solo quando si clicca su un post, nella home non sono presenti; per cambiare il numero di articoli da linkare potete intervenire nel terzo box alla voce allback=related_results_labels&max-results=10 cambiando il numero 10 con quello che preferite.
Ringraziamenti per questa realizzazione:
Guesta guida è Liberamente tradotta da Purplemoggy: Related Posts sotto licenza Creative Commons .
Guesta guida è Liberamente tradotta da Purplemoggy: Related Posts sotto licenza Creative Commons .
ciao, complimenti per l'ottimo tutorial.
RispondiEliminascrivo subito un post.
l'unico appunto che ti faccio è che modificando la voce max-results=10
del terzo box, non ottengo nessuno risultato.
Ho dovuto cambiare la voce
i < 20
del primo box per variare il numero degli articoli.
Ti ringrazio molto per la correzione!
RispondiEliminaGrazie.
Questo commento è stato eliminato dall'autore.
RispondiEliminaScusa, avevo una questione da chiedere ma ho risolto.
RispondiEliminaGrazie per il post da tempo andavo cercando questo!
Ciao.
Son contento per esserti stato utile.
RispondiEliminaCiao
splendido post!! Grazie!! Presto lo metterò anche io questo gadget..
RispondiEliminaVolevo chiederti: come fai ad inserire le caselle per mettere i codici ? Anche io volevo fare dei tutorial ma ho rinunciato perché non riesco ad "incorniciare" le stringhe necessarie in html..
Grazie e complimenti per il blog
Snapshot83