Personalizar los botones para compartir de Blogger

No hace mucho comenté lo de la incorporación del botón Pinterest en el gadget de botones sociales de Blogger y en aquel momento recordé que tenía pendiente (entre otras muchas cosas), explicaros la manera en que se pueden personalizar esos botones para cambiar un poco su aspecto.

Los botones originales están construidos mediante CSS sprites y por eso técnicamente es fácil cambiarlos mediante la simple sustitución de esa imagen que sirve de base. No obstante, como Blogger aplica automáticamente su propio CSS, también será necesario ajustar un poco esas reglas.


Por otra parte está el botón +1 que se añade de manera distinta, por lo que veremos asimismo cómo cambiar su código para que estéticamente sea del mismo estilo que los otros.

Veamos paso a paso todo esto y al final el código para hacerlo de una sola vez.

Diseñar una imagen con los nuevos botones

Esta es la parte en la que la maña de cada cual marcará el resultado final. Se trata de construir una sola imagen que contenga de forma ordenada las imágenes individuales de todos los botones.

En un principio lo más cómodo sería tomar la imagen de la izquierda que es la que usa Blogger, cambiar su contenido respetando los límites para cada botón y por último, sustituir la original por la nuestra. Este es el caso sencillo, pero para ver más casos ya voy a empezar a destrozar cosas.

De entrada no las voy a hacer de 18px como las originales, sino de 24px. Tendrán fondo transparente y en lugar de tres imágenes por botón voy a usar sólo dos, una para el estado normal en tonos de gris y otra a color para cuando se pase el puntero por encima.

Lo básico es ser cuidadosos y que todas las imágenes estén ubicadas exactamente dentro de un cuadrado imaginario de 24x24px (en este ejemplo) y que cada uno esté bien acoplado con sus adyacentes sin dejar ni un píxel de más o de menos.

Para más información ver este otro artículo sobre cómo hacer Rollover con CSS y sprites y este otro sobre Generadores de sprites.

¿Que de momento no queréis calentaros la cabeza con esto? Pues nada, usad esta imagen de la izquierda que es la que yo voy a utilizar en el ejemplo.

Añadir estilo para sobreescribir el de Blogger

Para el estilo de sus botones, Blogger mete automáticamente CSS cuando carga cada página, razón por la que no es visible en la plantilla y no lo podemos modificar, pero lo que sí podemos hacer es añadir nuestro propio CSS e incluir !important dónde sea necesario para que nuestras reglas tengan prioridad.

Hay muchas que no hay que modificar y como al final del post incluyo las necesarias, no voy a hacer aquí una relación exhaustiva y sólo voy a destacar la que incorpora el sprite. Es esta y ya incluye la nueva imagen que os mostré antes:

.share-button {
width: 24px !important;
height: 24px !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBtcgD2wIiTOiQ7f_kZX6qqVFZP3SSFo_2_zHt-29NJO0GxLZc6ESIOvuKIPrB6dVSF0M1imwR4T34ZJUtzmzHeT7f-5bbjXyoZoZE0z5VI1wsbXrAD0ZPm2hHEgLY9IQR-ZKR8jw8wE/s1600/sprite-redes24.png) no-repeat left !important;
overflow: hidden;
margin: 2px !important;
position: relative;
}
.goog-inline-block {
vertical-align: top !important;
}

Nótese que he tenido que redimensionar a 24px y que he incorporado (opción) un pequeño margen para que los botones no queden todos pegados.

Cambiar el código del botón+1

Como supongo que lo que todos queremos es guardar una estética uniforme y el +1 siempre desentona un poco con el resto, será necesario modificar en la plantilla el código del gadget que genera este botón en concreto para así hacerlos todos homogéneos.

Para ello editamos el gadget con id='shareButtons' y cambiamos lo que a continuación veis marcado en verde por lo siguiente. Con el cambio dejamos también el código original inutilizado con símbolos de comentarios por si más adelante queremos volver a cómo estaba.

<b:if cond='data:top.showDummy'><a class='goog-inline-block share-button sb-google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Compartir en Google+' target='_blank'><span class='share-button-link-text'><data:top.shareToGoogleMsg/></span></a><!--<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>--></b:if>

Con eso el botón pasará de ser un +1 a un simple enlace que abre una ventana emergente para compartir en Google+, que es precisamente lo mismo que hacen el resto de botones de las otras redes (más información sobre URL's para compartir en redes sociales).

Un ejemplo completo

Si queréis ver cómo queda esto antes de lanzaros a crear vuestros propios botones o incluso si estos del ejemplo os gustan, podéis hacer el siguiente cambio en vuestra plantilla.

Buscáis la línea <b:includable id='shareButtons' var='post'> y localizáis su cierre </b:includable >, seleccionais todo el includable con las dos anteriores etiquetas de apertura y cierre inclusive y las sustituis por esto otro. Y si no queréis copiar y pegar tanto, pues simplemente seguir las indicaciones de los comentarios marcados en verde para cambiar el final del gadget y a continuación añadid el estilo.

<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showDummy'><!-- CODIGO AÑADIDO --><a class='goog-inline-block share-button sb-google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Compartir en Google+' target='_blank'><span class='share-button-link-text'><data:top.shareToGoogleMsg/></span></a><!-- FIN CODIGO AÑADIDO E INICIO CODIGO ANULADO <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>--></b:if>
<style>
.post-share-buttons {text-align: center;width: 100%;}
.share-button {width: 24px !important;height: 24px !important;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBtcgD2wIiTOiQ7f_kZX6qqVFZP3SSFo_2_zHt-29NJO0GxLZc6ESIOvuKIPrB6dVSF0M1imwR4T34ZJUtzmzHeT7f-5bbjXyoZoZE0z5VI1wsbXrAD0ZPm2hHEgLY9IQR-ZKR8jw8wE/s1600/sprite-redes24.png) no-repeat left !important;overflow: hidden;margin: 2px !important;position: relative;}
a.sb-email {background-position: 0 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a.sb-blog {background-position: -24px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a.sb-twitter {background-position: -48px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a.sb-facebook {background-position: -72px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a.sb-pinterest {background-position: -96px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a.sb-google {background-position: -120px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a:hover.sb-email {background-position: 0 -24px !important;}
a:hover.sb-blog {background-position: -24px -24px !important;}
a:hover.sb-twitter {background-position: -48px -24px !important;}
a:hover.sb-facebook {background-position: -72px -24px !important;}
a:hover.sb-pinterest {background-position: -96px -24px !important;}
a:hover.sb-google {background-position: -120px -24px !important;}
</style>
</b:includable>

He puesto el CSS necesario a continuación del gadget para una más fácil sustitución, pero también podéis ponerlo entre las etiquetas skin (sin las etiquetas style en ese caso).

Si lo probáis veréis que también incluí un pequeño efecto para el hover con transition y si no, pues aquí abajo tendéis una demo del resultado pero con los enlaces anulados.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter