Inserire gli articoli correlati in Blogger

Il tutorial originale in inglese per questo widget si trova in PurpleMoggy's Blog.
Lo considero una specie di appunto soprattutto a mio uso e consumo anche se potrebbe essere interessante pure per altri.

Perché mettere gli articoli correlati? Perché se un navigatore capita sul tuo blog è bene che abbia già un elenco degli articoli presenti nel blog che trattano argomenti simili. Questo viene fatto con l'uso delle tag. Gli articoli correlati sono articoli che hanno almeno una tag uguale al post visionato.
Ecco il procedimento:
-> Vai su Layout, Modifica Html e cerca il tag <head>, immediatamente dopo inserisci 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>

Salva il modello e se non si dovesse salvare controlla se hai selezionato bene tutto il codice.
Adesso espandi i modelli widget mettendo una spunta nell'apposito quadratino e cerca questo codice


<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>
 
Sostituiscilo con quest'altro codice


<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 nuovamente. Adesso vai su Layout, Aggiungi elemento pagina, Codice Html/Javascript e crea un nuovo elemento pagina.

Devi inserire codice e titolo. Il codice da inserire è questo

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

Il titolo lo scegli come vuoi. In questo blog ho messo "Altri articoli che potrebbero interessarti", in un blog di cucina si potrebbe mettere "Altre ricette simili" ecc.
A questo punto con il drag & drop lo posizioni sotto il post.
Feed
Come mostrato in questo sreenshot.
Adesso occorre tornare in Layout, Modifica Html e cercare questo codice

<b:widget id='HTML6' locked='false' title='Altri articoli che potrebbero interessarti' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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>

Devi considerare ch id='HTML6' è il numero del widget appena creato e quindi è diverso da blog a blog. Il codice del widget sarà comunque inequivocabilmente individuato dal Titolo che hai messo; in questo caso "Altri articoli che potrebbero interessarti".

Adesso devi aggiungere le due righe in grassetto nero.
In questo screenshot ho sottolineato di giallo il titolo del widget e cerchiato di rosso le due linee di codice da aggiungere.
Feed
Adesso non resta altro che salvare il modello e vedere come si presenta il nostro blog. Per ottenere buoni risultati bisogna avere un numero di tag relativamente modesto e cercare di gestirle con efficacia.

Aggiornamento: Il numero massimo di articoli di 10 per ogni tag è eccessivo quando si hanno etichette molto comuni e si sono scritti molti post. Il numero 10 in verde nel codice può essere sostituito con un numero minore (es.4). Naturalmente ciascuno può personalizzarlo come meglio crede. Un numero eccessivo di articoli correlati appesantisce il caricamento della pagina, bisogna cercare quindi una via di mezzo tra questa esigenza e quella di mostrare tutti gli articoli del blog che trattano argomenti simili.
fonte: parsifal32.blogspot.com


Home Page © Valentina

0 commenti:

Posta un commento

Articoli Correlati