!Que importante es tener los botones de compartir visibles en nuestro blog! Es la mejor manera junto con las redes redes sociales de difundir nuestro contenido de una manera pasiva lo que contribuirá a mejorar nuestro posicionamiento como bloggers, aumentar visitas y por que no, contribuir a tener un blog bonito y coordinado con el diseño de los botones con la estética de nuestro blog.

 

Hay varias opciones muy diferentes de añadirlos que he ido recordando preparando un post sobre consejos para hacer que los demás compartan nuestros posts, que saldrá en breve. Escribiendo este post me acordé de lo que me costo encontrar la manera de incluirlos al final de cada entrada sin códigos super largos y complicados y con unos botones que siguieran la línea del diseño del blog.

 

Así sin más rollos vamos directamente al como hacerlo que este post es totalmente práctico y no quiero enrollarme más de lo necesario.

Lo primero es editar plantilla en vuestro escritorio de blogger (recordad hacer una copia de seguridad previa, por si las moscas).

 

Debéis buscar en la plantilla <div class=’post-footer’> poniendo el cursor dentro de la plantilla y presionando CTRL+F encontráis dos es muy importante que lo añadáis justo después del segundo, sino no funcionará.

Este es el código:

 

<center><div class=’addthis_toolbox’>
<div class=’custom_images’>
<a class=’addthis_button_share’><img alt=’Share this Post’ border=’0′ src=’http://i59.tinypic.com/e690lj.jpg‘/></a>
<a class=’addthis_button_facebook’><img alt=’Share to Facebook’ border=’0′ height=’30’ src=’http://i62.tinypic.com/skuz4o.jpg‘ width=’30’/></a>
<a class=’addthis_button_twitter’><img alt=’Share to Twitter’ border=’0′ height=’30’ src=’http://i61.tinypic.com/6jj60o.jpg‘ width=’30’/></a>
<a class=’addthis_button_email’><img alt=’Email This’ border=’0′ height=’30’ src=’http://i59.tinypic.com/15cburc.jpg‘ width=’30’/></a>
<a class=’addthis_button_pinterest_share’><img alt=’Pin This’ border=’0′ height=’30’ src=’http://i58.tinypic.com/k04yf4.jpg‘ width=’30’/></a>
<a class=’addthis_button_google_plusone_share’><img alt=’Share on Google Plus’ border=’0′ height=’30’ src=’http://i57.tinypic.com/oscv2s.jpg’ width=’30’/></a>
</div>
</div></center>
<script type=’text/javascript’>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script>
<script src=’//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd’ type=’text/javascript’/>

 

NOTA IMPORTANTE: Si al copiar y pegar este código te da algún error es debido a las comillas. Tendrás que sustituirlas manualmente por comilla simple ‘ . Lo mejor el copiar el código y pegar en un word sin formato (segundo botón del ratón) e ir sustituyendo cada comilla por una comilla simple ‘.

 

P.D: Este código esta basado en la herramienta Addthis desde la cual, previo registro, podéis añadir los botones que os propone mediante un simple widget o directamente en vuestra plantilla.

 

<center></center> sirve para que queden centrados. Si los queréis a la derecha tenéis que sustituirlo por <right></right>. Si no ponéis nada saldrán a la izquierda como los míos.

 

Todo el código en azul son la urls de la imágenes de los iconos correspondientes. Si queréis podéis usar lo míos y dejar el código tal cual. El tamaño lo podéis variar cambiando los 30 que hay en el código.

 

Y si quiero poner unos iconos diferentes, ¿De donde los saco?

Si domináis el diseño gráfico o tenéis ganas de experimentar, animaros a diseñar los vuestros propios con programas como pickmoney, Pirxl, Photoshop,..Hay un motón de tutoriales en la red que os enseñaran como.

 

Para los más vaguetes, os podéis descargar algunos de los set de botones que tengo en mi tablero de Pinterest ICONS. Subirlos a un servicios de alojamiento de archivos/imágenes tipo Dropbox, Tinypic,..y sustituir la url del código anterior por la de estos botones.

 

Por último si te gusta el estilo sencillo y minimalista puedes entrar en Iconsdb, una web donde podrás encontrar, personalizar( en tamaño y color), y descargar una gran variedad de iconos para tu blog. Esta es la web de donde saque los mismos de una manera super sencilla.

 

 

 

En la primera página puedes elegir los iconos a partir de un color (bien con el código del color o haciendo click en la paleta que te propone la página), escribiendo el tema en la caja de búsqueda (ten en cuenta que debes hacerlo en inglés→ Para los iconos yo puse social media) o pinchando sobre la categoría deseada en la nube de la derecha.

 

Una vez elegido el icono solo te queda elegir el formato (te aconsejo que sea png ya que tiene el fondo transparente de serie) , el tamaño (los míos son 32×32) y dar a la flechita de descargar. Para añadirlos al código de tu plantilla solo tienes que subirlos a tu alojamiento de imágenes favorito y poner su url en el código azul.

 

 

Por último puntualizar que si tenéis los botones de compartir que vienen por defecto en blogger, aunque instaléis éstos personalizados, los de blogger permaneceran en la versión móvil de vuestro blog.

 

Pues ya no tienes excusa para poner unos botones a tu gusto y estilo de una manera muy fácil. Me encantaría ver como te han quedado, así que cuéntame en los comentarios si decides hacerlo. Un saludo y nos vemos por las redes.

 

 

¿Te ha sido de utilidad el artículo?
(Votos: 1 Promedio: 5)

Pin It on Pinterest