Aggiungere pulsanti di condivisione a Blogger
Importante: esegui un backup del template HTML prima di modificare il codice. Se qualcosa va storto, ripristina il backup.
Perché integrare pulsanti di condivisione
- Aumentano la visibilità dei post sui social network.
- Rendono la condivisione più immediata e con meno frizioni per il lettore.
- Permettono di tracciare quali articoli vengono condivisi più spesso.
Panoramica rapida
- Attiva l’opzione “Mostra pulsanti di condivisione” in Design > Modifica (Post del blog).
- Registrati a AddThis (o altro servizio di condivisione).
- Genera il codice e copia la versione per “Website” per ottenere il codice HTML completo.
- Vai su Design > Modifica HTML del tuo blog, abilita “Espandi template widget” e incolla il codice nella posizione desiderata (es. subito dopo il corpo del post).
Accertati di salvare il template e provare il risultato su più post.
Configurare AddThis
Preferisco AddThis per la sua semplicità e flessibilità. Dopo l’iscrizione, clicca su “Get AddThis” per iniziare a personalizzare i pulsanti.
AddThis genera un’anteprima e il relativo codice HTML. Se vuoi personalizzare ulteriormente, clicca su “Customize”.
Scegli lo stile e, sotto “Platform”, seleziona “Website” invece di “Blogger”: così otterrai il codice HTML completo, modificabile.
Dove inserire il codice nel template di Blogger
Nel cruscotto di Blogger vai su Design > Modifica HTML e abilita “Expand Widget Templates” (Espandi template widget) per vedere tutto il codice.
Posiziona il codice AddThis dove preferisci. Molti autori lo mettono subito dopo il corpo del post — ad esempio subito dopo il tag o dopo il placeholder del post. Nell’esempio qui sotto l’autore lo posiziona subito dopo il contenuto del post.
Dopo aver incollato il codice, salva il template e visualizza il blog per verificare il risultato.
Personalizzare i pulsanti AddThis
AddThis consente molte personalizzazioni modificando il codice HTML prodotto. Qui spiego gli elementi principali da controllare e come adattarli a Blogger.
Codice di esempio (predefinito)
Esempio generico che potresti ottenere da AddThis (la tua versione può variare):
(Il blocco sopra rappresenta il codice predefinito fornito; AddThis può produrre vari attributi e riferimenti a script.)
Funzioni generali nel tag principale
Il primo frammento di codice contiene attributi che controllano il comportamento generale dei pulsanti. In Blogger è utile usare espressioni che prelevino titolo e URL del post, così il contenuto condiviso riporterà sempre i dati corretti.
Aggiungi o verifica attributi simili a questi nel blocco principale:
...bottoni...
- expr:addthis:title=’data:post.title’ imposta automaticamente il titolo del post condiviso.
- expr:addthis:url=’data:post.url’ allega l’URL permanente del post.
Questi attributi garantiscono che, se un lettore clicca su “Tweet”, il testo includerà il titolo e il link del post invece di un generico riferimento.
Esempio del Tweet risultante:
Make Tech Easier http://t.co/nCLRCEE via @AddThis
Prima viene il titolo, poi l’URL e infine l’origine (se specificata dal servizio di condivisione).
Aggiungere o sostituire i pulsanti
La porzione di codice che elenca i singoli bottoni determina quali servizi appaiono. Puoi cambiare l’ordine o aggiungere servizi disponibili nella lista AddThis.
Esempio per aggiungere Tweet e Like di Facebook con attribuzione Twitter:
- Sostituisci
tuo_usernamecon il tuo handle Twitter (senza @) per far apparire “via @tuo_username” nei Tweet. - Il campo
pubidè l’identificatore pubblico del tuo account AddThis; usa il valore fornito da AddThis o lascia un placeholder se non vuoi pubblicarlo.
Codice finale di esempio
Un esempio completo, pronto per l’uso e sicuro come base (sostituisci i placeholder dove necessario):
Controlli e considerazioni tecniche
- Testa su desktop e mobile: alcuni layout AddThis cambiano aspetto su schermi piccoli.
- Performance: lo script AddThis carica risorse esterne; se la performance è critica, considera la versione asincrona o soluzioni self-hosted.
- Privacy: AddThis può raccogliere dati di condivisione. Se il tuo sito richiede conformità GDPR, verifica le impostazioni di consenso e anonimizzazione offerte dal servizio.
Mini-metodologia per l’implementazione (passaggi rapidi)
- Fai il backup del template.
- Attiva i pulsanti nativi in Blogger come test rapido.
- Registrati a AddThis e crea la combinazione desiderata.
- Seleziona “Website” e copia il codice HTML completo.
- Incolla nel template dove vuoi che appaiano i pulsanti.
- Salva, verifica e monitora.
Checklist per ruoli
- Sviluppatore:
- Fare backup template HTML
- Inserire codice e testare in ambiente di staging
- Ottimizzare caricamento script (defer/async)
- Content manager:
- Scegliere quali reti mostrare
- Definire username Twitter per tw:via
- Verificare aspetto su vari post
- Responsabile privacy:
- Rivedere configurazione AddThis per GDPR
- Aggiornare informativa sulla privacy
Cheat sheet rapido e snippet
- Espressioni utili per Blogger (usare dentro tag AddThis):
- expr:addthis:title=’data:post.title’
- expr:addthis:url=’data:post.url’
- Pulsanti comuni:
- addthis_button_tweet
- addthis_button_facebook_like
- addthis_button_pinterest_pinit
- addthis_button_compact
Decisione rapida (diagramma)
flowchart TD
A[Vuoi controllare i pulsanti?] -->|Sì| B[Usa AddThis, scegli Website]
A -->|No| C[Usa share nativo di Blogger]
B --> D[Test su mobile]
D --> E{Performance ok?}
E -->|Sì| F[Pubblica]
E -->|No| G[Ottimizza script o usa soluzione alternativa]Quando evitare AddThis e alternative
- Se hai requisiti di privacy molto restrittivi, valuta pulsanti self-hosted o implementazioni che non caricano script esterni.
- Se servi un traffico altamente ottimizzato e vuoi ridurre dipendenze esterne, considera soluzioni leggere (es. link di condivisione manuali con URL social).
Casi di test e criteri di accettazione
- I pulsanti devono mostrare il titolo e l’URL corretti su ogni post.
- Il pulsante Tweet deve includere
via tuo_usernamese impostato. - I pulsanti devono essere visibili su desktop e mobile senza rompere il layout.
Glossario (1 riga per termine)
- AddThis: servizio che fornisce pulsanti di condivisione e strumenti di analisi per siti web.
- expr:addthis: attributo usato in Blogger per esprimere valori dinamici come titolo e URL.
Conclusione
I pulsanti di condivisione nativi di Blogger sono un buon punto di partenza, ma per maggiore controllo e compatibilità con Facebook Like e Twitter Tweet conviene usare AddThis o servizi equivalenti. Configurando correttamente titolo e URL dinamici e scegliendo i pulsanti giusti, ottimizzi la condivisione e l’esperienza dell’utente.
Riepilogo rapido: esegui sempre il backup del template prima di modificare, controlla la privacy e testa su più dispositivi.
