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>
ou
<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