♡ 20☆ Personalizando los botones sociales de AddThis

20 Compartir en Facebook Compartir en Twitter Enviar entrada por correo Imprimir artículo

AddThis es una antigua pero muy buena opción para agregar de una tacada varios botones sociales. Con ellos vuestros lectores podrán enviar fácilmente las entradas que les gusten a las más conocidas redes.

También podrán utilizar directamente otros servicios adicionales como enviar el post por correo, añadir a Google Reader o imprimir la página. Este proveedor facilita además un botón adicional desplegable que con sólo pasar el puntero por encima de él, conduce a más de 300 destinos distintos.

La forma de conseguir el artilugio es bastante sencilla pues sólo hay que seleccionar uno de los tres estilos que se ven en su portada, pinchar en GET CODE y copiar el código que aparece.

Hay una pantalla intermedia para registrarte que puedes cerrar sin problemas si no deseas ser fichado, ya que esto sólo sería necesario si además de los botones, quieres poder consultar posteriormente ciertos datos analíticos -por otra parte interesantes- sobre su utilización.

El resultado en cualquier caso será algo cómo esto, dónde ya podéis comprobar cómo funcionan los botones y sobre todo el de fondo rojo que lleva un signo +. Desde ese se puede acceder a los 10 que hayamos marcado como favoritos y que incluye una última opción para acceder al resto: más...(334).

El código por defecto será este y lo vemos para entender las modificaciones que a continuación vamos a realizar:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ee1153f3c5aa1d6"></script>
<!-- AddThis Button END -->

He marcado unas cuantas cosas en verde porque son las que vamos a ver cómo cambiar.

En primer lugar nos fijamos en la parte de abajo, que es dónde aparece el código de seguimiento para el análisis posterior de los botones. Es el dato que viene tras #pubid y que en el ejemplo es el xa-4ee1153f3c5aa1d6. Aunque creo que si no necesitáis análisis os da igual cual poner, lo comento por si estáis en el caso contrario y tenéis que usar el vuestro propio, el que os asigne AddThis.


Lo siguiente a destacar es que las líneas <a class="addthis_button_preferred_1"></a> las podéis intercambiar de sitio entre ellas para que los botones se muestren el el orden que vosotros queráis.

El siguiente cambio que podemos hacer directamente desde el código es el estilo de los botones. Para ello sólo tenemos que modificar la clase bajo la que va todo el artilugio, con las siguientes opciones:

• class="addthis_toolbox addthis_default_style"
  ➽ Botones por defecto de 16x16 px
• class="addthis_toolbox addthis_default_style addthis_32x32_style"
  ➽ Botones de 32x32px

Y para el final la parte que me parece más interesante: la forma de incluir los botones concretos de los servicios que nosotros queramos. Para esto lo que habría que cambiar sería la última parte de addthis_button_preferred_1. En esa última parte (en verde) tendremos que sustituir la expresión preferred_X por el nombre del botón que deseamos.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style ">
<a class="addthis_button_twitter"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_googlebuzz"></a>
<a class="addthis_button_meneame"></a>
</div>
<script src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ee1153f3c5aa1d6" type="text/javascript">
</script>
<!-- AddThis Button END -->

Algunos son tan fáciles cómo poner el nombre del servicio, pero otros vienen un poco modificados por existir servicios con nombres similares o varias opciones para el mismo servicio. Para salir de dudas, lo mejor es comprobar la denominación exacta en este listado que nos ofrece AddThis. Con esa guía podremos montar una batería de botones tan larga como queramos.

✚

✚

✚

✚

Como veis se pueden incluir algunos servicios que no se corresponden con redes sociales y que también pueden resultar interesantes, como el acortador bit.ly o el traductor de Google.

Faltan los botones que permiten contadores, pero esos tienen algunos parámetros que varían según el tipo de botón y no he encontrado un listado como el anterior. Hay que tener en cuenta que Google Plus siempre se muestra con contador, así que no se puede poner de otra manera. De todas formas, para los siguientes servicios y un ancho de 16px, he encontrado los más usuales: Facebook Like, Twitter, Google Plus y el propio de AddThis:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<!-- AddThis Button END -->

Y casi se me olvida... El sitio dónde insertar este código, sea el que sea el que utilicéis es libre. Por ejemplo lo podéis copiar dentro de un gadget en la barra lateral, que parece la opción más fácil, pero quizás el sitio más adecuado es dentro del pie del post (post-footer) en algunos de los post-footer-line post-footer-line-X que casi todas las plantillas Blogger suelen llevar.

¿Vemos otro post al azar por si le encuentras utilidad?