Come fare a

Come inserire i pulsanti dei social
e altri pulsanti utili

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'avvenuta verifica appare sotto al pulsante relativo. Se la verifica non ha apportato modifiche, significa che non sono stati riscontrati reali malfunzionamenti. In questo caso, potete contattarmi (vedi "parla con me" a fondo pagina) e sarò lieta di aiutarvi a risolvere le difficoltà che state incontrando.

Per cortesia, non inviate segnalazioni ripetute, o non veritiere, che creerebbero perdite di tempo a scapito del lavoro utile per tutti. Grazie


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.
Modificate i campi in rosso, inserendo l'indirizzo del vostro sito, o di una pagina specifica. 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, dove ho inserito un testo di esempio.

Per facebook:
https://www.facebook.com/sharer/sharer.php?u=URL da condividere

verificato su segnalazione in data 29 luglio 2019


Per Twitter:
https://twitter.com/share?text=Visita+questa+pagina:&url=URL da condividere

verificato su segnalazione in data 23 settembre 2019

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

aggiornato su segnalazione in data 29 luglio 2019

Per Digg:
https://digg.com/tools/diggthis/confirm?title=&url=URL da condividere

Per Delicious:
https://www.addtoany.com/add_to/delicious?linkurl=URL da condividere

Per Stumbleupon:
https://www.stumbleupon.com/badge/?url=URL da condividere

Per Tumblr:
https://www.tumblr.com/share/link?url=URL da condividere

Per Reddit:
https://www.reddit.com/submit?url=URL da condividere
verificato su segnalazione in data 20 aprile 2019

Per Pinterest:
https://www.pinterest.com/pin/create/button/?url=URL da condividere
verificato su segnalazione in data 21 marzo 2019

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>

Facebook

Il bottone di condivisione di Facebook:

Potete configurarlo da qui:
https://developers.facebook.com/docs/plugins/share-button?locale=it_IT
verificato su segnalazione in data 22 marzo 2019

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

Il bottone mi piace di Facebook:

Configuratelo da qui:
https://developers.facebook.com/docs/plugins/like-button

verificato su segnalazione in data 1 agosto 2019

Esempio funzionante:

Twitter

Il bottone "Seguimi su Twitter":

Potete configurarlo da qui:
https://publish.twitter.com/#

Oppure usare questo link:
https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fabout.twitter.com%2Fresources%2Fbuttons&region=follow_link&screen_name=nome in Twitter&tw_p=followbutton&variant=2.0

Al posto di "nome in Twitter" inserite il vostro nome utente di Twitter e, poi, potete mettere il link sotto un testo, o sotto un'immagine.

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:
https://developers.google.com/youtube/youtube_subscribe_button

Esempio funzionante (passate il mouse sul bottone)


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

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..
<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 di Skype:

Per configurare il bottone, dovete recarvi in questa pagina:

https://dev.skype.com/webcontrol

In alternativa, potete usare i link:

Link per chiamare una persona specifica:

<a href="skype:nome utente"><img src="URLimmagine"/></a>

verificato su segnalazione in data 29 luglio 2019

Link per chattare con una persona specifica:

<a href="skype:nome utente?chat"><img src="URLimmagine"/></a>

Al posto di "nome utente", dovete mettere il vostro nome utente di Skype e al posto di  "URLimmagine", dovete inserire l'indirizzo dell'immagine che volete usare, oppure un testo.
NOTA:Entrambi i link porteranno all'apertura dell'applicazione Skype presente sul computer dell'utente.

Il bottone di Whatsapp:

Il bottone whatsapp permette all'utente che naviga sul sito dal cellulare di inviarvi un messaggio tramite l'app. Naturalmente, sia voi che l'utente dovete avere whatsapp attivato sul cellulare.

Codice:
<a id="whatsappContact" href="https://api.whatsapp.com/send?phone=39XXXXXXX" target="_blank" rel="alternate">Chiamami con Whatsapp </a>
verificato su segnalazione in data 20 aprile 2019

Inserite il vostro numero di telefono comprensivo di prefisso e modificate il testo del link come preferite.

Il bottone "Contattami via email":

Semplice link che apre il client di posta del computer:

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 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.
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Continua con:

Leggi anche: Creare un sito da zero