Pulsanti di condivisione: Facebook, X, WhatsApp e altri sette, senza script di terze parti, per PrestaShop

Il modo consueto costa la privacy ai tuoi clienti

La maggior parte dei moduli di condivisione incorpora i widget ufficiali dei social. Vuol dire che lo script di Facebook, quello di X e quello di LinkedIn vengono caricati sulle tue pagine, depositano i loro cookie e registrano chi è passato di lì, che qualcuno condivida qualcosa oppure no.

Il risultato è un banner di consenso, un paragrafo in più nell'informativa privacy, tre richieste a terze parti su ogni pagina e un negozio più lento. In cambio ottieni un pulsante di condivisione.

Questo modulo prende la strada opposta.

Non si carica niente finché qualcuno non clicca

Nelle tue pagine non c'è alcun codice dei social network. Non differito, non caricato in lazy loading, non nascosto dietro un avviso «clicca per caricare»: semplicemente non c'è.

I pulsanti sono normali pulsanti HTML. L'indirizzo di condivisione viene costruito da un nostro piccolo script, ospitato sul tuo server, nell'istante in cui qualcuno clicca, e solo allora si apre una finestra verso Facebook, X o WhatsApp. Prima di quel clic non c'è alcun URL di Facebook nella tua pagina a cui il browser possa preconnettersi, non c'è nulla che faccia trapelare un referrer e non c'è nulla da consentire.

Gli unici due file caricati sono i nostri, serviti dal tuo dominio.

Dieci posti dove condividere

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, e-mail, copia link e il menu di condivisione del telefono.

Otto sono attivi da subito. Telegram e Reddit ci sono quando li vuoi, disattivati per impostazione predefinita per non affollare la riga.

Due di questi non toccano affatto internet. Copia link mette l'indirizzo negli appunti. Condividi lo passa al menu di condivisione del sistema operativo, così sul telefono il tuo cliente si ritrova le sue app vere — quelle in cui scrive davvero alle persone — e non la tua ipotesi su quali contino.

Quel pulsante nativo compare solo sui browser che lo supportano, quindi a nessuno viene mai mostrato un pulsante che non fa nulla.

Deve somigliare al tuo negozio, non al 2013

Quattro impostazioni, e ogni combinazione funziona: pieno, contorno o minimale; arrotondato, cerchio o quadrato; tre dimensioni; e colori del brand o un'unica tinta neutra.

Fanno cinquantaquattro aspetti diversi, ancora prima di decidere se mostrare le etichette testo o un'intestazione. Le icone sono disegnate come SVG inline dentro la pagina — nessun font di icone da scaricare, nessuno sprite, nessuna CDN — quindi prendono il colore dal foglio di stile e restano nitide a ogni dimensione. C'è anche una modalità scura che segue l'impostazione di sistema del visitatore.

Un limite detto con onestà: i colori del brand sono quelli veri, fissi per ogni rete. La tua scelta è tra colori del brand e neutro, non un selettore di colore.

Sotto il prodotto, di lato o dove preferisci

Per impostazione predefinita compare una riga di condivisione sotto il prodotto. C'è anche una barra flottante — bordo sinistro o destro, su tutte le pagine o solo su quelle prodotto — spenta finché non l'accendi, e che sul telefono si sposta in fondo allo schermo.

Oltre a questo, il modulo implementa l'interfaccia widget di PrestaShop, quindi {widget name='socialpower'} inserisce i pulsanti in qualsiasi template del tuo tema. Poiché ogni posizionamento passa dallo stesso codice, spostare il modulo su un altro hook da Design → Posizioni funziona davvero, non a metà.

3,7 KB, e nient'altro

Un foglio di stile e uno script — 3,7 KB compressi in tutto (CSS 1.774 B + JS 1.974 B). Niente jQuery. Nessun framework. Nessun pacchetto di polyfill. Nessun web font.

Lo script viene caricato in fondo alla pagina, così non blocca mai il rendering, ed esce subito sulle pagine dove non ci sono pulsanti.

Diciamolo chiaramente: quei due piccoli file sono registrati su tutte le pagine del front office, non solo su quelle in cui i pulsanti compaiono. Su un negozio configurato normalmente PrestaShop li unisce agli asset del tema, quindi il costo pratico è nullo — ma sono due file, non zero, e preferiamo dirtelo noi piuttosto che lasciartelo scoprire.

Ciò che non fa, deliberatamente

Non ci sono contatori di condivisione, ed è una scelta, non una mancanza. Facebook, X e LinkedIn hanno tutti ritirato i loro endpoint pubblici di conteggio fra il 2015 e il 2018. Qualsiasi modulo che oggi ti mostri un numero o te ne mostra uno vecchio o lo sta pagando a una terza parte — e pagare una terza parte significa mandarle i tuoi visitatori. Preferiamo non mostrare alcun numero piuttosto che uno sbagliato.

Non telefona a casa. Nessun controllo di licenza, nessuna analitica, nessuna chiamata verso di noi di alcun tipo.

Niente memorizzato, da nessuna parte

Nessun cookie. Nessun local storage. Nessuna tabella nel database: non ne viene creata alcuna, quindi non ne resta alcuna. Il modulo scrive dodici impostazioni e nient'altro, e disinstallandolo spariscono anche quelle.

Due cose che vale la pena nominare invece di sorvolarci, perché sono API del browser e non proprio il nulla. Copia link usa l'API degli appunti, che scrive in locale e non manda niente da nessuna parte. Condividi passa l'indirizzo al sistema operativo, e quello che il sistema ne fa poi è affar suo, non nostro. Nessuna delle due è un problema; entrambe sono descritte più onestamente che taciute.

Costruito per essere usato con la tastiera

I pulsanti sono veri elementi <button>, non link né div travestiti, quindi ricevono il focus e si attivano da tastiera come il browser si aspetta, e gli screen reader li annunciano come pulsanti. Ognuno porta un'etichetta con il nome della rete, e le icone sono nascoste alle tecnologie assistive perché nulla venga letto due volte.

Due limiti, detti chiaramente. L'anello di focus è sostituito da un sollevamento con ombra: ben visibile, ma un indicatore progettato, non il contorno nativo del browser. E delle tre dimensioni, solo quella grande rispetta la linea guida dei 44 pixel di area touch; la più piccola è di 32 pixel.

Configuralo guardandolo

La pagina di configurazione mostra un'anteprima costruita dalle tue impostazioni salvate e dall'indirizzo reale del tuo negozio: il componente vero, renderizzato dallo stesso codice che usa la vetrina, non uno screenshot. Salva, e l'anteprima viene ridisegnata con quello che hai scelto, così puoi decidere forma e dimensione senza aprire il negozio in un'altra scheda.

Tradotto in otto lingue

Francese, inglese, italiano, olandese, polacco, spagnolo, tedesco e turco — ogni stringa, comprese quelle che vedono i tuoi clienti: l'intestazione «Condividi», i nomi delle reti e la conferma «Copiato!».

Compatibilità

PrestaShop dalla 1.7 alla 9. Tre hook, più l'interfaccia widget, nessun override e nessuna modifica al tema.

La versione 3 è stata una riscrittura. All'aggiornamento le tabelle del vecchio modulo vengono eliminate, i suoi diciotto hook legacy vengono deregistrati e i file obsoleti cancellati dal disco, comprese le schermate del widget che venivano fornite in passato.

Domande frequenti

Carica il codice di Facebook o di X sulle mie pagine?

No, e nemmeno in modo differito o lazy. Nelle tue pagine non c'è alcuno script di social network. I pulsanti sono comuni pulsanti HTML e l'indirizzo di condivisione lo costruisce un nostro piccolo script nel momento in cui qualcuno clicca. Prima di quel clic nella tua pagina non c'è nulla proveniente da alcun social.

Mi serve un banner cookie per questo modulo?

Il modulo non ti dà nulla da dichiarare: non imposta cookie, non scrive nulla nello storage del browser e non effettua alcuna richiesta a terze parti prima di un clic. Quando qualcuno clicca, va sulla pagina di condivisione di quella rete, che è una sua relazione con quella rete. Che cosa questo significhi per il tuo banner specifico è una domanda per chi ti assiste in materia di protezione dei dati: noi possiamo dirti esattamente che cosa fa il codice, cioè nulla fino al clic, ma non che cosa il tuo Garante si aspetta dal tuo negozio nel complesso.

