Botones sociales ligeritos de peso para evitar demora en la carga – Hard drive – Platform

Los botones sociales que casi todos ponemos en nuestras páginas para que los lectores puedan compartir sus contenidos, son uno de esos elementos prácticamente fijos que suman peso en nuestras plantillas y afectan a la velocidad carga.

Cada botón que añadimos supone por una parte más código a cargar y no sólo por esas pocas líneas que ponemos, sino también por todo el contenido que dichas líneas generan al llamar a sus correspondientes funciones JavaScript o al contenido de otras páginas externas para mostrarse mediante iframes.

Por otra parte, cada llamada a esos sitios externos supone una nueva petición para el servidor que siempre es también motivo de algo de demora. Es verdad que para casi todos existen sistemas asíncronos (Google+,Pinterest) que alivian un poco este tema, ya que no cargan todo ese código hasta que el contenido principal de nuestro propio sitio no ha aparecido, pero a la postre, también se cargan y suman.

Un sitio dónde me gusta comprobar esto porque es muy gráfico es enPingdom Tools. En esa o cualquier otra herramienta similar, fijaros en los ficheros que se cargan y que llevan el nombre fb, twitter o plus, aunque simplemente con una conexión lenta (móvil) ya se puede apreciar perfectamente como esto de los botoncitos es de lo que más tarda en cargar.

Pero pocos~~quieren~~ queremos renunciar a esos botones y por otra parte, también nos gusta que luzcan hermosos y operativos en nuestro sitio ¿verdad?

Pues nada, hoy veremos un sistema para que todo eso que se tiene que cargar, sólo se haga cuando el usuario pinche en el botón en cuestión y por otra parte, que este tenga el aspecto que nosotros queramos... dentro de unos límites.

Porque eso sí, esta mejora tendrá un precio y será que tendremos que renunciar a los contadores de los botones. Pero ¿a quién le importan esos números además de a nuestro ego? Recordar que para conocerlos ya existen otras herramientas.

Todo el sistema se basa en usar direcciones específicas que permiten pasar parámetros y que casi todos los servicios tienen para poder remitir artículos. Aquí tenéís unalista de direcciones directas para compartir que incluye las redes más populares y alguna cosilla más por si con las seis que pondré no tenéis bastante.

Teniendo esas direcciones y añadiéndole unas cuantas variables, habremos resuelto el tema del lastre de los botones sociales.

No vamos a cargar nada a priori, ni librerías, ni imágenes externas, ni datos sobre contadores... nada. Todo serán enlaces (casi) simples y será después de que nuestra página haya terminado de cargar -no antes- cuando al pinchar los botones se lanzará una ventana emergente con el servicio escogido y automáticamente se añadirán en ella los datos del artículo: título, resumen, imagen, etc.

Sería algo como esto que podéis probar a continuación, pues los siguientes son botones de ese tipo, totalmente operativos.

Una vez explicado que esto son simples enlaces, para conseguir que se abran en ventana nueva lo que hacemos es añadir un JavaScript básico para generar un pop-up y mediante las variablesDATA de Blogger, ya añadimos el resto de datos que en cada caso nos son necesarios. Para otras plataformas el sistema sería el mismo pero utilizando las variables que le sean propias (y que desconozco).

Este sería el código a insertar en la plantilla, allá dónde queramos que aparezcan los botones. Como siempre, los dos sitios que parecen idóneos para Blogger serían dentro delpost-header o delpost-footer.

div class='botonera'
!-- Google+ --
div class='goog'
a expr:onclick='"window.open('http://plus.google.com/share?url=" + data:post.canonicalUrl + "&title=" + data:post.title + "','','width=500,height=500');"' href='javascript:void();'Google+/a/div
!-- Twitter --
div class='twit'
a expr:onclick='"window.open('http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl + " Vía:@oloman','','width=500,height=500');"' href='javascript:void();'Twitter/a/div
!-- Pinterest --
div class='pint'
a href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());'Pinterest/a/div
!-- Facebook --
div class='face'
a href='javascript:void();' expr:onclick='"window.open('http://www.facebook.com/sharer.php?s=100&p[title]=" + data:post.title + "&p[summary]=" + data:post.snippet + "&p[url]=" + data:post.canonicalUrl + "','','width=650,height=450');"'Facebook/a/div
!-- Menéame --
div class='mene'
a expr:onclick='"window.open('http://www.meneame.net/submit.php?url=" + data:post.canonicalUrl + "&title=" + data:post.title + "','','width=650,height=450');"' href='javascript:void();'Menéame/a/div
!-- Linkedin --
div class='link'
a expr:onclick='"window.open('http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.canonicalUrl + "&title=" + data:post.title + "&summary=" + data:post.snippet + "&source=Oloblogger','','width=650,height=450');"' href='javascript:void();'Linkedin/a/div
/div

No olvidéis cambiar los dos datos marcados en verde por los vuestros propios. Son en el botón de Twitter el usuario y en el de Linkedin, el de la fuente osource.

Con esto ya tenemos unos enlaces que servirán para compartir, pero como querremos algo un poco más mono, con CSS los animamos y de paso los hacemos adaptables (RWD). Este sería el estilo necesario para que quedaran como visteis antes.

.botonera {margin: 10px auto;text-align: center;font-size: 0;}
.botonera div {overflow: hidden;margin: 0px;display: inline-block;*display: inline; zoom: 1;}
.botonera a {display: inline-block; *display: inline; zoom: 1;width: 62px;height: 20px;margin: 2px;padding: 0 2px;color: white;text-decoration: none;line-height: 20px;text-align: center;font-family: arial;font-size: 12px;cursor: pointer;}
.botonera .face a {background: #3b5998;}
.botonera .twit a {background: #2daae1;}
.botonera .goog a {background: #dd4b39;}
.botonera .pint a {background: #ca2128;}
.botonera .mene a {background: #FF6400;}
.botonera .link a {background: #0079BB;}

¿Los queremos con otra pinta y quizás más gráficos? Pues nada comocrear un sprite y usarlo para los botones. Estos también funcionan con el mismo sistema. Probando si eso...

Para los perezosos, el CSS para este otro aspecto sería el siguiente y el sprite que utiliza está al final del post para descargarlo si lo queréis, pero espero que le echéis imaginación y a partir de ahora haya botones ligeros por todas partes con aspectos mil ;)

.botonera {margin: 10px auto;text-align: center;font-size: 0;}
.botonera div {text-indent:-9999px;overflow:hidden;margin:0px;display:inline-block;*display:inline;zoom:1; }
.botonera a { width:32px; height:32px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr-_WvxnBQikbRXKKrwLxUXHOLU4AJr71lertzESrB5bs-tvjHzXRHkg1EAa2zZ1yz55cj1mFTWEnCP0Jw9S_RauQHZjenw-OcjoTEt2CZyVNmDdspm8dts4clIcqZFum9766gxrll1h4/s1600/sprite-redes32.jpg);cursor: pointer;}
.botonera .link a {background-position: 0px 0px;}
.botonera .mene a {background-position: -32px 0px;}
.botonera .face a {background-position: -160px 0px;}
.botonera .twit a {background-position: -192px 0px;}
.botonera .pint a {background-position: -224px 0px;}
.botonera .goog a {background-position: -32px -32px;}