You are here

Bottoni di condivisione fluttuanti e responsive con Drupal

Inviato da giovanninews on Ven, 24/04/2015 - 21:59

Responsive Share Button I bottoni di condivisione social rappresentano un aspetto importante del sito web perché ne incrementano la popolarità.

Esistono innumerevoli plugin e moduli per i bottoni di condivisione, per i vari cms tra cui anche Drupal, ma anche semplici pulsanti messi a disposizione dai social e che possono essere applicati facilmente al sito web, anche per chi non usa cms.

Sommario

I bottoni di condivisione social sono veramente utili ?

Da ciò che dicono alcuni SEO (esperti di posizionamento per i motori di ricerca) la quantità dei links al sito web presenti nei social network (quindi ottenuti anche mediante i bottoni di condivisione) cominciano ad essere un timido fattore di posizionamento del sito per le SERP dei motori di ricerca.

Questo potrebbe anche essere, anche se i links provenienti dai social hanno tutti la caratteristica di essere link nofollow; dovrebbero comunque essere sempre link naturali e non ottenuti in modo artificioso, che, altrimenti, farebbero scattare penalizzazioni per il tentativo di manipolare il naturale PageRank del sito web.

E' invece sicuro che il numero di accessi al sito é un fattore di posizionamento; quindi gli accessi ottenuti dai social migliorano il posizionamento ed i link nei social, se naturali, sono un indiretto fattore di posizionamento.

Quindi ottenere link sui social ha dei punti a favore, ma i plugin o i moduli utilizzati per ottenerli non sono tutti uguali; ci sono dei prezzi da pagare. Il prezzo che in genere si potrebbe pagare per implementare sul sito web dei bottoni di condivisione potrebbe impattare su questi tre fattori:

  • le prestazioni del sito web
  • la privacy dell' utente
  • la sicurezza del sito web

Bottoni di condivisione social e prestazioni del sito

In genere i plugin per i bottoni di condivisione social aumentano il tempo di accesso alla pagina web.

Le prestazioni del sito web, al contrario dei links ottenuti dai social attraverso i bottoni di condivisione, sono sicuramente un fattore di posizionamento.

I plugin per i bottoni di condivisione, quelli fatti bene, portano ad aumentare il tempo di accesso alla pagina web di almeno un secondo; i bottoni di condivisione sviluppati male aumentano il tempo di accesso alla pagina di due o tre secondi.

Il tempo di accesso alla pagina risulterà più o meno aumentato perchè nella pagina ci saranno più CSS, più javascript, più risorse interne ed esterne da richiamare, più immagini.

I plugin meglio sviluppati, al fine di non impattare troppo sulle prestazioni del sito, adottano tecniche sofisticate quali lo Sprite CSS.

Con lo Sprite CSS, le immagini dei bottoni di condivisione, che hanno un numero variabile basato sui social che si vuole promuovere, sono raggruppate in una unica immagine che contiene tutte le immagini, e attraverso un file CSS, si punta la porzione dell' immagine che contiene il pulsante social a cui si fa riferimento.

Lo Sprite CSS abbassa il numero delle richieste http, ottimizza il CSS in più utilizzato ed in genere ha un peso inferiore per la pagina.

Il plugin dei bottoni di condivisione che usa la tecnica dello Sprite CSS, pur essendo il migliore perchè non impatta molto sulle prestazioni, impatterà su altri fattori.

Bottoni di condivisione social e privacy utente

I plugin per i bottoni di condivisione, generalmente sviluppati da aziende e messi a disposizione per i vari cms, contengono in genere chiamate all' azienda che da il servizio di condivisione; quindi il plugin per i bottoni di condivisione, effettuerà in genere chiamate esterne al sito web che si sta visitando.

Le chiamate esterne, oltre ad avere un impatto sulle prestazioni, impatteranno anche sulla privacy del sito web e dell' utente che usa il sito, perchè, probabilmente, un nuovo cookie sarà trasferito; è quello che viene definito cookie di "terze parti" e che potrebbe anche essere un cookie di "profilazione". Il cookie servirà  almeno a non permettere che lo stesso utente esprima più di un voto.

Bottoni di condivisione social in CSS e HTML

Per mantere le prestazioni del sito ad un livello buono e per non impattare sulla privacy del sito web ed in particolare sulla privacy dell' utente, alcuni sviluppatori hanno ben pensato di offrire bottoni di condivisione social in CSS e HTML. Naturalmente si doveva rinunciare al conteggio dei voti per non effettuare chiamate esterne.

Un ottimo esempio è quello dei bottoni di condivisione in CSS e HTML su GitHub. Una buona recensione di questi bottoni di condivisione social venne fatta tempo fa su Tip and Tricks.

Questi bottoni possono essere implementati su qualsiasi piattaforma, ma, in genere, per farlo, è necessario un minimo di conoscenza della piattaforma, di CSS, di HTML e di PHP.

Bottoni di condivisione social, sicurezza del sito web e Drupal

Mentre in Drupal 6 si aveva un ottimo modulo Service_Links che rispettava sia le prestazioni che la privacy, in Drupal 7 il modulo Service_Links appare diverso.

In Drupal 7 era per me possibile implementare i bottoni di condivisione in CSS e HTML di GitHub soltando attivando il modulo del core PHP Filter.

Tramite il filtro PHP, gli utenti con il permesso appropriato possono includere codice PHP personalizzato all' interno di una pagina del sito. Pur essendo una caratteristica potente e flessibile se usata da utenti fidati dotati di esperienza con PHP, è un rischio significativo e pericoloso nelle mani di un utente malevolo.

