Come mostrare il widget degli Articoli Simili con Miniature nella versione mobile e desktop di Blogger.

L'operazione già utilizzata per le icone di condivisione sui social network vediamo come può essere fatta anche con quelli che vengono chiamati gli Articoli Simili o Correlati. Cercheremo cioè di utilizzare gli stessi CSS e javascript per mostrare il widget degli Articoli Correlati con Miniature sia nella versione desktop sia nella versione mobile di Blogger.

Il gadget degli Articoli Simili per Blogger mostra una serie di post che abbiano almeno una etichetta in comune con l'articolo visualizzato. Tale gadget quindi verrà mostrato solo negli articoli e non nella Home, nelle pagine delle etichette o in quelle di archivio. Inoltre se un articolo ha delle etichette non presenti in altri post o in numero non sufficiente verrà mostrato un numero di post inferiore a quello desiderato. In ogni caso la scelta dei gadget fai da te come questo è sicuramente da preferire a quelli offerti da tool quali LinkWithin che provocano un sacco di problemi e disservizi.

Widget degli Articoli Simili per Blogger (Related Posts).

Il widget degli Articoli Simili è presente in moltissimi siti e mostra ai lettori gli articoli che abbiano attinenza con la pagina che si sta leggendo. Per selezionare i post simili a quello dato ci si può rivolgere a un servizio esterno tipo LinkWithin oppure con un opportuno script scegliere i post che abbiano almeno una etichetta simile con quello visualizzato. 

In questa seconda ipotesi si può optare per un semplice elenco di titoli dei post, oppure scegliere di mostrare oltre ai titoli anche le miniature o ancora decidere di visualizzare anche gli snippet degli incipit dei post stessi. Il widget che vado a illustrare è probabilmente il più ricco di quelli che ho presentato sui Related Posts. Infatti ciascun Articolo Correlato viene mostrato insieme alla miniatura e allo snippet in un elenco verticale che riempie la parte bassa della pagina. Questa opzione è utile quando si vuole avere un impatto visivo piuttosto forte nei confronti dei lettori come nel caso dei blog di cucina che per esempio sotto alla presentazione di una ricetta di un primo piatto si visualizzeranno tutti gli elementi sufficienti per valutare altre ricette simili come immagini, titoli e testo

Widget degli Articoli Simili e dei Bottoni Sociali per Blogger.

Gli obiettivi di un blogger che non vende niente nel suo sito sono quelli di avere il maggior numero di visitatori, di farli restare il più possibile a leggere i suoi contenuti e di indurli a condividere sui social network il maggior numero di pagine. Per raggiungere questi risultati bisogna innanzitutto scrivere contenuti validi ma questo non basta visto che bisogna prestare grande attenzione anche ai fattori di ranking per un posizionamento migliore nei risultati di ricerca.

Una ulteriore spinta in questo senso può essere data da opportuni widget che mostrino ai lettori il meglio della nostra produzione insieme a una certa facilità della sua condivisione nei social network. Adesso vado a illustrare quello che si potrebbe definire come un widget misto che mostra gli Articoli Simili a quello visualizzato e i bottoni di condivisione su Facebook, Twitter e Google+. Ricordo che gli Articoli Simili o Correlati o Related Posts non sono altro che altri post che condividano con quello aperto almeno una etichetta. I bottoni di condivisione sociale sono invece quei pulsanti che aprono una finestra popup che permette di condividere il post visualizzato su Facebook o su Google+ oppure di twittarlo ai follower di Twitter.

Widget dei titoli e delle miniature degli articoli simili o correlati alla fine del post in Blogger.

La frequenza di rimbalzo o bounce rate è la percentuale dei lettori che abbandonano un sito web nel giro di 30 secondi dopo averne scorso solo i primi contenuti. In realtà su Google Analytics possiamo avere dei dati ancora più dettagliati e vedere quanti sono coloro che ci lasciano dopo 5, 10 o 20 secondi. Avere una frequenza di rimbalzo bassa per un sito significa essere maggiormente considerato dai motori di ricerca che lo premieranno con un migliore posizionamento.

Sono molti i fattori che incidono in tal senso a cominciare dall'incipit del post, dalla velocità di caricamento del sito e ovviamente dalla bontà dei contenuti pubblicati. Un aiuto importante lo possono dare i widget che mostrano gli Ultimi Post del blog, gli Articoli più Popolari e quello degli Articoli Simili. In riferimento a quest'ultimo gadget ne ho già illustrate diverse versioni e adesso vado a presentarne un'altra per tutti i blog di Blogger anche con dominio personalizzato visto che non ci sono javascript esterni. Alla fine del post si visualizzeranno i titoli e le miniature di altri articoli che abbiano almeno una etichetta in comune con il post che è stato aperto

Widget degli Articoli Simili con Miniature per domini personalizzati.

Ho recentemente presentato una nuova versione il gadget degli Articoli Correlati con Miniature per siti sulla piattaforma Blogger. Tale widget ha un javascript esterno nella fattispecie caricato su Google Sites. Se si possiede un nostro dominio acquistato da Blogger, il gadget non funzionerà perché i file caricati su Google Sites sono attivi solo nei domini di Google. I siti del tipo nomeblog.blogspot.com sono infatti nei server dei Google mentre quelli www.mioblog.com non lo sono anche se su Blogger.

