Cookie Questo sito conserva solo ciò che serve per funzionare. Al momento non ci sono né statistiche né pubblicità, e nulla di quanto trovi qui ti segue su altri siti. Leggi l’informativa sulla privacy

Scegli cosa consentire
+92 312 8299940Preventivo gratuito
Funziona nel tuo browser

Generatore di pulsanti di condivisione
Icone social e codice

Crea pulsanti di condivisione con le icone social in meno di un minuto. Per prima cosa scegli i social, una forma e i tuoi colori, poi imposta la disposizione. Dopo copia HTML + CSS pulito, o HTML puro con stili in linea. Non ci sono script di terzi, né cookie, né registrazione.

Crea i miei pulsantiCome funziona
  • GratisPrezzo
  • 32 SVGIcone
  • HTML + CSS o HTML puroCodice
  • NessunoTracciamento

Generatore di pulsanti di condivisione

Scegli social, forma e colori, poi copia l’HTML

Stili rapidi:
1. Scegli i social

I pulsanti seguono l’ordine in cui li spunti.

Instagram, YouTube, TikTok e gli altri in grigio non hanno un link di condivisione. Passa a “Portano ai miei profili” per usarli.

2. La pagina da condividere
3. Forma e colore
4. Disposizione e testo
Anteprima dal vivo
Il tuo codice

Pulsanti
0
Dimensione del codice
0
Script
0

L’anteprima e il codice cambiano a ogni modifica. Copia il codice quando ti piace.

Qui il browser fa tutto il lavoro, in questa scheda. Non carichiamo nulla, non salviamo nulla e non registriamo nulla.
In breve

Cosa fa questo strumento per icone social

I pulsanti di condivisione sono le piccole icone che permettono ai lettori di passare la tua pagina ad altri. Un clic apre Facebook, X, WhatsApp o l’email, con il tuo link già inserito. Così ogni lettore può diventare il primo link al tuo sito per qualcuno di nuovo.

Questo strumento crea quei pulsanti per te. Per prima cosa, spunta i social che vuoi tra 32 icone SVG. Poi scegli una forma, dal quadrato al cerchio, e quanto sono morbidi gli angoli. Quindi scegli i colori del marchio, o il tuo sfondo e colore dell’icona.

Dopodiché imposti la disposizione. I pulsanti possono stare affiancati, impilati, in griglia o mobili sul bordo dello schermo. Infine copi il codice. La versione HTML + CSS tiene lo stile in un piccolo blocco, mentre l’HTML puro mette ogni stile sul tag stesso.

I pulsanti sono semplici link alla pagina di condivisione di ogni social. Per questo non c’è widget, né script di tracciamento, né niente che rallenti la pagina. Inoltre ogni link riceve un aria-label chiaro, così chi usa un lettore di schermo sente “Condividi su Facebook” invece di niente.

Cosa c’è dentro un pulsante di condivisione

Ogni pulsante è un link in tre parti. Prima, l’indirizzo è la pagina di condivisione del social con il tuo link e titolo aggiunti. Poi, l’icona è un SVG in linea, perciò resta nitida a ogni dimensione e non serve un altro file.

Schema di un pulsante di condivisione: link, icona SVG in linea e testo aria-label
Un pulsante: un link di condivisione, un’icona SVG in linea e un’etichetta.

La terza parte è l’etichetta. Può essere un testo visibile, come “Facebook”, o un aria-label nascosto. Grazie a essa, il pulsante ha senso anche per chi non vede l’icona.

Icone social in SVG, pronte per il tuo stile

Lo strumento disegna tutte le 32 icone social in SVG. In altre parole, ogni icona è un tracciato, riempito con il colore che scegli. Così un’icona bianca su un colore di marchio e una scura su una tinta tenue restano nitide.

Generatore di pulsanti di condivisione con social spuntati e pulsanti arrotondati nei colori del marchio nell’anteprima
Spunta i social, scegli uno stile e l’anteprima cambia subito.

Ogni modifica compare subito nell’anteprima dal vivo. Inoltre puoi vedere l’anteprima su sfondo bianco, grigio chiaro o scuro. In questo modo sai come appariranno i pulsanti sulla tua vera pagina.

HTML per icone social: due tipi di codice

Scegli HTML + CSS per un sito o un tema. Così ottieni un solo blocco di stile e nomi di classe brevi, e funzionano anche gli effetti al passaggio del mouse.

HTML per icone social: codice dei pulsanti generato con un blocco di stile, pronto da copiare
Il riquadro del codice, pronto da copiare o salvare come file HTML.

Invece scegli HTML puro per page builder, Markdown o un’email HTML. Lì ogni stile sta sul tag, quindi non serve altro.

In questa pagina

Continua

Guida video

Guarda il generatore di pulsanti di condivisione in azione

