Botón para compartir en redes sociales

La amiga MC Chueco nos planteó una interrogante muy difícil de complacer. El tema de los botones para compartir nuestros contenidos en las redes sociales tiene tantas posibilidades como desarrolladores web existen.

Incluso el propio Blogger provee una serie de íconos para compartir que son sumamente apropiados y tienen dimensiones pequeñas. Claro, muchos prefieren poner solo algunos y de diseño que concuerde con la estética del blog, como para darle un toque personal a ese ítem.

En mi caso uso de todo un poco, según el blog donde los estoy ubicando. Por lo general resulta práctico usar algún sistema como Share This (http://www.addthis.com/) o Lockerz (http://share.lockerz.com/) Con cualquiera de los dos sistemas uno tiene muy poco que agregar y resulta sencillo ponerlo en funcionamiento.

Si no me creen vayan hasta estas web e intenten instalar alguno de sus códigos.

Pero para hacerla fácil les traigo el código necesario para instalar la tecla que uso en este blog y que corresponde a Share This.

No olvides hacer un resguardo de tu plantilla antes de hacer cualquier modificación, para así poder recuperarla si algo sale mal.

El código es muy sencillo:

<div class='share'>
<script src='http://w.sharethis.com/button/sharethis.js#tabs=web%2Cpost%2Cemail&amp;charset=utf-8&amp;style=default&amp;publisher=903046cd-e895-42fe-b2c0-51389ab5d9e6' type='text/javascript'/> </div>

Si quieres centrarlo en la página simplemente usa éste otro:

<div class='share'>
 <center>     <script src='http://w.sharethis.com/button/sharethis.js#tabs=web%2Cpost%2Cemail&amp;charset=utf-8&amp;style=default&amp;publisher=903046cd-e895-42fe-b2c0-51389ab5d9e6' type='text/javascript'/></center>
      </div>

Sólo tendrás que expandir artilugios y colocarlo preferentemente después del código  <div class='post-footer'> 

Con esto ya tendrás operativo el sistema, solo que aparecerá el siguiente símbolo en tamaño muy pequeño .

Como puede que tengas ganas de cambiar esto por algo más personal, deberás incluir un pequeño CSS antes del cierre ]]></b:skin>

Copia y pega:

 .share a{
     background: url(https://lh5.googleusercontent.com/-5UMKazmFfqE/UR1bXu7RIBI/AAAAAAAAcuU/z702XaHOsB8/s181/post-bookmarkPIN.png) no-repeat!important;
     width: 181px;
     height: 31px;
     padding: 0!important;
     margin: 0;
     text-indent: -100em;
     overflow: hidden;
     display: block;
}

Si quieres cambiar la imagen de la tecla simplemente diseña la tuya y substituye el código de URL de la imagen.

Listo 

Que lo disfrutes.