Come inserire i pulsanti dei social
e altri pulsanti utili

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web
Sommario:
Premessa: in questa guida troverete le indicazioni per implementare i bottoni sia tramite il loro codice, sia tramite link. Considerata la nuova e severa normativa sull'uso dei cookie, anche di terze parti e se non disponete di uno script per il blocco preventivo dei cookie, la soluzione consigliata è quella di utilizzare sempre i link.
Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

NOTA: dato che i social modificano spesso le loro impostazioni, le indicazioni qui riportate vengono verificate, periodicamente, grazie alle segnalazioni inviate dagli utenti tramite i pulsanti appositi. La data dell'ultimo controllo appare sotto al pulsante relativo. La dicitura "aggiornato" indica che il malfunzionamento è stato confermato e corretto. La dicitura "verificato" indica che non sono stati riscontrati malfunzionamenti. In questo caso, potete contattarmi (vedi "parla con me" nel footer) e sarò lieta di aiutarvi a risolvere le difficoltà che state incontrando.
È evidente che, se una guida specifica mostra un esempio funzionante, il codice è corretto. In caso contrario, anche l'esempio non funzionerebbe.
PER CORTESIA! Leggete quanto scritto sopra e non inviate segnalazioni ripetute, o non veritiere, che creano perdite di tempo a scapito del lavoro utile per tutti. Grazie


COMUNICAZIONE: Twitter è diventato X, ma, per ora, la composizione dei link non è cambiata.

I link di condivisione dei principali social

Per invitare gli utenti a condividere le pagine del vostro sito, potete anche usare dei semplici link.
Lavorandoci un po', sono riuscita ad estrapolare i link di condivisione di molti social. Cliccando su questi link, dopo averli configurati, si apriranno le rispettive schermate per la condivisione.
Se l'immagine non appare subito, riaggiornate la pagina.
Modificate i campi in rosso, inserendo l'indirizzo del vostro sito, o di una pagina specifica, al posto dell'url di questo sito (https://www.lachiavenelpozzo.com).
ATTENZIONE: l'url deve essere scritto per esteso e deve corrispondere a quello canonico (es: https://www.nomesito.com).
Dove è previsto, potete aggiungere titoli e/o descrizioni, ma ricordatevi di separare le parole con il + per non lasciare spazi bianchi, come potete vedete nel link di Twitter (ora diventato X), dove ho inserito un testo di esempio.

NON INVIATE, PER PIACERE, SEGNALAZIONI DI MALFUNZIONAMENTO NON VERITIERE. Grazie

In tutti i seguenti link, dovete sostituire l'indirizzo https://www.lachiavenelpozzo.com con l'indirizzo del vostro sito, o della pagina da condividere.

OVVIAMENTE, LA PERSONA CHE CONDIVIDE DEVE AVERE EFFETTUATO L'ACCESSO AL SOCIAL NEL QUALE VUOLE CONDIVIDERE. In caso contrario, i link non possono funzionare.

Ho inserito l'indirizzo del mio sito nei link, affinchè, copiandoli e incollandoli nella barra degli indirizzi del vostro browser, possiate testarne subito il corretto funzionamento. Potrete, poi, sostituirlo con l'indirizzo del vostro sito o pagina web.

Link di condivisione



Per facebook:
https://www.facebook.com/sharer/sharer.php?u=https://www.lachiavenelpozzo.com

verificato su errata segnalazione in data 13 marzo 2024

Per X (ex Twitter):
https://twitter.com/intent/tweet?text=Ti+consiglio+di+visitare+questo+sito:+https://www.lachiavenelpozzo.com

verificato su errata segnalazione in data 20 novembre 2023

Per Linkedin:
https://www.linkedin.com/sharing/share-offsite/?url=https://www.lachiavenelpozzo.com

aggiornato su segnalazione in data 31 agosto 2023

Per Tumblr:
https://www.tumblr.com/share/link?url=https://www.lachiavenelpozzo.com

verificato su errata segnalazione in data 25 dicembre 2023

Per Reddit:
https://www.reddit.com/submit?url=https://www.lachiavenelpozzo.com

verificato su segnalazione in data 20 aprile 2019


Per Pinterest:
https://www.pinterest.com/pin/create/button/?media=https://www.lachiavenelpozzo.com/img/pozzo.jpg&url=https://www.lachiavenelpozzo.com

verificato su segnalazione in data 21 gennaio 2021


Questi link aprono le finestre di condivisione. Potete mettere il collegamento sotto ad un testo, oppure sotto ad un'immagine.

Esempio di link a Facebook sotto ad un testo:
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.lachiavenelpozzo.com" target="_blank">Condividi su Facebook</a>

Gli stessi link con apertura in finestra popup

Potete testare i link con "Html editor".

Per facebook:
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.lachiavenelpozzo.com" onclick="window.open(this.href, 'facebookwindow','left=20,top=20,width=560,height=440,toolbar=0,resizable=no,scrollbars=yes'); return false;">Share</a>


Per X (ex Twitter):
<a href="https://twitter.com/intent/tweet?text=Ti+consiglio+di+visitare+questo+sito:+https://www.lachiavenelpozzo.com/" onclick="window.open(this.href, 'twitterwindow','left=20,top=20,width=560,height=440,toolbar=0,resizable=no,scrollbars=yes'); return false;">Share</a>


Per Linkedin:
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://www.lachiavenelpozzo.com" onclick="window.open(this.href, 'linkedinwindow','left=20,top=20,width=560,height=440,toolbar=0,resizable=no,scrollbars=yes'); return false;">Share</a>


Per Tumblr:
<a href="https://www.tumblr.com/share/link?url=https://www.lachiavenelpozzo.com" onclick="window.open(this.href, 'tumblrwindow','left=20,top=20,width=560,height=440,toolbar=0,resizable=no,scrollbars=yes'); return false;">Share</a>


Per Reddit:
<a href="https://www.reddit.com/submit?url=https://www.lachiavenelpozzo.com" onclick="window.open(this.href, 'redditwindow','left=20,top=20,width=560,height=440,toolbar=0,resizable=no,scrollbars=yes'); return false;">Share</a>


Per Pinterest:
<a href="https://www.pinterest.com/pin/create/button/?media=https://www.lachiavenelpozzo.com/img/logo-social.jpg&url=https://www.lachiavenelpozzo.com" onclick="window.open(this.href, 'pinterestwindow','left=20,top=20,width=560,height=440,toolbar=0,resizable=no,scrollbars=yes'); return false;">Pin it</a>


Naturalmente, i parametri della finestra popup possono essere modificati a piacere.

Esempio funzionante:
Share on Facebook

Nella "Membership del sito" e nella sezione "Varie" potete trovare lo script per impostare l'url globale della pagina in pulsanti social media che si aprono in una finestra popup. Molto, molto pratico.

Facebook

Il bottone di condivisione di Facebook

Potete configurarlo da qui (ovviamente, dovete essere loggati in fb):
Share button

verificato su segnalazione in data q 13 febbraio 2023


L'esempio sopra è funzionante (....quindi, se ne approfittate per condividere il sito, mi fate un regalo).

Il bottone mi piace di Facebook

AGGORNAMENTO: da gennaio 2021 sono cambiate le condizioni per ottenere il pulsante "mi piace" di fb. Trovate qui maggiori informazioni:
https://developers.facebook.com/docs/plugins/like-button

X (ex Twitter)

Il bottone "Seguimi su X"

Potete configurarlo da qui, come gli altri bottoni:
Share button
(scorri verso il basso -> clicca su "Twitter buttons" e scegli "Follow button")

verificato su segnalazione in data 5 febbraio 2021

Esempio funzionante:

Youtube

Il bottone di iscrizione al canale YouTube

NOTA: YouTube appartiene a Google, quindi, per accedere alle sue funzionalità, è necessario possedere un account Google.

Primo metodo:
Configurate il bottone andando qui:
YouTube button

verificato su falsa segnalazione in data 9 ottobre 2023

Per cortesia, non inviate false segnalazioni di link non funzionanti se gli esempi presenti funzionano. Grazie.
Esempio funzionante (passate il mouse sul bottone)


Secondo metodo (link):
Esempio funzionante:
Iscriviti al mio canale

verificato su segnalazione in data 7 febbraio 2023

Cliccando sul link, gli utenti saranno indirizzati alla pagina del vostro canale, sulla quale apparirà un popup per l'iscrizione.
Il link è come questo:
 https://www.youtube.com/channel/XXXXXXXXXXXX?sub_confirmation=1

La prima parte corrisponde all'indirizzo generico del canale Youtube, a cui dovete aggiungere la parte segnata in rosso che corrisponde all'ID del vostro canale .
Naturalmente potete mettere un'immagine sotto al link, se preferite.

Altro

Il bottone "Condividi via mail"

Volete dare ai vostri visitatori la possibilità di consigliare il sito, o una pagina di esso, ai loro amici e conoscenti via mail? Ecco come fare....

Incollate questo codice nell'html della pagina, inserendo l'URL del vostro sito, o della pagina che volete condividere e l'indirizzo dell'immagine che avete scelto come bottone. Il testo in grassetto, è quello che apparirà nel contenuto della email, insieme al link; potete modificarlo come preferite. Quello in verde, invece, apparirà come oggetto della mail e, anche questo, potete cambiarlo come credete.
Il link apre il client di posta, oppure il servizio configurato dall'utente.
<a href="mailto:?subject=Consiglio&amp;body=Visita+questo+sito:+URL vostro sito" title="Condividi via email"><img src="URL immagine bottone"/></a> ;

Esempio funzionante:
email

Il bottone "Contattami via email"

Semplice link che apre il client di posta, oppure il servizio configurato dall'utente:

mailto:indirizzo destinatario

Con destinatario, oggetto e contenuto.
<a href="mailto:Indirizzo destinatario?subject=Oggetto del messaggio
&body=Contenuto del messaggio di posta">Testo visibile</a>

Se volete mettere un'immagine come bottone, la stringa diventa cosi`:
<a href="mailto:Indirizzo destinatario?subject=Oggetto del messaggio
&body=Contenuto del messaggio di posta">
<img src="URL immagine bottone"/></a>

Il bottone di Skype

Bottone di condivisione:

Skype share button

aggiornato su segnalazione in data 1 marzo 2021

Links:

Link per chiamare una persona specifica:

<a href="skype:nome utente skype">Chiama</a>

verificato su segnalazione in data 13 novembre 2022

Link per chattare con una persona specifica:

<a href="skype:nome utente?chat">Chat</a>

Al posto di "nome utente", dovete mettere il vostro nome utente di Skype.
Entrambi i link porteranno all'apertura (previa richiesta di autorizzazione del browser) dell'applicazione Skype presente sul computer dell'utente.

NOTA: Il vostro nome utente Skype, se dimenticato, si può trovare aprendo Skype e cliccando sul proprio nome, in alto a sx e poi su "Profilo Skype" nel menù che si apre e scorrendo fino alla voce "Nome utente".
Il nome utente di qualsiasi contatto si trova cliccando sul contatto e poi di nuovo sul nome contatto in alto e quindi scorrendo il profilo come sopra
.

Il bottone di Whatsapp

Il bottone whatsapp permette all'utente di inviarvi un messaggio tramite l'app.
Naturalmente, sia voi che l'utente dovete avere whatsapp attivato sul telefono o sul computer.

Codice:
<a href="https://wa.me/+39XXXXXXXXX" target="_blank" rel="noopener noreferrer">click</a>
verificato su errata segnalazione in data 20 novembre 2023

Inserite il vostro numero di telefono con prefisso nazionale (nel codice è già inserito quello italiano +39) e modificate il testo (click) del link come preferite.
Attenzione a non lasciare spazi vuoti tra i numeri.

Il bottone stampa la pagina

Stampare una pagina web e` molto semplice, basta cliccare su file->stampa nella barra degli strumenti del browser, ma se volete mettere un bottone nelle vostre pagine per invitare gli utenti a stamparle, lo potete fare....

Esempio funzionante:


Il codice è questo:
<input type="button" value="Print this page" onClick="window.print()">

Naturalmente, potete cambiare il testo che appare sul bottone.

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Continua con:

Leggi anche: Creare un sito da zero