Inserire Post Correlati in Blogger Blogspot

martedì 6 gennaio 2009 Lascia un Commento

Come inserire i Post Correlati in Blogger Blogspot.
Questa guida ci permette di essere in grado di visualizzare dei post correlati a quello che l'utente sta visualizzando sul nostro blog, il tutto basandosi sulle etichette (ovvero i tags).
La guida è abbastanza impegnativa, per cui te la sconsiglio se sei alle primissime armi con la modifica dei modelli di Blogger Blogspot.

Per cominciare vai in Layout ->Modifica Html e seleziona Espandi i Modelli Widget. Ti consiglio di salvare il modello come copia di sicurezza.

Cerca all'interno del modello 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 cerca (Ctrl+F) 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>

Adesso salva il modello.

A questo punto possiamo inserire il nostro widget all'interno del nostro blog.
Vai in Elementi Pagina, ed inserisci un gadget di tipo Html/Java appena sotto il blocco che rappresenta i Post (Post sul Blog). Chiama questo gadget col nome che preferisci, ad esempio Post Correlati. Il codice da inserire è il seguente:

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


A questo punto torna in Modifica Html, ed espandi i modelli widget.
Cerca (Ctrl+F) il widget appena inserito, utilizzando il nome con il quale lo hai chiamato. Nel nostro caso dovremo cercare Post Correlati.

Esso sarà simile al seguente, ad eccezione delle parti in rosso:


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


Le parti in rosso le devi aggiungere tu nel tuo modello.

Fine.

Abbiamo ottenuto un gadget che ci mostra automaticamente i Post che (in base alle nostre etichettature precedenti) sono maggiormente correlati con il post che stiamo visualizzando sul nostro blog su Blogger.

17 commenti »

  • SolarTime ha scritto:  

    Ottimo consiglio e tutto spiegato benissimo, ma soprattutto... perfettamente funzionante! Grazie

  • Caino79 ha scritto:  

    Funziona alla perfezione! Grazie

  • Fratelli Caponi ha scritto:  

    sigh! a me non si visualizza nulla di quel che inserisco sotto (in Layout) lo spazio del Post.
    (ho provato anche a metterci un qualcosa di semplice testo ma non me lo visualizza)

  • Parcobuoi ha scritto:  

    Perfetto. Grazie

  • Tiziana ha scritto:  

    Ottimo gadget...ma nel mio template non trovo la stringa blog1...c'è un'altra stringa che posso trovare per poterlo inserire?Grazie

  • JS ha scritto:  

    Tiziana,
    probabilmente utilizzi un template non standard, il quale presenta delle lievi differenze nel codice.
    In tal caso non posso aiutarti.

  • PsicoTrickster ha scritto:  

    ciao, mi scuso se mi intruflo frai commenti per chiederti un aiuto diretto.
    ho un blog su blogger
    questo: http://lagrandeopera.blogspot.com

    dopo 1 anno non funziona piùil POST SPANDIBILE che avevo creato grazie ad una guida qui.
    non hocambiato nulla nel modello html.. eppure cliccando su read more non apre più tutto l'articolo come al solito..
    cliccando sul titolo ancora si invece..

    temo che rifare il procedimento d'accapo mi incasini il blog come successo per altre cose e non riesco più a sistemarlo.
    grazie anticipatamente del tempo.

    PsicoNauta

  • JS ha scritto:  

    PsicoTrickster

    L'unico modo per capirci qualcosa è:

    1) ricontrollare attentamente il modello, confrontando i codici presenti con quelli della guida
    2) controllare i post, assicuradosi che i tags siano presenti (a volte Blogger modifica i post!)

    A presto

  • PsicoTrickster ha scritto:  

    ricontrollare i tag.. dici ? sviluppa! :P

  • sa ha scritto:  

    funzione molto utile, grazie mille!

  • STDJ ha scritto:  

    Funziona..bello, ma come faccio per farne visualizzare solo 5...?

  • C'era una volta Viola@-IMPORTANT-PEOPLE ha scritto:  

    ciao vorrei chiederti se hai un modello di esempio con questo tuo "post correlati per etichetta" ..

  • C'era una volta Viola@-IMPORTANT-PEOPLE ha scritto:  

    IO VOLEVO AGGIUNGERE QUESTO TUO WIDGES AL MIO BLOG, E VORREI SAPERE SE POTREBBE ESSERE SETTATO PERCHé RISULTI INVISIBILE NELLA HOME MA QUANDO IL POST è APERTO DOVREBBE RISULTARE VISIBILE DOPO O PRIMA GLI ALTRI (widges "ti potrebbero interessare" E "post recenti") e non creare problemi per il corretto funzionamento del tutto..

  • Alessandro ha scritto:  

    Grazie, davvero utile!!

  • Vincenzo Basile ha scritto:  

    Scusami, non riesco a fare il secondo passaggio.

    Non trovo questo codice


    ,

  • Pierluigi Fratarcangeli ha scritto:  

    Il sito e i post sono molto chiari... in riferimento a questo post ho un problema. Uso la versione aggiornata di blogger e dalla pubblicazione di questo articolo è passato un po' di tempo. Ho l'impressione che gli html non corrispondano, quindi come faccio a modificare il layout per inserire post correlati in blogspot? Grazie

  • Ilaria Pim ha scritto:  

    Ciao! perdonatemi se scrivo qui anche se l'argomento non c'entra...io ho un problema con il mio blog, quando condivido i miei articoli su facebook l'anteprima che mi appare non è l'immagine dell'articolo..ma mi fa scegliere fra due immagini che sono inserite nelle colonne laterali in cui metto i gadget! non capisco molto di codice html..l'unica cosa che ho inserito è un template...ma prima, anche col template, non mi dava questo problema. Spero che mi possiate aiutare!! Grazie in anticipo :(

  • Commenta!

    Lascia il tuo commento riguardo l'articolo!