Mappa del sito
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
Per X (ex Twitter):
https://twitter.com/intent/tweet?text=Ti+consiglio+di+visitare+questo+sito:+https://www.lachiavenelpozzo.com
Per Linkedin:
https://www.linkedin.com/sharing/share-offsite/?url=https://www.lachiavenelpozzo.com
Per Tumblr:
https://www.tumblr.com/share/link?url=https://www.lachiavenelpozzo.com
Per Reddit:
https://www.reddit.com/submit?url=https://www.lachiavenelpozzo.com
Per Pinterest:
https://www.pinterest.com/pin/create/button/?media=https://www.lachiavenelpozzo.com/img/pozzo.jpg&url=https://www.lachiavenelpozzo.com
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.
Il bottone di condivisione di Facebook
Potete configurarlo da qui (ovviamente, dovete essere loggati in fb):Share button
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")
Esempio funzionante:
Follow @chiavenelpozzo
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
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
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&body=Visita+questo+sito:+URL vostro sito" title="Condividi via email"><img src="URL immagine bottone"/></a>
;
Esempio funzionante:
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>
&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>
&body=Contenuto del messaggio di posta">
<img src="URL immagine bottone"/></a>
Il bottone di Skype
Bottone di condivisione:
Skype share buttonLinks:
Link per chiamare una persona specifica:<a href="skype:nome utente skype">Chiama</a>
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