Le icone dei social network

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web


Questa pagina è parte della guida Come creare un sito da zero

Tutti conosciamo l'importanza che i social rivestono ai fini della popolarità di un sito web. Inserire nelle pagine i bottoni di condivisione sui social network significa dare una notevole spinta al posizionamento del sito nei motori di ricerca.

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 ..

Utilizzare le icon fonts

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

@font-face {
    font-family: 'pe-icon-social';
    src:url('./fonts/pe-icon-social.eot?-96eskg');
    src:url('./fonts/pe-icon-social.eot?#iefix-96eskg') format('embedded-opentype'),
        url('./fonts/pe-icon-social.woff?-96eskg') format('woff'),
        url('./fonts/pe-icon-social.ttf?-96eskg') format('truetype'),
        url('./fonts/pe-icon-social.svg?-96eskg#pe-icon-social') format('svg');
    font-weight: normal;
    font-style: normal;
}

Salvate.

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.

Utilizzare icone SVG

Metodo molto consigliato ultimamente. Le immagini in formato SVG ((Scalable Vector Graphics)) sono immagini create con grafica vettoriale, cioè in linguaggio xml e possono essere modificate con un semplice editor di testo, tramite il loro codice sorgente. Le immagini SVG si caricano più velocemente, perchè il loro peso è minore di quello delle immagini classiche JPG, PNG e GIF.
AGGIORNAMENTO: l'utilizzo delle immagini svg sotto forma di sprite non è più consigliato, perchè penalizzato da GoogleSpeed Insights in quanto prevede il caricamento di un' immagine di dimensione superiore a quella dell'icona effettivamente utilizzata. Si raccomanda, quindi, l'uso di immagini svg singole.

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/#/select

Dato 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

Elenco argomenti di questa guida:
Altro di interesse
Torna alla pagina principale:Creare un sito da zero ->>