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:

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

Questi link aprono le finestre di condivisione dei rispettivi social.

Per facebook:
https://www.facebook.com/sharer/sharer.php?u=https://www.example.com
Vai all'esempio pratico

verificato su errata segnalazione in data 21 aprile 2025 

Per X (ex Twitter):
https://x.com/intent/post?url=https://www.example.com&text=Visita+questo+sito
Vai all'esempio pratico

verificato su errata segnalazione in data 20 novembre 2023

Per Linkedin:
https://www.linkedin.com/sharing/share-offsite/?url=https://www.example.com
Vai all'esempio pratico

aggiornato su segnalazione in data 31 agosto 2023

Per Tumblr:
https://www.tumblr.com/share/link?url=https://www.example.com
Vai all'esempio pratico

verificato su errata segnalazione in data 25 dicembre 2023

Per Reddit:
https://www.reddit.com/submit?url=https://www.example.com
Vai all'esempio pratico

verificato su segnalazione in data 20 aprile 2019

Per Pinterest:
https://pinterest.com/pin/create/button/?url=https://www.example.com&media=https://www.example.com/img/logo-social.jpg
Vai all'esempio pratico

verificato su segnalazione in data 21 gennaio 2021

Gli stessi link con apertura in finestra popup

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://x.com/intent/post?url=https://www.example.com&text=Visita+questo+sito" onclick="window.open(this.href, 'xwindow','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://pinterest.com/pin/create/button/?url=https://www.example.com&media=https://www.example.com/img/logo-social.jpg" 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 sezione "Risorse per i webmaster" e nella pagina "Varie" potete trovare lo script per impostare un url globale per pulsanti social media con apertura in finestra popup.

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.
NOTA BENE: il numero di telefono deve essere scritto senza spazi!! Attenzione, quindi, al copia/incolla.

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

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.

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 tutto