Nella guida Bottoni social e altro, potete trovare i link per la condivisione. Questi link possono essere messi sotto ad una immagine, o ad un testo a vostra scelta.
Le immagini per le icone, di ogni genere, sono facilmente reperibili in rete, ma esistono anche altri modi per implementarle. Vediamo ..
Per le icon fonts mi sono rivolta a Pixeden. Pixeden permette di scaricare, gratuitamente, un set di 100 icone. Queste icone vengono caricate nel sito esattamente come si fa con il font (vedi: Il font).
Una volta scaricato il pacchetto, copiate e incollate tutte le estensioni del font nella stessa cartella in cui tenete il font (o i font) del vostro sito.
Supposto che la cartella "fonts" si trovi (come dovrebbe) nella stessa cartella che contiene il foglio di stile e che questa cartella si chiami "styles", aprite il foglio di stile con il vostro editor e aggiungete il richiamo al font delle icone, così:
Ora, aprite il file html della pagina in cui volete inserire i social e, nel link di condivisione di ciascun social, aggiungete il collegamento alla relativa icona, con questa stringa:
<i class="pe-so-facebook"></i>
In questa pagina: http://themes-pixeden.com/font-demos/social/documentation.html trovate la documentazione di Pixeden con gli esempi e le possibili opzioni per personalizzare la grafica dei bottoni.Potete reperire le svg in rete, oppure trasformare in svg delle immagini jpg o png. Ci sono molti programmi online per questo, ve ne indico uno:
https://jpg2svg.com/Con questo comodo programma online potete ridimensionarle secondo la vostra necessità e offre anche icone gratuite:
https://icomoon.io/app/#/selectDato che le immagini SVG sono scritte in codice xml, potete aprirle con un qualsiasi editor di testo per modificarle.
Per cambiare il colore di base dell'icona dovete cercare la regola simile a questa:
fill="#0b5394"
Nella sezione "Risorse per i webmaster -> risorse 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.
Per indicazioni sui metatag dei social network leggi la sezione dedicata nella guida: La pagina web perfetta