Come Inserire Icone Social Network Sprite
     


Come Inserire Icone Social Network Sprite


Se avete almeno utilizzato una volta Page Speed Insights per testare le migliorie che si possono fare avrete certamente notato che tra le cose che vi vengono consigliate per velocizzare il vostro blog c'è "Combina immagini in sprite CSS". A questo punto la domanda sorge spontanea, ma cosa sono le immagini in sprite? E perché utilizzarle al posto delle solite icone social?


Secondo la spiegazione che ci dà Google:
La combinazione di immagini con la minor quantità di file possibile mediante l'utilizzo di sprite CSS riduce il numero di round-trip e ritardi nel download di altre risorse, limita il sovraccarico delle richieste e può diminuire il numero totale di byte scaricati da una pagina web.

Parole molto tecniche, ma quello che dovrete intendere voi è che anziché avere un numero di immagini diverse per i social network se ne dovrebbe utilizzare una per tutte in modo da diminuire il numero di richieste HTTP al server.

Per la piattaforma di Blogger andate su Layout > Aggiungi un gadget > HTML/JavaScript ed incollate il codice qui sotto:

<ul class="scuolissima_icone_sociali">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow" href="http://pinterest.com" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feeds.feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="0" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.scuolissima_icone_sociali {float:right;}
ul.scuolissima_icone_sociali li {float:left;list-style: none outside none;border:none;}
ul.scuolissima_icone_sociali li a{background-color:transparent;background-image:url('http://3.bp.blogspot.com/-qIzuikfkg-4/Ud3LVyxqWyI/AAAAAAAAS3E/vuSZkgVsazk/s1600/icone-sociali.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.scuolissima_icone_sociali li a, .ie8 ul.scuolissima_icone_sociali li a{background-image:url('http://3.bp.blogspot.com/-qIzuikfkg-4/Ud3LVyxqWyI/AAAAAAAAS3E/vuSZkgVsazk/s1600/icone-sociali.png' )}
ul.scuolissima_icone_sociali li.facebook a{ background-position:0 0}
ul.scuolissima_icone_sociali li.flickr a{ background-position:-32px 0}
ul.scuolissima_icone_sociali li.dribbble a{ background-position:-64px 0}
ul.scuolissima_icone_sociali li.googleplus a{ background-position:-96px 0}
ul.scuolissima_icone_sociali li.linkedin a{ background-position:-128px 0}
ul.scuolissima_icone_sociali li.pinterest a{ background-position:-160px 0}
ul.scuolissima_icone_sociali li.rss a{ background-position:-192px 0}
ul.scuolissima_icone_sociali li.skype a{ background-position:-224px 0}
ul.scuolissima_icone_sociali li.twitter a{ background-position:-256px 0}
ul.scuolissima_icone_sociali li.vimeo a{ background-position:-288px 0}
ul.scuolissima_icone_sociali li.youtube a{ background-position:-320px 0}
ul.scuolissima_icone_sociali li.facebook a:hover, #sidebar ul.scuolissima_icone_sociali li.facebook a:hover{ background-position:0 -32px}
ul.scuolissima_icone_sociali li.flickr a:hover, #sidebar ul.scuolissima_icone_sociali li.flickr a:hover{ background-position:-32px -32px}
ul.scuolissima_icone_sociali li.googleplus a:hover, #sidebar ul.scuolissima_icone_sociali li.googleplus a:hover{ background-position:-96px -32px}
ul.scuolissima_icone_sociali li.linkedin a:hover, #sidebar ul.scuolissima_icone_sociali li.linkedin a:hover{ background-position:-128px -32px}
ul.scuolissima_icone_sociali li.pinterest a:hover, #sidebar ul.scuolissima_icone_sociali li.pinterest a:hover{ background-position:-160px -32px}
ul.scuolissima_icone_sociali li.rss a:hover, #sidebar ul.scuolissima_icone_sociali li.rss a:hover{ background-position:-192px -32px}
ul.scuolissima_icone_sociali li.skype a:hover, #sidebar ul.scuolissima_icone_sociali li.skype a:hover{ background-position:-224px -32px}
ul.scuolissima_icone_sociali li.twitter a:hover, #sidebar ul.scuolissima_icone_sociali li.twitter a:hover{ background-position:-256px -32px}
ul.scuolissima_icone_sociali li.vimeo a:hover, #sidebar ul.scuolissima_icone_sociali li.vimeo a:hover{ background-position:-288px -32px}
ul.scuolissima_icone_sociali li.youtube a:hover, #sidebar ul.scuolissima_icone_sociali li.youtube a:hover{ background-position:-320px -32px}
</style>
<a style="visibility: hidden;" class="nturl" href="http://www.scuolissima.com/2013/07/icone-social-network-sprite.html">JavaScript</a>

Le uniche personalizzazioni che potete fare nel codice riguardano la modifica degli url dei rispettivi social network, ad esempio, sostituite alla voce Facebook il link della homepage di Facebook inserendo quello della vostra pagina o profilo personale. Stessa cosa dovete fare per gli altri e se ad esempio non siete registrati su altri siti vi conviene togliere la parte di codice che gli corrisponde, e per farvi un esempio se vorreste eliminare Vimeo il codice da rimuovere sarebbe questo:
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>

Queste icone le potete utilizzare anche su qualsiasi tema di un vostro blog realizzato su Wordpress andando su Aspetto > Widget > Testo. Lo utilizzo anche io in questo modo non ho il bisogno di installare uno di quei plugin inutili.



Nessun commento :

Scrivi un commento

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".