Le icone dei social network
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, ma esiste modi, forse più comodi, per implementare le icone dei social e ora ve li mostro.
Prima di tutto, esistono servizi come Font Awesome, tramite i quali si possono implementare tutte le icone desiderate, ma questi servizi presuppongono sempre un collegamento esterno e può capitare che gli sviluppatori decidano di modificare il metodo di implementazione, obbligando i webmaster a modificare tutte le pagine del sito.
Questa esperienza mi ha confermato che rendersi indipendenti è sempre la cosa migliore
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;
}
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.Il modo più semplice, a mio parere, per utilizzare icone SVG per i pulsanti dei social, è quello di raccoglierle in sprite, vale a dire in una singola immagine
Con questo comodo programma online ....
https://icomoon.io/app/#/select.... potete creare lo sprite che vi serve scegliendo direttamente le icone tra quelle in dotazione, oppure caricando le vostre personalizzate.
Dopo aver scelto e selezionato le icone, cliccate, in basso, su "Generate SVG & More"
Nella schermata successiva, cliccate su "Preferences". Impostate la dimensione delle icone, il colore ecc. Importante mettere la spunta su "Tiles (CSS sprite)"
Infine, cliccate su "Download" per scaricare il pacchetto zip contenente tutto ciò serve per l'implementazione.
All'interno della cartella troverete diversi file. Quella che interessa, nel caso specifico, è la cartella "sprite",
che contiene l'immagine svg, il relativo foglio di stile e il file html di esempio.
Dovrete aggiungere i link di condivisione dei vari social.
Ecco un esempio di link:
<a class="icon icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=URL pagina" target="_blank"></a>
Se volete, potete scaricare questa serie di icone preparate da me: Social icons sprite
Dato che, come detto, le immagini SVG sono scritte in codice, potete aprire lo sprite con un qualsiasi editor di testo per modificarle.
Per cambiare il colore, ad esempio, dovete cercare la regola simile a questa:
fill="#0b5394"
Che è riportata due volte, in ogni codice immagine, se nelle preferenze avrete impostato anche il colore di background.
NOTA: il colore di bg corrisponde al colore del simbolo del social, per esempio, in facebook, sarà la F, mentre il color(hrx) è il colore dell'icona.
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie