Widget degli Articoli Simili o Correlati su Blogger anche su mobile

Come installare il gadget degli Articoli Correlati con Miniature su Blogger, completamente personalizzabile e nella versione desktop e in quella mobile

In moltissimi siti, alla fine di un post, vengono mostrati quelli che sono gli articoli simili a quello in oggetto, ovvero che trattano un argomento correlato. Questa opzione di layout si rivela utile per mostrare ai lettori dei contenuti simili a quello visualizzato, che possono interessare loro e sui cui titoli possono cliccare per aprirli.

Il widget di riferimento in questo senso è stato per molto tempo LinkWithin, che analizza il sito e che mostra quelli che ritiene essere i post che più si avvicinano, per argomento, a quello che è stato aperto. Da qualche tempo però è molto peggiorato e, anche nei commenti su questo blog, mi è stato fatto spesso presente. Infatti mostra quasi sempre gli stessi post e questo lo rende oggettivamente poco utile.

Una soluzione interessante è quella dell'inserimento del gadget dei Contenuti Corrispondenti, il cui codice può essere prelevato da Google, da chi abbia un account Adsense. Chi però non amasse quel widget o non avesse un tale account, rimane nella situazione di non sapere come aggiungere al layout un gadget con quelle caratteristiche.

In questo articolo presenterò un widget che non ha bisogno di javascript esterni, e che quindi è sempre funzionante, che mostri alla fine di tutti i post una serie di miniature con altri articoli che abbiano almeno una etichetta in comune con quello corrente. In sostanza la correlazione degli articoli è data da una etichetta in comune.

Il widget funzionerà solo nei Temi di Blogger non Responsive, non l'ho infatti testato nei Temi che sono stati rilasciati per ultimi, e che sono molto veloci e performanti, ma di difficile personalizzazione. Verrà mostrato solo negli articoli e non nelle altre pagine come la Home, le Etichette e gli Archivi.

Si va su Bacheca -> Tema -> Backup/Ripristino e si salva il Tema per uno suo ripristino nel caso in cui le modifiche non andassero a buon fine. Sempre su Tema si clicca poi su Modifica HTML e, con Ctrl+F, si cerca la riga </head> quindi, subito sopra a quella, si incolla questo codice