Un breve video mostra ogni passaggio. Poi scegli la tua lingua qui sotto e attiva i sottotitoli se vuoi.

Passo dopo passo

Come creare pulsanti di condivisione

Sei passi brevi. Inoltre tutto avviene in questa scheda.

  • Scegli condivisione o seguire

    Usa “Pulsanti che” in alto. Condividono una pagina crea link di condivisione, e Portano ai miei profili punta ai tuoi account.

  • Spunta i social

    Spunta ogni social che vuoi. I pulsanti seguono l’ordine delle spunte, quindi spunta per primo il più utile.

  • Aggiungi la pagina o i profili

    Scrivi l’indirizzo della pagina e il testo da condividere. Per i pulsanti per seguire, invece, incolla il link di ogni profilo.

  • Scegli forma e colori

    Scegli una forma, sposta il cursore della morbidezza e prendi uno stile. Poi tieni i colori del marchio, o imposta il tuo sfondo e colore dell’icona.

  • Imposta la disposizione

    Metti i pulsanti affiancati, impilati, in griglia o in una barra laterale mobile. Inoltre imposta la dimensione, lo spazio tra loro e il testo.

  • Copia il codice

    Scegli HTML + CSS o HTML puro, poi copia il codice o scaricalo come file HTML. Dopo incollalo una volta dove devono comparire i pulsanti.

Perché questa pagina

Perché usare questi pulsanti con icone social

Tre motivi per creare i tuoi pulsanti invece di aggiungere un widget.

  • Niente widget, niente tracciamento

    I widget di condivisione spesso caricano uno script, mettono cookie e seguono i tuoi lettori. Questi pulsanti invece sono semplici link. Così la tua pagina resta veloce, e non hai niente in più da scrivere nella privacy policy.

  • Tutto lo stile in un posto

    Forma, morbidezza, colori, dimensione, disposizione ed effetto al passaggio del mouse stanno su una sola schermata. Inoltre sei stili rapidi ti danno un buon inizio con un clic, e poi puoi cambiare ogni impostazione.

  • Codice che va bene ovunque

    La versione HTML + CSS va bene per un sito o un tema. Allo stesso tempo, l’HTML puro funziona dove non puoi aggiungere CSS, per esempio in un blocco di un page builder o in un’email.

Come funziona

Come sono fatti i pulsanti di condivisione

Tre regole danno forma al codice che copi. Inoltre conoscerle ti aiuta a usarlo bene.

  • Ogni social ha il suo indirizzo di condivisione Facebook, X, LinkedIn e gli altri hanno ognuno una pagina che apre un post pronto. Lo strumento aggiunge il tuo link codificato e il titolo a quell’indirizzo. Tuttavia alcune app, come Viber e Messenger, usano un link dell’app, perciò funzionano meglio sul telefono.
  • I link di condivisione restano nofollow Un link di condivisione non è una pagina che garantisci. Per questo lo strumento segna questi link con rel="nofollow noopener noreferrer". Invece i link ai profili ricevono rel="me", che dice ad alcuni social che il profilo è tuo.
  • Il contrasto decide cosa si vede Un’icona richiede un contrasto di almeno 3 a 1 con lo sfondo per vedersi bene. È la regola della guida WCAG sul contrasto non testuale. Quindi, quando i tuoi colori scendono sotto, lo strumento ti avvisa.
Attenzione qui

Errori comuni con i pulsanti di condivisione

Ognuno ti fa perdere condivisioni, anche con buoni pulsanti.

  • Troppi social

    Venti pulsanti sembrano rumore. Invece tieni i tre-sei che i tuoi lettori usano davvero.

  • Icone senza etichetta

    Un lettore di schermo non può leggere un’icona. Per questo il codice aggiunge un aria-label a ogni pulsante.

  • Un’icona chiara su un colore chiaro

    Il bianco sul giallo chiaro si vede male. Quindi guarda l’avviso di contrasto e correggi il colore.

  • L’indirizzo sbagliato

    Allora ogni pagina condivide la tua home page. Invece spunta l’indirizzo automatico per i modelli.

  • Pulsanti troppo piccoli sul telefono

    Un pulsante minuscolo è difficile da toccare. Perciò tienili a 40 pixel o più per il pollice.

  • Una barra mobile sopra il contenuto

    Una barra laterale può coprire il testo su uno schermo piccolo. Quindi provala su un telefono prima di pubblicare.

Domande

Domande frequenti su icone social e pulsanti di condivisione

Questo generatore di pulsanti di condivisione è gratis?

Sì. Non c’è prezzo, né registrazione, né filigrana nel codice. Infatti è il tuo browser a fare tutto il lavoro.

I pulsanti tracciano i miei lettori?

No. Sono semplici link, senza script nostri né dei social. Quindi un social vede una visita solo quando un lettore fa clic.