Quali reti sono incluse?

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, e-mail, copia link e il menu di condivisione del dispositivo. Otto sono attive per impostazione predefinita; Telegram e Reddit arrivano spente, così le aggiungi se le vuoi.

Mostra il numero di condivisioni?

No, di proposito. Facebook, X e LinkedIn hanno chiuso anni fa i loro endpoint pubblici di conteggio, quindi oggi un numero o arriva da una terza parte a pagamento — il che significa mandarle i dati dei tuoi visitatori — oppure non è reale. Preferiamo non mostrare nulla piuttosto che qualcosa di sbagliato.

Dove compaiono i pulsanti?

Sotto il prodotto, per impostazione predefinita. C'è anche una barra flottante per il bordo sinistro o destro, su tutte le pagine o solo su quelle prodotto, spenta finché non la vuoi. E {widget name='socialpower'} li mette ovunque in un template del tema. Puoi anche spostare il modulo su un altro hook in Design → Posizioni e lì funzionerà correttamente.

Posso cambiare i colori?

Puoi passare dai colori del brand veri di ciascuna rete a un'unica tinta neutra, e scegliere pieno, contorno o minimale, tre forme e tre dimensioni. Quello che non puoi fare è impostare un colore personalizzato per ogni rete: i colori del brand sono quelli originali e sono fissi.

Rallenterà il mio negozio?

Un foglio di stile e uno script, 3,7 KB compressi insieme, niente jQuery e nessuna richiesta esterna. Lo script si carica in fondo, così non blocca mai la pagina. Vale la pena saperlo: quei due file sono registrati su tutte le pagine del front office, non solo dove i pulsanti compaiono, anche se normalmente PrestaShop li unisce agli asset del tuo tema.

È accessibile?

Più della media. Pulsanti veri anziché link travestiti, quindi focus e attivazione da tastiera funzionano in modo nativo e gli screen reader li annunciano correttamente, con un'etichetta per ogni rete e le icone nascoste alle tecnologie assistive. Due avvertenze che è giusto tu conosca: l'indicatore di focus è un sollevamento con ombra invece del contorno del browser, e solo la dimensione grande rispetta la linea guida dei 44 pixel di area touch.

Il pulsante WhatsApp apre l'app sul telefono?

Sì, anche se non rileviamo il dispositivo per farlo. Il pulsante usa sempre il link universale di WhatsApp, e a tutto il resto pensa WhatsApp: l'app sul telefono, WhatsApp Web sul desktop.

Che cos'è il pulsante Condividi che vedo solo sul telefono?

È il menu di condivisione del sistema operativo, raggiunto tramite la Web Share API del browser. Offre al tuo cliente le sue app vere invece di un elenco fisso. Compare solo dove il browser lo supporta: il modulo verifica prima, così ai visitatori da desktop non viene mai mostrato un pulsante che non fa nulla.

Memorizza qualcosa sui miei visitatori?

Niente. Nessun cookie, nessuno storage del browser, nessuna tabella nel database: non ne crea alcuna, quindi non c'è nulla da ripulire dopo. Scrive dodici impostazioni di configurazione e le rimuove alla disinstallazione.

Posso vedere come verrà prima di salvare?

Sì. La pagina di configurazione renderizza un'anteprima a partire dalle tue impostazioni salvate e dall'indirizzo del tuo negozio, usando lo stesso codice che disegna i pulsanti in vetrina — quindi quello che vedi è davvero quello che ricevono i tuoi clienti, non un'illustrazione. Viene ridisegnata quando salvi, non mentre digiti.

Che fine fanno le mie impostazioni della versione 2?

La versione 3 è una riscrittura e si aggiorna in modo pulito: le vecchie tabelle del database vengono eliminate, i diciotto hook legacy deregistrati, quelli moderni registrati al loro posto e i file obsoleti rimossi dal disco. Dopo conviene rivedere le impostazioni di aspetto, perché adesso sono di più.

Quali lingue parla?

Otto: francese, inglese, italiano, olandese, polacco, spagnolo, tedesco e turco. Comprese le stringhe che i tuoi clienti leggono davvero — l'intestazione «Condividi», i nomi delle reti e la conferma «Copiato!» — non solo il back office.