7 luglio 2009

31 commenti Condividi il post Facebook Twitter Google+

Come inserire l'elenco degli articoli correlati sotto ogni post

Ieri Piero in un commento ha scritto:

mi piacerebbe inserire alla fine del post alcuni link che si correlano al post soprascritto.
Si può fare con una procedura automatica? oppure bisogna metterli uno per uno manualmente??

Vi propongo quindi il codice da inserire nell'html del blog per visualizzare sotto ciascun post (e non nell'homepage) l'elenco degli articoli correlati in base alle etichette del post selezionato.
Questo codice era presente nel template che mi aveva spedito via email butterfly.23 quando mi ha chiesto se era possibile personalizzare il titolo dei post in base alle etichette.

Ecco cosa occorre fare: andate in Blogger -> Layout -> Modifica html e cliccate su Espandi i modelli widget, cercate le righe di codice

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>

e subito prima inserite questo codice:

<!-- articoli correlati -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'><br/>
<h3>Articoli correlati per categorie</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 5;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}

function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Salvate e alla fine di ogni post vedrete gli articoli correlati raggruppati per etichetta.
Potete personalizzare il numero massimo di post e di etichette da visualizzare cambiando:

var maxNumberOfPostsPerLabel = 10;

ossia il numero massimo di post per ogni etichetta

var maxNumberOfLabels = 5;

ossia il numero massimo di etichette

Potete vedere lo script in azione visitando il mio blog di prova cliccando su ciascun post.

Resto a disposizione per qualsiasi dubbio o chiarimento!

ec.log mi ha segnalato che lo script degli articoli correlati non funziona in presenza di etichette con caratteri speciali, come ad esempio il carattere "/" nell'etichetta hw/sw. Ho controllato lo script, e per chi avesse lo stesso problema di ec.log ecco cosa bisogna cambiare nel codice precedente:

+ label + con
+ encodeURIComponent(label) +

e
var label = raw.substr(homeUrl3.length+13); con
var label = decodeURIComponent(raw.substr(homeUrl3.length+13));
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

