Botones para 21 redes sociales con contador – Motor

Juan Martín deCheckApps nos hizo conocer hace unos días la existencia de un servicio gratuito que permite crearbotones sociales personalizados. Así dicho no es nada del otro jueves, pero cuando descubrimos que admite ahora mismo 21 redes distintas, que incluye contadores de las veces que se ha compartido una dirección o de los seguidores que tiene una página y sobre todo, lo fácil que resulta añadirlos a nuestro sitio, la cosa se empieza a poner más interesante.

El sitio en cuestión es GetShares y dispone de un instalador para generar el código de cualquier botón con tres opciones de estilo, pero lo más interesante a mi parecer es aprovechar su API para poder crear una andanada de botones. Es lo que veremos en esta entrada.

En la página degetshar.es está el generador de botones, una utilidad para ver los contadores de cualquier dirección web en varias redes de una sola vez y unos apuntes sobre la API algo más intuitivos que los del proyecto. Este último lo podéis encontrar completo enGitHub.

El servicio funciona gracias a un fichero js que junto con jQuery desarrolla todo el sistema de botones y adicionalmente hay un .css para que sea fácil configurar el estilo de los mismos. Ambos ficheros podéis descargarlos y alojarlos bajo vuestro control (respetando la licencia) por si el servicio llegara a saturarse alguna vez, cosa que de momento parece que no ocurre. Al contrario, de momento van bastante rápido.

Eso sí, el JavaScript no es autosuficiente y si algún día GetShar.es deja de ofrecer el servicio, aunque tengas el control del código los botones dejarán de funcionar.

La forma de añadirlos a Blogger es un poco diferente de lo allí explicado, porque para poder usar los botones con direcciones dinámicas tendremos que echar mano de las variablesdata y para que estas funcionen como parte de un JavaScript, tenemos que hacer adicionalmente una chapucilla que consiste básicamente en "medio-convertir" el código en texto plano.

De esta manera, esto es lo que habría que poner en vuestra plantilla, tal cual, dentro de la zona de generación de posts y quizás los mejores sitios serían dentro de la cajapost-header o de lapost-footer.

Aunque no es muy ortodoxo poner todo esto seguido en la parte HTML, lo he hecho así para que sea más fácil poner o quitar de una vez. Además he añadido una regla de estilo para que en cualquier caso los botones queden centrados... como estos que siguen que son ya reales y la demostración palpable de cómo funcionan.

!-- BOTONES SOCIALES GETSHARES --
b:if cond='data:blog.pageType == "item"'
div id='buttons'/
script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/
script src='http://cdn.getshar.es/lib/0.8.0.min.js' type='text/javascript'/
link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/
style#buttons{text-align:center; margin:10px auto;font-weight:normal;}/style
script type='text/javascript'
(function(){
var settings;
settings = {
root: $("#buttons"),
counter: {
position: "inside"
},
share: {
url: "data:post.canonicalUrl/",
imageUrl: "data:post.firstImageUrl/",
message: "data:post.title/" + " data:post.canonicalUrl/ Vía: @oloman"
}
};
new GetShare($.extend(settings, {network: "googleplus"}));
new GetShare($.extend(settings, {network: "twitter"}));
new GetShare($.extend(settings, {network: "facebook"}));
new GetShare($.extend(settings, {network: "linkedin"}));
new GetShare($.extend(settings, {network: "pinterest"}));
new GetShare($.extend(settings, {network: "pocket"}));
//Más redes en http://getshar.es/
}).call(this);
/script
/b:if

En todo eso lo único que debemos cambiar es el apartado delmessage si es que queremos que salga algo distinto de título-dirección-vía y, evidentemente, el usuario Twitter porque el que figura es el mío.

Para presentarlos con otro aspecto (muy parecido realmente) se puede cambiar el valor deposition eligiendo entreinside (dentro del botón) ysplit (como añadido al botón). También se puede añadir un parámetro adicional ensettings para que el botón muestre un texto a la derecha del icono de la red. Por ejemplo:button: {text:'Compartir'}.

La última parte del código es la que que genera cada uno de los botones (new GetShare...) y ahí debemos incluir tantas líneas como botones, indicando ennetwork el nombre de la red correspondiente. La lista completa está enesta página de GetShares.

Un inconveniente es que los botones se añaden a una caja vacía mediante una ID (#buttons, en el ejemplo), lo que provoca que no se pueda colocar más de una tanda de botones por página. Por ese motivo le he añadido ese condicional que visteis, para que no se muestre mas que en páginas de entradas dónde los posts son únicos.