Perfino un utente fidato potrebbe accidentalmente compromettere il sito immettendo codice PHP malformato o errato.

Pertanto la possibilità di usare codice PHP dovrebbe essere consentita solo agli utenti più fidati e tutto il codice aggiunto andrebbe attentamente esaminato prima di essere usato.

Inoltre, se il modulo PHP per qualsiasi motivo viene disabilitato, qualsiasi contenuto che utilizzava il filtro PHP, sarà visibile come un normale testo. Questo potrebbe comportare un rischio se nel codice php sono presenti informazioni sensibili.

Bravi sviluppatori Drupal potrebbero farlo anche senza attivare il filtro PHP.

Con Drupal 7, non trovando più moduli che ritenevo adatti, non ho più utilizzato i bottoni di condivisione social per quasi due anni.

Un altro modo per implementare i bottoni di condivisione in Drupal 7 utilizzando solo CSS e HTML ci viene descritto su FiNeXdesign utilizzando il modulo Display Suite.

Un modulo responsive fluttuante per i bottoni di condivisione in Drupal 7

Per Drupal 7, da un pò di tempo esiste un modulo responsive fluttuante per i bottoni di condivisione social. Il modulo si chiama Responsive Share Buttons ed è particolarmente interessante per diversi aspetti, pur se fino a qualche giorno fa è stato minimamente mantenuto:

  • é responsive (con i dispositivi mobili viene visualizzato alla fine del contenuto)
  • é fluttuante (con i desktop segue lo scroll della pagina, quindi si evita la scelta del dove piazzarli che, se non fluttuante, in alcuni casi viene posizionato due volte, all' inizio ed alla fine dell' articolo, per invogliare la condivisione).

Il modulo Responsive Share Buttons é presente in due versioni, una di produzione ed una di test.

La versione di produzione, scarsamente mantenuta da Tim Wooten, è poco installabile in quanto scarsamente configurabile. Il limite più grosso deriva dal fatto che il modulo, una volta installato, é visibile su qualsiasi percorso del sito web.

Una decina di giorni fa, il bravo Malcolm Young, si offre come co-mantainer del modulo ed interviene con ottime patch per il modulo di produzione ed implementate sulla versione di sviluppo.

Quindi la situazione attuale é che il modulo Responsive Share Buttons 7.x-1.2 (la versione di produzione) funziona correttamente (con la visibilità del blocco su percorsi selettivi) se a questa versione si aggiungono le patch di Malcolm Young indicate.

errore visualizzazione pulsanti Malcolm, dopo aver messo le patch nella versione di sviluppo (la 7.x-1.x-dev), vuole fare di più, implementando sia lo Sprite CSS che le indicazioni di Jonathan Suh sui bottoni di condivisione social più responsabili e veloci (riducendo l' uso di Javascript e generando i collegamenti con i social in PHP).

Dovevo intervenire io per complicare la vita a Malcolm; in pratica alla versione di sviluppo di Responsive Share Buttons (la 7.x-1.x-dev) mancano un paio di cose per essere perfetta:

  1. la visualizzazione corretta dei pulsanti nei siti mobili (visibile in figura)
  2. la possibilità di ordinare i pulsanti (caratteristica meno importante).

Allego di seguito una immagine realizzata con GTmetrix e che contiene il report comparativo  per la stessa pagina, ottenuto nei seguenti tre casi:

report comparativo sito web

  1. pagina senza il modulo Responsive Share Buttons
  2. pagina con il modulo Responsive Share Buttons 7.x-1.2 + patch di Malcolm (visibillità su percorsi selettivi)
  3. pagina con il modulo Responsive Share Buttons 7.x-1.x-dev con tutte le patch di Malcolm (purtroppo anche con la visualizzazione errata dei bottoni); in quest' ultimo caso il test é stato effettuato sul sito di sviluppo che é la copia del sito di produzione con l' unica differenza che manca il javascript di analytics.

Analizzando l' immagine e trascurando il tempo di accesso che genera differenze soprattutto in base al First Byte Time (il tempo di risposta del server che non é sempre uguale), possiamo dire:

  1. I valori di PageSpeed e Yslow restano pressoché uguali per il primo e secondo caso, mentre aumentano notevolmente nel terzo caso, dovuto all' assenza del javascrpt di analytics
  2. Il totale della pagina nel secondo caso aumenta di 7Kb dovuti alle immagini dei bottoni di condivisione, é quasi identico tra il primo ed il terzo caso, addirittura minore, dovuto alla presenza dell' immagine sprite in più ma anche all' assenza del javascript di analytics
  3. Il totale delle richieste http nel secondo caso é maggiore di 6 unità dovute alla presenza dei 6 bottoni di condivisione social, mentre nel terzo caso le richieste sono uguali al primo in quanto vi é una immagine sprite in più e l' analytics in meno.

Conclusioni sul modulo Responsive Share Buttons per Drupal 7

L' implementazione sul sito web del modulo Responsive Share Buttons per Drupal 7 (7.x-1.2 + patch di Malcolm relative alla visibilità selettiva del blocco) determina un piccolissimo decremento prestazionale, permette la facile condivisione sui social, rispetta la privacy del sito web e dell' utente.

La correzione del bug presente nel modulo di sviluppo permetterebbe di avere dei bottoni di condivione social con un impatto prestazionale quasi impercettibile e con tutti i vantaggi già detti.

Aggiornamento del 19/11/2015
La modifica odierna apportata da Malcolm Young alla versione 7.x-1.x-dev del modulo di condivisione social Responsive Share Buttons per Drupal permette di usare appieno la versione di sviluppo del modulo al posto della versione 7.x-1.2 + patch.