Quanti social posso usare?

Ci sono 32 icone. Di queste, 22 possono condividere una pagina, mentre le altre, come Instagram e YouTube, portano a un profilo.

Perché non posso spuntare Instagram nella modalità condivisione?

Instagram, YouTube e TikTok non hanno un indirizzo web che condivide un link. Per questo passa a “Portano ai miei profili” per usarli.

Che differenza c’è tra pulsanti di condivisione e per seguire?

Un pulsante di condivisione pubblica la tua pagina sull’account del lettore. Invece un pulsante per seguire porta il lettore al tuo profilo.

Quale tipo di codice scelgo?

Scegli HTML + CSS per un sito o un tema. Poi scegli HTML puro per page builder, Markdown o email.

Perché in HTML puro mancano gli effetti al passaggio del mouse?

Un effetto al passaggio del mouse richiede una regola CSS, e gli stili in linea non possono contenerla. Quindi usa HTML + CSS se vuoi l’effetto.

A cosa serve la morbidezza?

Regola quanto sono arrotondati gli angoli, come parte dell’altezza del pulsante. Così zero dà angoli netti e 50 una curva piena.

Quali forme posso scegliere?

Quadrata, arrotondata, cerchio, pillola, foglia ed esagono. Tra l’altro, la pillola va meglio quando i pulsanti mostrano il nome dei social.

Posso usare i miei colori?

Sì. Togli la spunta a “Usa il colore del marchio di ogni social”, poi scegli un colore di sfondo e un colore per l’icona.

Cosa vogliono dire gli stili?

Pieno riempie il pulsante, e sfumato lo sfuma. Contorno disegna solo un bordo, tinta tenue usa un fondo chiaro, e solo icona toglie lo sfondo.

Come metto i pulsanti affiancati?

Scegli “Affiancati” in Disposizione. Così si allineano in fila e vanno a capo sugli schermi piccoli.

Cos’è la barra laterale mobile?

Fissa i pulsanti al bordo sinistro della finestra, a metà altezza. Quindi restano in vista mentre il lettore scorre.

I pulsanti possono condividere la pagina in cui si trovano?

Sì. Spunta l’indirizzo automatico in HTML + CSS. Poi un piccolo script inserisce indirizzo e titolo della pagina.

Come funziona il pulsante per copiare il link?

Copia l’indirizzo della pagina negli appunti. Perché questo richiede uno script, il codice aggiunge qualche riga apposta.

Dove incollo il codice?

Incollalo una volta dove devono comparire i pulsanti, per esempio dopo un articolo. In WordPress usa un blocco HTML personalizzato.

Posso cambiare il nome della classe?

Sì. Scrivi un nuovo nome in “Nome della classe CSS”, così i pulsanti non si scontrano mai con i tuoi stili.

Le icone sono in SVG?

Sì. Ogni icona è un solo tracciato SVG in linea, perciò resta nitida a ogni dimensione e non serve alcun file immagine.

Posso usare le icone SVG altrove?

Sì, copia l’SVG dal codice. In ogni caso, segui le regole del marchio di ogni social quando mostri il suo logo.

Quanto devono essere grandi i pulsanti di condivisione?

Tra 40 e 48 pixel va bene su telefono e computer. Invece i pulsanti più piccoli sono difficili da toccare.

I pulsanti di condivisione aiutano la SEO?

Non in modo diretto, perché le condivisioni non sono un fattore di ranking. Tuttavia più condivisioni portano più visite, e alcune possono linkarti.

Perché i link di condivisione sono nofollow?

Un link di condivisione porta a uno strumento, non a contenuti che raccomandi. Per questo nofollow è la scelta onesta.

I pulsanti funzionano sul telefono?

Sì. Sul telefono WhatsApp, Viber, Messenger e SMS aprono subito l’app.

Posso usarli in un’email HTML?

Sì, con il codice HTML puro. Tuttavia alcune app di posta nascondono l’SVG, quindi prova nelle app dei tuoi lettori.

Lo strumento salva le mie impostazioni?

No. Non resta niente dopo la chiusura della scheda. Perciò copia o scarica il codice prima di uscire.

Posso creare pulsanti per seguire i miei profili?

Sì. Scegli “Portano ai miei profili”, spunta i tuoi social e incolla l’indirizzo di ogni profilo. Un pulsante senza indirizzo punta a # finché non ne aggiungi uno.

Continua

Altri strumenti per condividere e per l’HTML

Alcune pagine che vanno bene con i pulsanti di condivisione.

Crea ora i tuoi pulsanti di condivisione

Spunta i tuoi social, scegli uno stile e copia il codice. Inoltre lo strumento è gratis, e niente di ciò che scrivi lascia questa scheda.

Torna allo strumentoLeggi prima gli errori