Un eccezionale widget per gli articoli correlati

La visualizzazione degli articoli correlati (related posts), solitamente posti alla fine di ogni articolo, contribuisce ad aumentare il numero di pagine visualizzate (page views) e diminuisce la percentuale di abbandoni (bounce rate) del vostro blog o sito.
La visualizzazione dei post correlati può essere realizzata anche manualmente,  inserendo al termine di un articolo dei link, con o senza miniature, che rimandano ad altri vostri articoli, di solito collegati (ma anche no) da una o più parole chiave all'articolo che state scrivendo. Questo metodo è sicuramente semplice e forse il più accurato ma richiede molto tempo e costanza e solo pochi, credo, lo usano in maniera sistematica.

Ci sono alcuni siti che offrono dei widget gratuiti che permettono di realizzare, facilmente, la visualizzazione degli articoli correlati, con o senza miniature (thumbnails)

Uno dei più diffusi è Linkwithin, semplicissimo da configurare e che non richiede registrazione, che ho utilizzato per un po' fino al 2013, quando, leggendo del fatto che questo widget dirottava parte del traffico verso il suo sito (cosa che non ho personalmente verificato), ho adottato il widget di Nrelate, che ha funzionato abbastanza bene fino al 31 dicembre 2014, data in cui, come da loro in precedenza annunciato, è stato dismesso.

Io me ne sono reso conto solo ieri ed in un primo momento ho provato ad utilizzare il widget di Outbrain: è necessaria la registrazione, ma ci sono poche opzioni da configurare.
L'ho installato e poi subito rimosso perché continuava a non mostrare le miniature: forse avrei dovuto aspettare, ma non ho avuto abbastanza pazienza, per cui mi sono messo alla ricerca di un altro widget alternativo.

Ne ho prima trovato uno che si chiama "Related Posts Widget for Google Blogger v2.0" e non c'è stato verso di farlo funzionare, forse perché un po' datato, poi finalmente sono arrivato ad un fantastico sito che si chiama Code It Pretty  sul quale ho trovato questo ottimo widget, A New Related Posts Gallery for Blogger,  per Blogger / Blogspot

Si deve modificare direttamente il template, ma le istruzioni, in inglese, sono chiarissime e ci sono molti parametri che si possono impostare, chiaramente descritti dall'autore.
Almeno sul mio blog il codice ha funzionato al prima copia incolla. Poi ho fatto qualche piccolo aggiustamento.

Ne potete vedere uno dei possibili aspetti nell'immagine di testata e lo potete ritrovare alla fine di ogni mio post.

L'unico difetto/limite deriva dal massimo di 500 post per feed di Blogger e quindi il plugin cerca gli articoli collegati fra gli ultimi 500 (o un numero minore se di nostra preferenze per sfruttare di più l'attualità degli articoli più recenti.

Volevo sottolineare che il codice fornito dal sito Code It Pretty non contiene riferimenti impliciti od espliciti al sito stesso, né link né pubblicità nascoste.

Commenti

  1. ciao complimenti per il post, ho seguito le istruzioni della pagina ed ho installato il widget sul mio blog, solo che per alcuni post non ci sono articoli simili in quanto alcune etichette sono singole ed essendo random la scelta dell'etichetta può capitare che la piattaforma ne scelga una singola e quindi non mi appare nessun post correlato; inoltre la scritta che accompagna gli articoli simili è troppo piccola, mi riferisco al titolo che si può modificare nelle opzioni prima della comparsa dei post correlati; potresti aiutarmi a risolvere questi problemi? grazie ed ancora complimenti :)

    RispondiElimina
    Risposte
    1. Ciao! Grazie per i complimenti che andrebbero fatti alla ragazza che ha scritto il codice di "Code It Pretty". Per quanto riguarda la prima domanda mi sono posto anche io il problema ma modificare il codice non è banale. Una possibile soluzione sarebbe quella di utilizzare meno etichette diverse. Per quanto riguarda il formato del titolo, anche qui per una risposta precisa devo prima trovare il tempo di fare delle prove perché la variabile "relatedTitleText" è inserita in un ciclo condizionale. Per ora mi sono limitato a fare una prova che potrebbe andar bene: nella parte finale del codice le due occorrenze della data stringa sono comprese tra due tag di header h5 e /h5. Modificando il 5 in 4, ad esempio, e aggiungendo un br/ dopo il secondo /h5 si ottiene il risultato ottenuto. Per un miglior controllo andrebbe aggiunta una classe ...
      Ma ho bisogno di trovare il tempo di fare un prova fatta meglio di questa fatta ora al volo .... Inoltre l'editor dei commenti è limitato. Se faccio una miglioria sostanziale forse è meglio utilizzare un nuovo post per spiegarla, almeno "produco" qualcosa :)

      Elimina
    2. Per ora ho applicato una piccola modifica al mio blog come puoi vedere sulla grandezza del titolo. Ho modificato h5 in h4 aggiungendo una classe. Puoi vedere il codice guardando il sorgente del mio blog - il codice è verso fine pagina.

      Elimina
    3. ciao ho cercato di risolvere sostituendo con h1 e la scritta viene bella grande e visibile, a prova di non vedente ;)
      quindi diciamo che questo problema è risolto, resta la questione delle etichette; ti spiego io ho un blog in cui alcune etichette mi sono necessarie e non posso diminuirle molto, anche se le ho ridotte all'osso; il fatto è che quando parlo di un determinato argomento con apposita etichetta, essendo la selezione degli articoli simili random, capita che mi selezioni una singola etichetta che magari è collegata ad un solo altro post e mi saltano tutta una serie di post correlati che mi garantirebbero qualche visualizzazione in più; la cosa che mi servirebbe sarebbe avere una struttura del codice dove tutti i post correlati siano visibili in funzione di tutte le etichette, ovviamente in base al numero massimo di post impostato nelle opzioni che so modificare; in questo modo potrei avere una visualizzazione di post su vari argomenti in funzione delle etichette e non random col rischio di perdere negli articoli simili tanti post correlati; spero di essere stato chiaro e grazie ancora per la dritta, spero tu mi possa dare una mano ;) grazie e complimenti ancora :)

      Elimina
    4. Ciao Carmine, quello che chiedi mi sembra troppo complicato da gestire, anche come logica. Io avevo pensato a due soluzioni. La più semplice prevede che se non ci sono altri post per l'etichetta selezionata si indica un'etichetta di default nelle opzioni, l'altra ipotesi conta i post da un'etichetta a caso e se sono meno del numero minimo aggiunge un'altra etichetta a caso. Il problema è che io conosco poco jquery ed in generale non faccio il programmatore se non occasionalmente modificando magari script già esistenti. Questa soluzione interessa anche me ma non se e quando sarò in grado di portarla avanti. Se te la cavi un po' con l'inglese prova a chiedere alla programmatrice che ha scritto l'articolo originale da cui ho preso il mio.

      Elimina
    5. ok grazie mille, proverò ;)

      Elimina
    6. Ciao!
      Le ho appena scritto ... :)
      Magari non rifarle la domanda nello stesso modo, o aggiungi che sei anche tu interessato

      Elimina
    7. si ho visto, le ho scritto pure io ;)

      Elimina
    8. ciao, una ragazza mi ha risposto, non è la titolare del sito, ma mi ha rimandato sul suo sito e mi ha dato un nuovo codice modificato; io l'ho inserito ma non succede nulla, non compaiono più gli articoli simili; on pratica non mi funziona, ma lei assicura che funziona; potresti cortesemente fare una prova anche tu in modo da capire se effettivamente funziona questo codice? magari sono io che sbaglio qualcosa; grazie mille in ogni caso :)

      Elimina
    9. ehi! a te hanno risposto a me no!!
      Ho guardato il tuo blog ma vedo che hai rimesso il codice vecchio.

      Non l'ho ancora provato ma sei sicuro di averlo personalizzato con l'url del tuo sito?

      Elimina
    10. La prima prova che ho fatto mi da lo stesso risultato che hai avuto: non viene visualizzato niente. Ora farò delle prove su di un altro blog .... visto che interessa anche a me!

      Elimina
    11. si sono certo di averlo messo bene, magari ho commesso qualche errore che non riesco a rilevare data la scarsa esperienza nelle modifiche dell'HTML, ma ho seguito alla lettera; resto in attesa di tue notizie in merito ;)

      Elimina
    12. Ciao Carmine, Sabrine è davvero molto gentile ma il suo codice, che aveva anche corretto continuava a non funzionare. Allora l'ho copiato direttamente dal suo blog con una minima modifica e ora su un mio blog di prova funziona, su questo non mi piace così com'è e proverò a cambiarlo, ma forse è proprio quello che cercavi.
      Allora il codice è questo https://copy.com/RG89sSLSDoRjeHkA
      Devi fare il download e poi copiare il contenuto del file js.
      (puoi farlo senza iscriverti a copy.com)
      Devi modificare l'url del blog ed è meglio cambiare defaulimage con una tua. Fammi sapere - Io l'ho provato su questo blog
      http://sdoppy.blogspot.it/

      Elimina
    13. niente da fare :) mi dà errore quando cerco di aprire il codice, lo scarico e non si apre :) ma si che lascio tutto come sta, questo codice modificato mi sa tanto di presa in giro ;)

      Elimina
    14. Mi spiace che pensi sia una presa in giro. Il file lo puoi aprire con un editor di testo, eventualmente cambia estensione. Bisogna anche aggiungere il riferimento alle librerie jquery. Appena ho un po' di tempo ti rispiego con più dettagli.

      Elimina
    15. ok perfetto, resto in attesa di qualche informazione più dettagliata :) potresti farci un articolo su, avrebbe molto successo, credo che molte persone siano interessate a questo tipo di funzione ;) grazie mille

      Elimina

Posta un commento

Ringrazio tutti quelli che vorranno lasciare un commento o che seguiranno o sottoscriveranno il mio blog. Il linea di massima cercherò sempre di rispondere.
Nel caso vogliate fare delle richieste o dei commenti off-topic ossia non collegati all'argomento dell'articolo, vi sarei grato se li postaste sulla pagina Facebook del blog. Grazie!

Post popolari in questo blog

Come mettere in pausa un video su Instagram - App Android