Come inserire i pulsanti dei social e altro

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 consigliabile e` quella di utilizzare, ove possibile, 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, in modo da non dover usare gli script e poterli inserire ovunque e semplicemente.
Modificate i campi in rosso, inserendo i vostri dati. Dove è consentito, potete inserire titoli e/o descrizioni, ma ricordatevi di farlo, sempre, separando le parole con il + e senza lasciare spazi bianchi, come vedete nel link per Twitter, dove ho inserito un testo d'esempio che potete cambiare a piacere.

Per facebook:
https://www.facebook.com/share.php?v=4&src=bm&u=URL da condividere

oppure (piu` attuale):
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 Google+:
https://plus.google.com/share?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!! Puo` capitare che ci vogliano alcuni minuti per vedere apparire le immagini nella condivisione su FB.

Se le immagini visualizzate non corrispondono 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 puo` 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:




Google+

I bottoni e i badget di Google+:

Per configurare il bottone G+1 bisogna andare a questo indirizzo:
https://developers.google.com/+/web/+1button/?hl=it
Anche il bottone G+1 puo` essere raggiunto tramite link. Il link e` questo:
https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&hl=it&origin=http://89q3b3mi3cr5h9s6q46udqp7eghebj4p-a-sites-opensocial.googleusercontent.com&url=URLsitoweb

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 e` 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 questo argomento vi rimando alla guida: Bottone Skype nel sito

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 ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con:
E molto altro ancora se leggi:
Tutti gli argomenti