Configurando e otimizando o AddThis

O AddThis é uma ferramenta que simplifica o compartilhamento, reunindo os principais botões de redes sociais em um script só. O código básico já vem com tudo que você normalmente precisa, mas tem algumas coisinhas que dá pra fazer para agilizar o carregamento e personalizar o widget.

Tenha as estatísticas de compartilhamento

Para ter acesso aos relatórios de compartilhamento gerados pelo AddThis, basta se registrar no site. Até o momento é cadastro é gratuito. Se você ainda não tem cadastro, mas já usa os botões, só precisa adicionar o ID do seu perfil a URL do javascript. Para saber qual o seu ID, vá até a página de perfis e veja na tabela qual o seu ID:

Código sem ID:

<!-- AddThis Button BEGIN -->
<div>
<a fb:like:layout="button_count"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<!-- AddThis Button END -->

Adicione o seu id, acrescentando #pubid=SEU_ID_AQUI ao final da url que chama o javascript.

<!-- AddThis Button BEGIN -->
<div>
<a fb:like:layout="button_count"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx"></script>
<!-- AddThis Button END -->

Carregando o AddThis de forma assíncrona

Também é possível otimizar o carregamento do AddThis usando a sua forma assíncrona, sem afetar o tempo de carregamento da sua página. Para ativar, basta adicionar a variável async=1 ao fim da url. Outra opção disponível é a domready=1 que habilita o carregamento depois que DOM está pronto.

<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx&async=1&domready=1"></script>

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#async=1&domready=1"></script>

Mas é preciso “chamar” o Addthis, então adicione antes de </body>:

<script type="text/javascript">
    function initAddThis() 
      {
             addthis.init()
      }
      initAddThis();
</script> 
</body>
</html>

Carregando tudo antes do </body>

Aqui no netmundo, eu decidi carregar tudo no fim da página. Eu coloco os botões onde eu quero que eles apareçam:

<!-- 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_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<!-- AddThis Button END -->

E logo antes do fechamento da tag body eu adiciono:

<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx&async=1&domready=1"></script>

<script type="text/javascript">
    function initAddThis() 
      {
             addthis.init()
      }
      initAddThis();
</script> 
</body>
</html>

Lembre de trocar o pubid pelo seu.

Mudando o alinhamento do widget

Por padrão, o widget fica alinhado para a esquerda da página. Altere isso com o código abaixo a sua folha de estilos. A propriedade width deve ter o mesmo tamanho que o widget ocupa no seu site.

Alinhando à direita

.addthis_toolbox {
 float:right;
 width:280px;
}

Centralizando o widget

div.addthis_toolbox {
width: 242px;
margin: 0 auto;
}

Confira outras dicas sobre o Addthis aqui no netmundo