Pubblicato il 09/04/11e aggiornato il

Articoli simili, correlati per etichetta, da inserire alla fine dell'articolo in un blog su Blogger.

Qualche mese fa ebbe un grande successo il widget LinkWithin che inseriva degli articoli simili a quelli dell'articolo corredati da miniature. Questo gadget non è personalizzabile in quanto lo script è nei server della società che lo ha creato. Ultimamente è meno utilizzato perché, visto che la velocità di caricamento è diventata un importante parametro per determinare la SERP di una pagina, gli webmaster tendono a alleggerire i blog gli widget troppo pesanti. Per mostrare alla fine del post altri articoli con argomento simile si tende quindi a scegliere dei gadget che mostrino solo l'elenco dei titoli di altri post che hanno le stesse etichette di quello visualizzato.

Quello che vado a presentare ha la particolarità di essere abbastanza leggero ma anche non disprezzabile dal punto di vista estetico. Si va su Design > Modifica HTML e, dopo aver salvato il template, si cerca la solita riga </head>, subito sopra si incolla questo codice

<!-- Articoli Correlati Inizio -->
<style> #articoli_correlati { float : left; width : 530px; margin-top:20px; margin-left : 5px; margin-bottom:15px; font : 11px Verdana; margin-bottom:10px; } #articoli_correlati .widget { list-style-type : none; margin : 4px 0 4px 0; padding : 0; } #articoli_correlati .widget h2, #articoli_correlati h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #articoli_correlati a { text-decoration : none; } #articoli_correlati a:hover { text-decoration : none; } #articoli_correlati ul { border : medium none; margin : 10px; padding : 0; } #articoli_correlati ul li { display : block; background : url(&quot;https://lh6.googleusercontent.com/_nT13UtBmmiU/TaBhKce4T1I/AAAAAAAASyU/DNQrGBf85Z4/rss-blu.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/scriptperilblog/javascript-2/articoli-simili.js' type='text/javascript'/>
<!--Articoli Correlati Fine - www.ideepercomputeredinternet.com -->

Le personalizzazioni da fare sono molte ma solo di adattamento al nostro template. Riguardano la larghezza (width), i margini, la dimensione dei caratteri, lo stile dei bordi (border-bottom:1px dotted #cccccc;) che è punteggiato di grigio e la icona che si visualizza sulla sinistra di ogni articolo, che ha l'URL evidenziato di viola e che può essere sostituita da un'altra a nostro piacimento. Ricordo che ha dimensioni 16x16 pixel e che è in formato PNG.

Il codice seguente serve per visualizzare materialmente gli articoli correlati e può essere incollato o subito sotto la riga <data:post.body/> o sotto il blocco di codice del read more che segue detta riga. Forse l'opzione migliore però è quella di incollarlo subito sopra<div class='post-footer'>

<!-- Articoli Correlati Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='articoli_correlati'>
<font face='Arial' size='3'><b>Altri articoli con etichetta: </b></font><font color='#003366'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=articoli_simili&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> articoli_duplicati(); stampa_etichette();
</script>
</div></b:if>
<!-- Articoli Correlati Fine - www.ideepercomputeredinternet.com -->

Le modifiche che possono essere fatte riguardano la dimensione dei caratteri del titolo del widget (3) e il colore delle etichette che sono mostrate dopo il titolo. Il numero 5 indica il numero massimo di articoli presi in esame per ciascuna etichetta. Il gadget avrà un aspetto simile al seguente screenshot e sarà visibile solo nei singoli post.

articoli simili correlati blogger

Se non vogliamo visualizzare le etichette del post da cui si ricavano gli articoli simili, bisogna dare a quest'ultime lo stesso colore dello sfondo del blog. Se si ha un blog bianco, basta sostituire color='#003366; con color='#FFFFFF;. Finalmente si può salvare il modello. Questo gadget non si inserisce tramite un elemento pagina HTML/Javascript e quindi non può essere posizionato con il mouse. Per una Demo del widget basta aprire un post del Blog Di Prova per esempio questo degli Ultimi Post per Tag. Ho inserito il colore bianco per le etichette, come lo sfondo del blog, e quindi non si visualizzano.

Aggiornamento: Quelli di Google (leggi le dichiarazioni di Matt Cutts) non vedono di buon occhio il testo dello stesso colore dello sfondo perché considerato una specie di inganno nei confronti del visitatore. Quindi per non visualizzare le etichette in questo widget è meglio utilizzare un altro metodo che non ha queste controindicazioni. Si sostituisce la stringa <font color='#003366'> con <span style='display:none;'> e il suo tag di chiusura </font> con </span>. Il widget non viene visualizzato con Internet Explorer, neppure con la versione più recente IE9.





10 commenti :

  1. Al momento scelgo la soluzione del feed rss per l'etichetta che ritengo quella più importante.
    Mi studierò, comunque, questa soluzione!

    RispondiElimina
  2. @Gianluigi Filippelli
    In fondo sono feed anche questi ^^. Vengono selezionati i post che hanno le stesse etichette e poi ne vengono elencati i titoli. In genere è solo una questione di argomenti trattati e di layout la scelta tra l'una e l'altra opzione.

    RispondiElimina
  3. uhm...furba l'idea di colorare i tag con lo stesso sfondo del forum. La applico subito.

    RispondiElimina
  4. molto carino, l'ideale per me... anche perché linkw... neanche mi funzionava... associava gli articoli a caso -.-' grazie

    RispondiElimina
  5. @Soffio di Dea
    Voglio vedere se mi riesce di metterlo anche nel mio modello

    @Davide Morante
    Mi è venuto in mente che quelli di Google non vedono di buon occhio queste furbizie quindi ho aggiornato il post con un metodo alternativo.

    RispondiElimina
  6. ciao Ernesto mi chiedevo se fosse possibile inserire gli articoli simili nel feed così da farli venir fuori anche nella newsletter...grazie

    RispondiElimina
  7. @ViviTaranto
    Con Wordpress ci sono un sacco di plugin atti allo scopo ma con Blogger non mi risulta essere possibile.

    RispondiElimina
  8. ah peccato...ok grazie alla prossima

    RispondiElimina
  9. non funziona con il dominio personalizzato ?

    RispondiElimina
    Risposte
    1. @NuovaBelmonte
      In tutti i domini personalizzati i javascript e i css caricati su Google Sites non funzionano, quindi devi scaricare questo file
      https://sites.google.com/site/scriptperilblog/javascript-2/articoli-simili.js
      caricarlo su Dropbox, nella Cartella Public, andare su Copy public link e incollare il nuovo indirizzo nel codice.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.