31 commenti

  1. ciao... non riesco... mi dice che manca un tag di chiusura...
    scusa!!!!

    RispondiElimina
  2. Questo è sicuramente un effetto da provare, ma non sono sicuro che si adatti al mio template...

    RispondiElimina
  3. @Ale: riprova ora... ho corretto l'errore
    @Den: perché pensi che non si adatti al tuo template?

    RispondiElimina
  4. è fantastico!
    adesso esagero... posso modificare anche il colore???

    RispondiElimina
  5. @Ale: per cambiare i colori occorre modificare il codice; contattami in chat che ne parliamo.

    RispondiElimina
  6. Ho provato ma l'effetto non è dei migliori...
    Mi riferisco all'aspetto dei post che "sembra più pieno". Non so bene come spiegarmi; grazie comunque per lo script, potrebbe comunque essermi utile!

    RispondiElimina
  7. @Den: ho capito. Anch'io per il momento non lo metto; voglio prima personalizzare i link (font, dimensioni, colori, ecc).

    RispondiElimina
  8. Che bello, vorrei provarci,
    ciao Daniela.

    RispondiElimina
  9. wow Iole, anche questo è interessantissimo!!!
    grazie

    ciao elisabetta

    RispondiElimina
  10. ciao Iole, detto fatto!
    ho visitato il blog prova e ho visto che i link vengono messi subito sotto il titolo del post, mentre invece se è possibile dovrebbero comparire alla fine del post. perchè chi legge il post se viene distratto da altri titoli finisce magari a non leggere niente.

    RispondiElimina
  11. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  12. ciao Iole, intanto grazie per il tempo che hai perso dietro a me, ma poi ho preferito lasciare i post estendibili con la modifica di Tenebrae: L'effetto degli articoli correlati non mi entusiasmava troppo e mi dispiaceva toglierli.
    Volevo chiederti invece se il tuo blog ha ancora problemi con EI? Molti miei amici che lo usano (io ho Firefox) visualizzano bene la homepage del mio blog, ma aprendo i post non glielo caricano tutto e si visualizza l'errore "Impossibile aprire il sito internet http://altrodoveblog.blogspot.com/2009/.....html. Operazione terminata" e poi segue "The link “altrodoveblog.blogspot.com/2009/07/federico-e-riccardo-due-storie-che-non.html” may be misspelled.
    DNS error occurred. Server cannot be found. The link may be broken." e ciao al post! Ricordo che avevi detto che poteva essere in problema del widget dei Lettori e ho visto che lo hai cambiato. Come hai fatto?
    Ciao e grazie ancora per la tua pazienza: sei bravissima!

    RispondiElimina
  13. @vit: nel blog di prova i link che compaiono subito sotto al titolo sono relativi alla modifica che mi aveva chiesto butterfly.23 (come personalizzare il titolo dei post in base alle etichette) mentre gli articoli correlati compaiono sotto ogni post (ma non nell'homepage) dopo la scritta "Articoli correlati per categorie". Non ho avuto tempo per creare un nuovo blog di prova.

    @Daniela: ho tolto il widget dei lettori perché con IE8 impediva l'apertura del blog dopo che compariva quel messaggio d'errore. Io ho provato a togliere uno alla volta i vari widget e ho notato che mettendo il widget dei lettori si bloccava, allora ho deciso di toglierlo e al suo post ho messo un'immagine (quindi sembra che il widget c'è) così chiunque vuole iscriversi può farlo.

    RispondiElimina
  14. ciao Iole, passo perrispondere alla tua domanda: che significa collaborare con silikomart.
    in pratica loro mi hanno inviato una campionatura di diversi stampi, gratis, io mi impegno a creare ricette cpon i loro stampi facendo pubblicità sul blog, gli invio la ricetta che loro inseriranno nella loro sezione dedicata.

    un bacio e a presto.

    RispondiElimina
  15. @Betty: grazie per la risposta. Hanno scelto un ottimo modo per farsi pubblicità!

    RispondiElimina
  16. modifica fatta, funziona tutto. unica nota, avevo un tag con il carattere "/" ed in quel caso non apparivano i post correlati. eliminando dal tag quel carattere tutto ok. ciao! grazie!
    ps. x ora rinuncio alle faccine nei commenti, grazie x l'aiuto !!

    RispondiElimina
  17. @ec.log: il carattere "/" è un carattere speciale; rivedrò lo script per farlo funzionare anche in presenza di caratteri speciali. Grazie per la segnalazione.

    RispondiElimina
  18. Cara Iole, ho provato, ma purtroppo i link non compaiono né all'inizio né alla fine del post. Ciao, Martin

    RispondiElimina
  19. Grandissima!! funziona anche con il carattere / . Grazie!!!!!!!!!

    RispondiElimina
  20. @Martin: mandami il tuo template completo via email che lo provo su un mio blog di prova e ti faccio sapere cosa non va.
    @ec.log: grazie a te per la segnalazione; io non ci avevo proprio pensato alle etichette con caratteri speciali.

    RispondiElimina
  21. Ciao. Ho provato ma non visualizza niente... Consigli?

    RispondiElimina
  22. Grazie,
    questo post mi è stato utilissimo per dare visibilità anche a post vecchiotti.

    Ciao
    Valente

    RispondiElimina
  23. ciao, volevo sapere come fare a far visualizzare i post nell'home page quando gli altri utenti entrano nel mio blog..come hai fatto tu praticamente! sapresti dirmi come fare?
    grazie

    RispondiElimina
  24. @OnAir: ti riferisci ai post in forma sintetica con il "Leggi tutto..."??? Ecco il post con le istruzioni.

    RispondiElimina
  25. Ciao IOle.
    Tu spieghi di andare su blogger, ma io lo vorrei usare sul mio blog che é di Word Press - Altervista - ...
    Ho anche un blog Blogger, ma é quello in tedesco, ma lo vorrei usare su quello itatliano.
    si puó usare anche lí? e se si, come devo fare?
    grazie in anticipo.

    RispondiElimina
  26. @Orchidea: il codice che trovi nel mio post è valido solo per Blogger.
    Purtroppo non conosco bene Wordpress e Altervista; mi dispiace ma non posso aiutarti.

    RispondiElimina
  27. Fantastico,post eccezionale!In questo modo ho raddoppiato le mie visualizzazioni di pagine!Grazieeeeeeeeeee!

    RispondiElimina
  28. Cara Iole,
    ho installato il tuo widget, ma non era quello che volevo. Ho rpovato a disinstallarlo ma ora mi esce sotto tutti i miei post questa scritta: Post originale su: http://iolecal.blogspot.com/2009/07/come-inserire-lelenco-degli-articoli.html#ixzz2RpvGHU7J Under Creative Commons License: Attribution Non-Commercial No Derivatives

    e sembra che tutti i miei articoli sono tratti dal tuo blog. Come faccio ad eliminarla? l'ho cercata anche nell'html e non l'hon trovata. Grazie

    RispondiElimina
  29. @Anna Pernice: se mi dai l'indirizzo del tuo blog, passo a controllare il codice html e ti dico cosa fare.

    RispondiElimina
  30. Ciao Iole, ho messo il tuo codice sul mio secondo blog ma non funziona. Da cosa può dipendere? Maddalena.

    RispondiElimina
    Risposte
    1. @Donneinpink- Risparmio e fai da te: se hai ancora bisogno di aiuto, contattami!

      Elimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy