le risposte semplici

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.

I link di condivisione dei principali social:

Lavorandoci un po', sono riuscita ad estrapolare i link di condivisione di molti social.
Modificate i campi in rosso, inserendo i vostri dati. Dove è previsto, potete inserire anche titoli e/o descrizioni, ma ricordatevi di farlo, sempre, separando le parole con il + e senza 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&title=Titolo

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

Per Linkedin:
https://www.linkedin.com/shareArticle?mini=true&url=URL da condividere

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&name=Titolo&description=Descrizione

Per Reddit:
https://www.reddit.com/submit?url=URL da condividere&title=Titolo

Per Pinterest:
https://www.pinterest.com/pin/create/button/?url=URL da condividere&media=URL immagine&description=Descrizione

Questi link, aprono le finestre di condivisione. Potete metterli sotto un testo, oppure sotto l'immagine di un logo, come ho fatto io nella mia sidebar.

Facebook

Il bottone di condivisione di Facebook:

Potete configurarlo da qui:
https://developers.facebook.com/docs/plugins/share-button?locale=it_IT

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

Per aggiungere un link di condivisione su Facebook, in una pagina del sito Google, la strada più semplice è, però, quella di usare questo link, mettendolo sotto un testo, o un'immagine a vostra scelta:
https://www.facebook.com/share.php?v=4&src=bm&u=URL da condividere

Al posto di URL da condividere, inserite l'indirizzo della pagina del vostro sito che volete far condividere. Si inserisce come un normalissimo link.

Se volete condividere in fb un'immagine specifica della pagina e volete che sia cliccabile e porti al vostro sito, il metodo migliore e` questo: assicuratevi che l'immagine abbia gia` il collegamento che desiderate, poi trascinate la foto dentro la casella "A cosa stai pensando" di fb.

ATTENZIONE!! A volte ci vogliano alcuni minuti prima di vedere apparire le immagini nella condivisione su FB.

Nel caso in cui le immagini visualizzate non corrispondessero all'attuale versione della pagina, dovete utilizzare il Debugger:
https://developers.facebook.com/tools/debug


....per cancellare la cache di Facebook. Basta inserire l'URL della pagina e cliccare su "Debug".

Il bottone "mi piace" di Facebook:

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

Esempio funzionante:

Il badge di Facebook:

Il badge di Facebook può essere creato e implementato seguendo le indicazioni di Facebook stesso:
https://www.facebook.com/badges/

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:

Ci sono due metodi.

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):

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>

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 .

Il bottone di Whatsapp:

Codice:
<a id="whatsappContact" href="https://api.whatsapp.com/send?phone=39XXXXXXX" target="_blank" rel="alternate">Chiamami con Whatsapp </a>

Inserite il vostro numero di telefono comprensivo di prefisso e modificate il testo del link come preferite. In alternativa potete mettere un'immagine.

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 e` 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: