Botões AddThis compartilhar post nas redes sociais

Depois que eu lancei o Template Art Nouveaur, alguns leitores me enviaram sugestões de artigo, pedindo que eu ensinasse a instalar aqueles botões do AddThis, para compartilhar os artigos em redes sociais, que aparece no rodapé dos posts.
De fato, notei que ainda não existia tutorial publicado aqui sobre ele.
Na minha opinião, o AddThis oferece o serviço de compartilhamento de forma mais completa que já vi, pois este recurso permite o compartilhamento dos seus posts em mais de 270 redes sociais diferentes.
E o melhor, ele dá ao usuário diversas opções de escolha e personalização destes botões.
Eu uso este recurso do AddThis, se quiser conferir, passe o mouse em cima do último ícone no rodapé do post, em "Favorite e Compartilhe".

Como eu já citei acima, este recurso é tão completo, fornece tantas opções aos usuários que irei dividir o tutorial em 2 partes, para que não fique tão extenso, pois pretendo apresentar a vocês todas as formas possíveis de uso deste recurso, assim vocês terão a opção de escolher qual se encaixa melhor em seus blogs.

Neste artigo vou explicar como se cadastrar e instalar este recurso no seu blog e vou demostrar algumas opções de personalização dos botões, e no próximo vou ensinar uma forma de personalização mais avançada.

Obtendo o código:

1. Acesse a página www.addthis.com
2. Em "Where do you want to put your button" escolha a opção "Blogger".
3. Em "Select your style" escolha a opção de botões que você achar melhor.
Note que na coluna ao lado direito, em "Preview" você poderá visualizar como ficará o botão que você escolheu.
4. Se você quiser obter acesso as informações das estatísticas, saber quantas pessoas compartilharam seus post usando o AddThis, marque a opção "Do you want analytics".
5. Clique em "Get the Code".



6. O site vai pedir que você faça um pequeno cadastro. Preencha os dados para se cadastrar. É rápido, simples e é grátis.
7. Em "username" escolha um nome de usuário, vai ser através deste username que você fará acesso no site quando precisar.
8. Informe um email válido, pois será através dele que você receberá as informações das estatísticas, informando quantas vezes seu artigo foi compartilhado nas redes sociais.
9. Finalize o cadastro, clicando no botão "Register".

10. Na próxima página o site fornecerá um código. Copie este código.

Onde instalar o código:

Agora que você já escolheu e já configurou o seu botão, veja neste post as opções de local mais adequado para colar o código. Eu recomendo que você instale na linha do Rodapé do post.

Formas de personalizações simples do botão

No código fornecido pelo site, note que a palavra "Share" é em inglês, mas você pode alterar o "Share" para "Compartilhe".
Por exemplo:
Se você escolheu este modelo padrão

No código fornecido, na linha :

<a href='http://www.addthis.com/bookmark.php?v=250&amp;username=SEU-USERNAME' class='addthis_button_compact'>Share</a>

Substitua a palavra Share por "Compartilhe".


Lembre-se que no exemplo acima, onde está "SEU-USERNAME" é o seu nome de usuário, aquele que você cadastrou no site.

Acrescentando mais ícones:

Se você quiser, pode acrescentar mais ícones, basta escolher qual o ícone da rede social que você quer acrescentar e incluir no código. Inclusive pode incluir o ícone para imprimir.
Veja exemplo:
Após o cadastro que você fez, o site forneceu este código:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
<a href='http://www.addthis.com/bookmark.php?v=250&amp;username=SEU-USERNAME' class='addthis_button_compact'>Share</a>
<span class='addthis_separator'>|</span>
<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>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=SEU-USERNAME"></script>
<!-- AddThis Button END -->

Basta incluir o código referente ao botão que você quer acrescentar logo abaixo da linha com o último ícone, que no código acima seria a linha:
<a class='addthis_button_preferred_4'></a>

Veja exemplos:

   <a class="addthis_button_print"></a>
   <a class="addthis_button_myspace"></a>
   <a class="addthis_button_stumbleupon"></a>
   <a class="addthis_button_digg"></a>

O código ficaria assim:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
<a href='http://www.addthis.com/bookmark.php?v=250&amp;username=SEU-USERNAME' class='addthis_button_compact'>Share</a>
<span class='addthis_separator'>|</span>
<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_print"></a>
     <a class="addthis_button_myspace"></a>
     <a class="addthis_button_stumbleupon"></a>
     <a class="addthis_button_digg"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=SEU-USERNAME"></script>
<!-- AddThis Button END -->

Botões com CSS3 sem ícones:

Se você quiser, pode acrescentar apenas um botão simples, sem incluir ícones. Desta forma, quando o leitor passar o mouse em cima do botão, abrirá a janela com as opções das redes sociais para compartilhar o seu post.



1º passo:
Você deve escolher a opção de local mais adequado para instalar o código.
Eu recomendo que você instale na linha do Rodapé do post.

Após escolher o local para instalação, cole este código:

<style type='text/css'>
.addthis_share_btn a, .addthis_share_btn a:visited {
background: #222;   /*--edite a cor do seu botão--*/
display: inline-block;
padding: 6px 12px;
font-family: arial,helvetica,lucida,verdana,sans-serif;
font-size: 12px;
line-height: 1em;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.addthis_share_btn a:hover {
background: #111; /*--edite a cor do seu botão--*/
color: #fff;
}
.addthis_share_btn a:active { top: 1px; }

.addthis_share_btn a span, .addthis_share_btn:visited a span {
background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left;
padding: 1px 0 1px 18px;
}   
    
</style>
<!-- AddThis Share Button -->
<div class='addthis_toolbox addthis_share_btn'>
<a class='addthis_button_compact' href='http://addthis.com/bookmark.php'>
<span>Compartilhe</span></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- End AddThis Share Button -->

Agora basta personalizar a cor do botão de acordo com as cores do seu template, editando a cor em "background" que está destacado em vermelho, no código.

Se quiser, confira Demo


Amanhã eu vou ensinar outras formas de personalização mais avançada ;)