14.10.10

1º pasos con AddThis

Después de dar vueltas y vueltas por el sitio oficial de AddThis buscando como hacer para incluir esta plataforma en sitios web encontré, finalmente, el llamado al archivo Javascript que contiene la biblioteca API de cliente (ó Client API).

Entonces, el primer punto a tener en cuenta para usar AddThis en un sitio es incluir el siguiente código (preferentemente antes de la etiqueta < /BODY>)
Código:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

Y si deseas incluir un seguimiento de estadísticas, debes registrarte en el sitio oficial y agregar tu ID de usuario al código:

Código:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ACCOUNT-ID"></script>

Ahora podremos crear un botón para compartir contenidos con las siguientes líneas:

Código:
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
   <a class="addthis_button_facebook" href=""></a>
   <a class="addthis_button_twitter" href=""></a>
   <a class="addthis_button_email" href=""></a>
   <a class="addthis_button_google" href=""></a>
   <a class="addthis_button_compact" href=""></a>
</div>

Esto nos da como resultado la siguiente botonera (iconos medianos):







Si quisieramos el tamaño estándar de los botones, debemos simplemente eliminar "_32x32" del código de modo que quede <div class="addthis_toolbox addthis_style addthis_default_style">






Aquí, seguramente por algun conflicto con códigos del blog, se apilan verticalmente los botones, pero en realidad quedan uno al lado del otro (ver ejemplo en el sitio oficial). A su vez, AddThis ofrece un modo de agregarlo como widget para blogger.com

Hay mil variables para personalizar nuestros botones de AddThis, y acá dejo un excelente ejemplo de esto (hacer click en el ícono que aparece)

Código completo del ejemplo de este post:
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
   <a class="addthis_button_facebook" href=""></a>
   <a class="addthis_button_twitter" href=""></a>
   <a class="addthis_button_email" href=""></a>
   <a class="addthis_button_google" href=""></a>
   <a class="addthis_button_compact" href=""></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

No hay comentarios. :

Publicar un comentario

Sentite libre de comentar, criticar y/o aportar tu granito en este (proyecto de..) mar de conocimiento ;)