In questi casi bisogna caricare i file esterni, che possono essere javascript, CSS o XML, nella cartella Public di Dropbox, su Google Code oppure su un sito di nostra proprietà. Due giorni fa mi è stato riferito da Camilla che è stato pubblicato un post su Google Plus che sembra possa permettere di usare Google Drive come hosting di file. Al momento nel mio account questa possibilità ancora non esiste neppure se configuro nelle impostazioni la lingua inglese. Vi riferirò se questa nuova funzione dovesse realmente concretizzarsi. Quindi se si ha un blog in un dominio personalizzato rimane solo la possibilità di caricare il file javascript da qualche altra parte.

Widget degli Articoli Simili o Correlati con Miniature per Blogger.

Vado a presentare una nuova proposta per il widget gli Articoli Simili da visualizzare alla fine dell'articolo. E' un gadget che solitamente si inserisce nel modello perché se installato con un gadget HTML/Javascript si visualizzerebbe dopo l'area del post e quindi anche dopo gli eventuali commenti che ha ricevuto l'articolo. Ho da poco presentato gli Articoli Simili con Miniature e Tooltip che hanno ricevuto un discreto successo. Chi preferisce una scelta più minimalista senza immagini può optare per questa versione di Articoli Correlati che ha comunque un grosso impatto visivo.

Con questa nuovo widget si vengono a visualizzare le miniature relative ai post simili insieme anche al titolo dell'articolo relativo. Rispetto al gadget con il tooltip non occorre che il lettore ci passi sopra con il mouse per leggerne il titolo senza perdere il valore aggiunto della visualizzazione delle miniature della prima immagine presente nel post. Per i pochi che non lo sapessero ricordo che si definiscono simili o correlati due articoli che abbiano almeno una etichetta in comune. Naturalmente cliccando sul titolo o sulla miniatura apriremo il post a cui si riferiscono.

Widget degli Articoli Simili con Miniature e Tooltip.

Due articoli si definiscono simili o correlati se hanno in comune almeno una etichetta. Mostrare in modo casuale alla fine del post un elenco più o meno lungo di post che condividano una etichetta con quello che si sta visualizzando può invogliare il visitatore a cliccarci sopra per consultarli. Ho già presentato diverse versioni di Articoli Simili. Ne ricordo una minimalista che mostra solo il titolo dei post e una esteticamente più valida che mostra oltre ai titoli anche le miniature.

Vado adesso a presentare un nuovo gadget da inserire alla fine degli articoli che mostra in orizzontale un certo numero di miniature con il link agli articoli simili a quello che si sta visualizzando.

Widget degli Articoli Simili o Correlati per Blogger funzionante con tutti i browser.

Il problema maggiore non è tanto quello di creare dei widget quanto quello di fare in modo che il gadget risulti visibile nello stesso modo con tutti i browser. Soprattutto con Internet Explorer ci sono spesso delle difficoltà insormontabili che speriamo diminuiscano con la nuova versione IE9, ma ci credo poco. Sono un paio di giorni che mi sono incaponito con il widget degli Articoli Simili o Related Posts, se vogliamo usare una espressione anglosassone.
Dopo un primo tentativo, con il widget risultato non visibile con IE e dopo una seconda versione, che aveva problemi anche con Firefox, ecco che finalmente ho trovato la quadra, come direbbe un conosciutissimo politico lombardo. La visualizzazione del gadget non è perfettamente identica con tutti e tre i principali browser. Con Internet Explorer vengono mostrati più articoli correlati che con Chrome e Firefox; comunque funziona anche con IE, ad abundantiam. Non chiedetemi per quale ragione con IE si vedono più post perché non la so. Ecco come sarà l'aspetto del widget dopo l'installazione.

Widget degli Articoli Simili per Blogger.

Dopo aver presentato il gadget degli Articoli Correlati ho provato a installarlo in questo blog e, con sorpresa, ho visto che non funzionava. Come test avevo usato un template del Designer Modelli e lo avevo provato solo uno dei vecchi template. Mi sono quindi messo all'opera per risolvere la questione e per rendere il widget esteticamente ancora più apprezzabile. Coloro che avessero quindi delle difficoltà di installazione possono seguire questi passaggi invece del tutorial di cui al post citato. La differenza sostanziale sta nell'inserire i CSS direttamente nella sezione <b:skin> invece di inglobarli in <head> dentro il tag <style>. Con questo metodo è stato infatti possibile visualizzare correttamente il widget.

Si va su Design > Modifica HTML e si salva il modello completo. Si mette la flag su espandi modelli widget e si cerca la riga ]]></b:skin>. Immediatamente sopra si incolla questo codice 

/* Articoli Correlati Inizio */
#articoli_correlati { float : left; width : 750px; margin-top:20px; margin-left : 5px; margin-bottom:15px; font : 11px Trebuchet MS; 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXNgaL68ZQOJxp0sWcxEz06yygqcvKhKHIhAO2rsg_AYwg6BrlkI04dWjUPm56NplVyOAD4nynGdT9ZtdwZbTxtUDgu0KPl6h92Pj41vMySjTBwsdD7FOG2rjpiyx25IsHk8yKad3xM8/) 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 #003366; }
/* Articoli Correlati Fine */

Per le personalizzazioni vi rimando all'articolo precedente ricordando che

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtMzRY3TN3ZoIXAM-LdmKUUbimEgAUWHnN_TWj5a1G_LTpd6PdGW29Vgq53q6JGZptjnugIFFVzoj-ZHaXlA_ORNjXqJYfSSdcDsKs2jWSLP6i0RlgrhyKtUGKkLAzOWafu40GwSf4d0Y/&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.