Novo modelo de botões para compartilhamento do AddThis

Olá querido leitor, no artigo de hoje eu mostrarei como instalar o novo modelo de botões para compartilhamento de artigos do site AddThis. Eu já escrevi há algum tempo atrás, um artigo ensinando como adicionar botões de compartilhamento no Blogger, como os botões que eu utilizava aqui no blog. Porém, a equipe do AddThis acaba de lançar um novo modelo de botões de compartilhamento. Os novos modelos, são os que mostram uma contagem ao lado do botão para indicar quantas vezes o artigo foi compartilhado em uma determinada rede social, como ilustram as imagens abaixo.



Instalando os novos botões de compartilhamento do AddThis


1. Acesse o endereço: https://www.addthis.com/get-addthis. Caso você queira instalar os botões automaticamente no rodapé dos artigos de seu blog, escolha a plataforma "Blogger"; se você quiser ter a liberdade de instalar os botões em qualquer outra parte do seu blog do Blogger (exige conhecimento em HTML), escolha a opção "A Website" e, em seguida, escolha o estilo de botão com contagem, como ilustra a imagem abaixo.


2. Se você escolheu a plataforma "Blogger", você verá um grande botão laranja chamado Install Blogger Widget, clique sobre ele para instalar automaticamente os botões em seu blog (e você terá finalizado a instalação nessa etapa); se você escolheu a opção "A Website", você verá um campo com os códigos do botão, nesse caso, copie o código, cole-o no bloco de notas e continue seguindo o tutorial.

3. Agora adicionaremos o código no template do blog, você pode adicionar onde quiser — caso você conheça seu template, é claro. Eu mostrarei como adicionar os botões no rodapé dos artigos. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

4. Clique no botão Editar HTML. marque a caixa Expandir modelos de widgets, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

<div class='post-footer-line post-footer-line-3'/>

5. Imediatamente abaixo deste código, cole o código que você salvou no bloco de notas (que será semelhante ao mostrado abaixo).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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" tw:via="seu-usuario-do-twitter"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f91XXXXXXX29d2b"></script>
<!-- AddThis Button END -->
</b:if>


Agora vamos entender como funciona o código acima.
  • Em azul: este código não aparecerá no código que você obteve no site AddThis, ele foi adicionado por mim e serve para forçar que os botões apareçam somente nas páginas do artigo. Portanto, se você quiser que os botões apareçam somente nas páginas internas dos artigos, adicione esse código ao seu.
  • Em vermelho: código responsável por adicionar o botão do Facebook.
  • Em rosa: código responsável por adicionar o botão do Twitter. A parte: tw:via="seu-usuario-do-twitter", não aparecerá no seu código do AddThis, mas ela serve para mudar a frase "via @addthis", portanto, se você quiser ser citado quando um leitor compartilhar seu artigo no Twitter, insira essa parte no seu código e substitua a frase "seu-usuario-do-twitter" pelo seu nome de usuário; exemplo: hdblogoficial.
  • Em laranja: esse é o código responsável por adicionar o botão do Google Plus.
  • Em verde: esse é o código responsável por adicionar o botão laranja do AddThis (Share). Esse botão serve para que os leitores possam ver outras redes sociais para compartilhar o seu artigo.
  • Em roxo: esse código serve para diferenciar cada usuário, portanto, ele varia de acordo com cada pessoa que possui o código do AddThis.
6. Depois de fazer as mudanças, clique em Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto, agora os botões já estarão aparecendo no rodapé dos seus artigos. Apesar de algumas pessoas pensarem que isso nada mais é do que uma instalação manual dos botões, uma vez que a instalação automática do Blogger já faz todo esse processo. Há uma diferença bem grande!

Se você fizer a instalação automática do Blogger, você notará que será bem mais difícil customizar os botões, e que você não poderá adicioná-los aonde você quiser. Mas essa instalação manual é mais útil para pessoas que possuem conhecimentos em HTML. Se você gostou do artigo, achou ele útil ou ficou com algum tipo de dúvida, sinta-se a vontade para participar postando um comentário. E não se esqueça de divulgar nossos artigos! ;)

Atualização — 20.04.2012 às 17h25
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger, e para uma reformulação dos passos do tutorial devido a uma atualização nos botões do site AddThis. Alguns leitores informaram nos comentários, que após remover o código destacado em azul (para mostrar os botões somente dentro dos artigos) os botões passaram a aparecer na página inicial do blog. Mas que ao compartilhar algum artigo, o link compartilhado era o da página inicial e não o do artigo. Para quem estiver tendo esse problema, o mesmo pode ser resolvido fazendo a instalação automática dos botões, como é informado no passo 2 do tutorial.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 3 comentários neste artigo!

  1. Ótimo post! Agora consegui tirar o @AddThis. Obrigado

    ResponderExcluir
  2. Ola, pode ensinar a colocar o botão do Pinterest ao lado desses botões?

    ResponderExcluir
    Respostas
    1. Olá Anônimo, se você visitar a página inicial do AddThis agora, você verá uma opção que já contém o botão do Pinterest. Mas caso você queira adicionar o botão aos botões que você já possui instalado no seu blog, basta você procurar o código do passo 6 deste artigo no seu template, e logo abaixo da linha que foi destacada em laranja, colar o seguinte código:

      <a class="addthis_button_pinterest_pinit"></a>

      Espero que isso ajude. Volte sempre!

      Excluir