Iconos sociales con CSS3 (sin utilizar los widgets oficiales)

Desde hace tiempo me parece fundamental que un sitio tenga los botones para compartir en los distintos soportes sociales del mercado, es una forma sencilla y rápida de promocionar nuestros sitios sin la necesidad de recurrir al posicionamiento web. Sin embargo siempre vi una gran contra relacionada al uso de los widgets de las distintas redes sociales y tiene que ver con el rendimiento de nuestros sitios.

Los widgets de las distintas redes sociales aumentan considerablemente el tiempo de carga de un sitio, esto se debe a que cada uno de ellos añade un numero de solicitudes externas, las mismas utilizan un tiempo importante, retrasando considerablemente el tiempo de descarga total de un sitio web.

Para solucionar este inconveniente las redes sociales más populares comenzaron a utilizar widgets de descarga asincrónica, algo que si bien es positivo no es tampoco una solución definitiva, aunque aliviana bastante el problema del rendimiento.

Una solución que me parece interesante es la de directamente no emplear los widgets oficiales, esto lo podemos lograr empleando nuestros propios botones, lamentablemente perderíamos cosas como los contadores, pero si lo que buscamos es no mermar el rendimiento de nuestro sitio, este es el camino más adecuado.

Social Sharing es un proyecto que propone utilizar los botones sociales elaboradores directamente con CSS3 sin emplear los widgets oficiales, estos estilos los podemos incluir directamente en nuestros archivos CSS y nuestro sitio no tendrá solicitudes HTTP adicionales. Una solución muy buena si lo que estamos buscando es un tiempo de descarga óptimo.

Este proyecto utiliza como base CSS al proyecto Kraken, principalmente para lograr una buena compatibilidad con los distintos navegadores, para que se den una idea de lo bien que funcionan los botones de este proyecto son compatibles hasta con Internet Explorer 6.

Otra ventaja de esta implementación es que resulta de lo más sencilla.

Ejemplo de uso:

Primero incorporamos a nuestro proyecto las hojas de estilo necesaria, esto lo podemos hacer vinculando los archivos a nuestro sitio o bien embebiendo los estilos en nuestras hojas de estilo y así ahorrar dos solicitudes HTTP:

<link rel="stylesheet" href="social-sharing.css">
<link rel="stylesheet" href="kraken-buttons.css">

Luego incorporamos el HTML necesario:

<a class="btn btn-tweet" href="#">Twitter</a>
<a class="btn btn-facebook" href="#">Facebook</a>
<a class="btn btn-google" href="#">Google+</a>
<a class="btn btn-linkedin" href="#">LinkedIn</a>
<a class="btn btn-pinterest" href="#">Pinterest</a>
<a class="btn btn-github" href="#">GitHub</a>
<a class="btn btn-vk" href="#">VK</a>
<a class="btn btn-xing" href="#">Xing</a>

Ya con los dos pasos anteriores tendremos los botones. Por ultimo debemos agregar los enlaces según sea necesario, cada red social provee un mecanismo distinto para vincular contenidos a ella:

<a target="_blank" href="https://twitter.com/intent/tweet?text=YOUR-TITLE
&url=YOUR-URL&via=TWITTER-HANDLE">Tweet</a>

<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=YOUR-URL">
Share on Facebook</a>

<a target="_blank" href="https://plus.google.com/share?url=YOUR-URL">
Plus on Google+</a>

<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true
&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY
&source=YOUR-URL">Share on LinkedIn</a>

<a target="_blank" href="http://pinterest.com/pin/create/button/?url=YOUR-URL
&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC">Pin on Pinterest</a>

<a target="_blank" href="https://vk.com/share.php?url=YOUR-URL
&title=YOUR-TITLE&description=YOUR-DESCRIPTION&image=YOUR-IMAGE-SRC
&noparse=true">Share on VK</a>

<a target="_blank" href="https://www.xing-share.com/app/user?op=share;
sc_p=xing-share;url=YOUR-URL">Share on Xing</a>

El proyecto es interesante y en lo personal lo considero la opción más rápida para incorporar la opción de compartir en redes sociales.