Blink an idea: Blogger Hack: Inserire widget Articoli correlati

venerdì 24 ottobre 2008

Blogger Hack: Inserire widget Articoli correlati

In wordpress c'è un utile widget che permette di suggerire ai lettori di un post, altri articoli che potrebbero essere correlati al primo.
In blogger questo widget non è ancora disponibile ma è possibile ugualmente inserirlo manualmente.
Recati su layout/modifica Html, salva il tuo attuale modello cliccando su :Scarica modello completo, poi cercate il tag <head> e 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>

mi raccomando dovete mantenere questa formattazione altrimenti lo script non funzionerà, ora salvate.
Espandete i modelli widget e cercate 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>

e sostituitelo con 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: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>

Salvate tutto.
Adesso andate su layout/ elementi pagina e create un nuovo elemento Html, date come titolo "Articoli correlati" (o quello che volete) e all'interno scrivete questo codice:

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

Poi, attraverso il drag & drop, posizionatelo sotto l'elemento "Post sul blog", (io, al posto di "Articoli correlati", ho intitolato il widget "Post forse correlati")
Adesso, l'ultimo passo.Tornate su layout/modifica Html ed espandi i modelli widget. Cercate ora "articoli correlati" o il nome che avete scelto , e aggiungiete i caratteri in grassetto (il risultato deve essere uguale a quello che vedi nel box):

<b:widget id='HTML8' locked='false' title='Articoli correlati' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

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