<!--Articoli Simili con Miniature Inizio-->
     <style type='text/css'>
       #articoli-simili {
         float:center;
         text-transform:none;
         height:175px;
         background-color: #FFFFFF;
         box-shadow: 0 0 0 1px white inset;        
         padding:5px;
       }
       #articoli-simili h2{
         padding: 8px 8px;
         color:#f95b5b;
         font-family:Georgia;
         line-height: 1.1em;
         font-weight: bold;
         text-shadow: 0 1px 0 white;
         font-size: 22px;
         letter-spacing: 1px;
         background: #ffffff;
         width:auto;
       }
       #articoli-simili a{
         color:#f95b5b;
         font-weight: bold;
       }
       #articoli-simili a:hover {
         background-color: rgba(21,149,134,0.7);
         color:#ffffff;
         font-weight: bold;
         text-decoration: initial;
       }
     </style>
     <script type='text/javascript'>
       //<![CDATA[
       var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZn6KM7QyL21_P2U9Kqjj84Pa2XT9V4SZDmMkldHNfWHxk9mj2mOKuuAaP2ukUt60_lIdxEIewKo_Wj7ZWfKsl8fYfH3YjNnXYJQubO98AcjedWrfff_spuOfx5LOdWAe65q3BGKOP96n/s140/default-image.png";
       var maxresults=6;
       var splittercolor="#ffffff";
       var relatedpoststitle="ARTICOLI SIMILI";
       var relatedTitles=new Array();
       var relatedTitlesNum=0;
       var relatedUrls=new Array();
       var thumburl=new Array();
       function art_corr_min(json){
         for(var i=0;i<json.feed.entry.length;i++){
           var entry=json.feed.entry[i];
           relatedTitles[relatedTitlesNum]=entry.title.$t;
           try{
             thumburl[relatedTitlesNum]=entry.media$thumbnail.url}
           catch(error){
             s=entry.content.$t;
             a=s.indexOf("<img");
             b=s.indexOf("src=\"",a);
             c=s.indexOf("\"",b+5);
             d=s.substr(b+5,c-b-5);
             if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
               thumburl[relatedTitlesNum]=d}
             else{
               if(typeof(defaultnoimage)!=='undefined'){
                 thumburl[relatedTitlesNum]=defaultnoimage}
               else{
                 thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZn6KM7QyL21_P2U9Kqjj84Pa2XT9V4SZDmMkldHNfWHxk9mj2mOKuuAaP2ukUt60_lIdxEIewKo_Wj7ZWfKsl8fYfH3YjNnXYJQubO98AcjedWrfff_spuOfx5LOdWAe65q3BGKOP96n/s140/default-image.png"}
             }
           }
           if(relatedTitles[relatedTitlesNum].length>75){
             relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,75)+"..."}
           for(var k=0;k<entry.link.length;k++){
             if(entry.link[k].rel=='alternate'){
               relatedUrls[relatedTitlesNum]=entry.link[k].href;
               relatedTitlesNum++}
           }
         }
       }
       function removeRelatedDuplicates_thumbs(){
         var tmp=new Array(0);
         var tmp2=new Array(0);
         var tmp3=new Array(0);
         for(var i=0;i<relatedUrls.length;i++){
           if(!contains_thumbs(tmp,relatedUrls[i])){
             tmp.length+=1;
             tmp[tmp.length-1]=relatedUrls[i];
             tmp2.length+=1;
             tmp3.length+=1;
             tmp2[tmp2.length-1]=relatedTitles[i];
             tmp3[tmp3.length-1]=thumburl[i]}
         }
         relatedTitles=tmp2;
         relatedUrls=tmp;
         thumburl=tmp3}
       function contains_thumbs(a,e){
         for(var j=0;j<a.length;j++){
           if(a[j]==e){
             return true}
         }
         return false}
       function printRelatedLabels_thumbs(current){
         var splitbarcolor;
         if(typeof(splittercolor)!=='undefined'){
           splitbarcolor=splittercolor}
         else{
           splitbarcolor="#ffffff"}
         for(var i=0;i<relatedUrls.length;i++){
           if((relatedUrls[i]==current)||(!relatedTitles[i])){
             relatedUrls.splice(i,1);
             relatedTitles.splice(i,1);
             thumburl.splice(i,1);
             i--}
         }
         var r=Math.floor((relatedTitles.length-1)*Math.random());
         var i=0;
         if(relatedTitles.length>0){
           document.write('<h2>'+relatedpoststitle+'</h2>')}
         document.write('<div style="clear: both;"/>');
         while(i<relatedTitles.length&&i<20&&i<maxresults){
           document.write('<a style="text-decoration:none;padding:5px;float:left;');
           if(i!=0)document.write('border-left:solid 0.5px '+splitbarcolor+';"');
           else document.write('"');
           document.write(' href="'+relatedUrls[r]+'"><img style="width:80px;height:80px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:80px;padding-left:3px;height:136px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: bold; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
           i++;
           if(r<relatedTitles.length-1){
             r++}
           else{
             r=0}
         }
         document.write('</div>');
         relatedUrls.splice(0,relatedUrls.length);
         thumburl.splice(0,thumburl.length);
         relatedTitles.splice(0,relatedTitles.length)}
       //]]>
     </script>
     <!--Articoli Simili con Miniature Fine-->

Si salva in Tema una prima volta. L'aspetto del blog non muterà, perché è stato aggiunto solo il javascript e non l'HTML. Il prossimo passaggio sarà quello di inserire il codice HTML nella versione desktop.

INSTALLARE IL WIDGET NELLA VERSIONE DESKTOP

Si va su Tema -> Modifica HTML e, con Ctrl+F, si cerca la riga

<b:includable id='post' var='post'>

Se il codice fosse nascosto, si clicca sulla freccetta nera posta a sinistra per visualizzarlo. Si scorre il codice verso il basso, fino a trovare la terza sezione del footer che ha questa riga di codice

<div class='post-footer-line post-footer-line-3'>

Non cercate di trovare subito questa riga perché ce ne potrebbero essere più di una, come potrebbe pure non esserci, e allora l'ultima sarà quella con il 2 al posto del 3 . Si scorre il codice ancora verso il basso, fino a trovare il tag </b:includable> che è quello conclusivo della sezione desktop, come mostrato nello screenshot

Sopra a tale riga si incolla questo nuovo codice

<!-- Articoli Correlati con Miniature Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='articoli-simili'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=art_corr_min&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- Articoli Correlati con Miniature Fine -->

Si salva il Tema. Se adesso si apre un qualsiasi post che abbia una etichetta in comune con altri, verrà visualizzato il widget con un aspetto simile al primo screenshot di questo post. Se state facendo dei test su un blog di prova, assicuratevi che il post, che avete aperto per testare il codice, abbia almeno altri 6 articoli con le stesse etichette.

INSTALLARE IL WIDGET NELLA VERSIONE MOBILE

Si torna su Tema -> Modifica HTML e si cerca, con Ctrl+F , questa riga di codice

<b:includable id='mobile-post' var='post'>

Si clicca sulla freccetta nera posta sulla sinistra, se il codice di questa sezione fosse nascosto. Si scorre il codice verso il basso fino a trovare questa riga

<div class='post-footer-line post-footer-line-2'>

che è quella sotto la quale va incollato lo stesso codice precedente in questo modo

Si salva il modello per l'ultima volta. Con lo strumento Quirktool Screenfly, si apre una pagina del nostro sito, al cui URL sia stato aggiunto ?m=1, per controllare che anche da mobile venga visualizzato il gadget.

Gli screenshot si riferiscono a una scelta di mostrare 6 post correlati sia su mobile sia su desktop.

PERSONALIZZAZIONI PIÙ RILEVANTI

Il gadget può essere personalizzato nei colori e in altri parametri:

1. Lo sfondo della scritta del titolo del widget in background: #ffffff;
   
2. Il colore della scritta del titolo del widget in color:#f95b5b;
   
3. La famiglia di caratteri della scritta su font-family:Georgia;
   
4. La dimensione del carattere del titolo dei post font-size: 18px;
   
5. La distanza tra le varie lettere del titolo del widget su letter-spacing: 0.2px;
   
6. La configurazione del grassetto con il tag font-weight: bold;
   
7. Il colore del titolo e il grassetto dei post su color:#f95b5b; font-weight: bold;
   
8. Lo sfondo e il colore del titolo al passaggio del mouse su background-color: rgba(21,149,134,0.7); color:#ffffff; font-weight: bold; - Ricordo che si può passare facilmente dalla notazione dei colori in HEX a quella in RGB.Si può consultare il post sui codici dei colori
   
9. L'immagine di default quando non siano presenti nel post su no-image.png. L'URL colorato di rosso va sostituito in due distinte occorrenze del codice
   
10. Il colore di sfondo tra le varie miniature in var splittercolor="#ffffff"; in 2 occorrenze
    
11. Il numero delle miniature da visualizzare var maxresults=6;. Il numero è da configurare anche nel secondo codice oltre che nel primo
    
12. Il titolo del widget in var relatedpoststitle="ARTICOLI SIMILI";. Da considerare che un titolo troppo lungo potrebbe mostrarsi su due righe in alcuni smartphone.
    
13. La dimensione delle miniature in img style="width:80px; height:80px
    
14. L'altezza dello spazio del titolo del post in height:136px;
    
15. Il grassetto del titolo del post font-weight: bold;
    
16. La dimensione dei caratteri del titolo dei post in font-size: 12px;
17. La lunghezza massima del titolo è di 75 caratteri per poi essere tagliato.
18. Per usare il corsivo per il titolo del widget o dei post può inserire nel relativo CSS la riga font-style: italic; da sola o al posto di font-style: normal;.

Si possono anche mostrare un numero diverso di elementi nel desktop e nel mobile. Non sempre funziona, ma nel secondo codice per mostrare il widget anche da mobile, si mette per esempio max-results=3 al posto di max-results=6, per visualizzare solo tre miniature da mobile.

Per essere sicuri di visualizzare un numero diverso di miniature da desktop e da mobile, si incolla il primo codice due volte nella stessa posizione. La prima volta lo si incolla tra queste due righe 

<b:if cond='!data:blog.isMobile'>
  ... Primo Codice ...
</b:if>

e si imposta il numero degli elementi visualizzabili da desktop, p.e. var maxresults=6;. Subito sotto si incolla un'altra volta lo stesso codice variando solo il numero degli elementi da mostrare tra quest'altre due righe

<b:if cond='data:blog.isMobile'>
  ... Primo Codice ...
</b:if>

Se si modifica p.e. la riga precedente con var maxresults=3;, nella versione mobile verranno visualizzati solo tre elementi del widget. Ricordo di modificare il numero anche nel secondo codice in modo coerente.