[Serviços] - Como adicionar botões de compartilhamento no Blogger

Com o atual crescimento das redes sociais, vem se tornando indispensável divulgar os artigos do blog através desses meios de comunicação. Os botões de compartilhamento (share buttons) tem a finalidade de facilitar essa divulgação e são com certeza um recurso extremamente indispensável em qualquer blog. Adicionando tais botões no seu blog, você possibilita que seu leitor divulgue os artigos que achou interessante com os amigos e contatos de redes sociais, tais quais: Twitter, Orkut, Facebook etc. E isso, pode ser uma ótima fonte de novos visitantes para o seu blog!

AddThis - Facilitando o compartilhamento

Existem diversos serviços e maneiras de adicionar botões com a função de compartilhamento em um blog, mas neste tutorial veremos como adicionar os botões fornecidos pelo site AddThis, que talvez seja um dos mais utilizados mundialmente, e com a vantagem de ser totalmente gratuito!

Instalando os botões


1. Acesse o endereço: https://www.addthis.com/get/sharing e você será uma mensagem solicitando que você faça login ou crie uma conta. Esse cadastro serve apenas para quem deseja recolher estatísticas sobre em quais redes sociais seus artigos são mais divulgados, mas não é necessário fazer tal registro. Em seguida, escolha a plataforma Blogger, e escolha um dos estilos de botões disponíveis, como ilustra a imagem abaixo.


2. Após ter escolhido o estilo que mais lhe agrada, você notará que um botão laranja chamado Install Blogger Widget aparecerá abaixo da pré-visualização, clique nesse botão. Após ter clicado você verá uma janela como a mostrada na imagem abaixo, basta escolher em qual blog você deseja instalar os botões e clicar no botão Adicionar widget.


Pronto, os botões de compartilhamento já deverão estar aparecendo em seu blog, basta acessá-lo para testar os botões e verificar se os mesmos estão funcionando corretamente.

Removendo a frase "via @addthis"


Se você clicar no botão de compartilhamento do Twitter, você notará que no final do tweet aparecerá a frase "via @addthis". Seria interessante que você mudasse essa frase para o seu nome de usuário do Twitter, para quando seus leitores compartilharem seus artigos nessa rede social, você seja citado. Mas como fazer isso? O processo é muito simples. Basta seguir os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Layout e em seguida clique no link Editar do gadget que foi adicionado pelo AddThis quando você instalou os botões.

2. Você não deve alterar nenhuma parte do código que está dentro do gadget, o que você deve fazer é copiar o código abaixo e colar após o final do conteúdo que já há dentro do gadget.

<script type='text/javascript'>
var addthis_share = {
templates: { twitter: '{{title}} {{url}} via @seu-usuário-do-twitter' }
}
</script>


Agora iremos entender o código acima:
  • A parte destacada em azul, é responsável por adicionar o título do artigo ao tweet;
  • A parte destacada em verde, é responsável por adicionar a URL do artigo ao tweet;
  • A parte destacada em vermelho, deve ser substituída pela frase que você deseja que apareça no final do tweet, como por exemplo, "via @hdblogoficial" ou "Não perca este artigo!".

3. Após adicionar o código basta clicar no botão Salvar.

INFORMAÇÃO: caso você não queira que apareça a frase: "via @seu-usuário-do-twitter", basta apagá-la ou escrever qualquer outra coisa que você queira. O importante é deixar as partes que foram destacadas em azul e verde. Você pode alterar a ordem dos códigos também, caso queira.

Agora seu tweet aparecerá como ilustrado na imagem abaixo no Twitter.


Atualização — 06.08.2011 às 20h10
Os passos do tutorial foram atualizados para refletir as mudanças realizadas no site AddThis, e para refletir mudanças realizadas no painel de controle da plataforma Blogger.

Atualização — 14.09.2011 às 02h15
O código para alterar a frase "via @addthis" não funcionará para os leitores que estiverem utilizando a nova versão dos botões de compartilhamento do AddThis (os que possuem contagem), para alterar a frase nesse novo modelo de botões, confira o artigo: Novo modelo de botões para compartilhamento do AddThis.
É 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 19 comentários neste artigo!

  1. Ebaaa xDD
    mais uma dica ótima
    funciono xDDD
    vlw

    ResponderExcluir
  2. Muito obrigado pela sua dica!!!
    demorei mais consegui terminar!
    vlw

    ResponderExcluir
  3. Olá, muito obrigado pelo tutorial!
    Peço ajuda para mudar o @Add This para @Meu usuário do twitter.
    Não consegui localizar a parte do código que é pra ser inserido o script. Aguardarei a resposta, valeu!

    ResponderExcluir
  4. deu certo, só não consigo tirar o via @AddThis, não si por nada. Que estou fazendo de errado?
    Obrigada

    ResponderExcluir
  5. Mel: o que pude ver no código fonte do seu template, é que você colocou o script para remover o “via @addthis” de maneira incorreta. Você colocou da seguinte maneira:
    <script type='text/javascript'>
    var addthis_share = {
    templates: { twitter: '{{title}} {{url}}
    </script>

    Esta faltando duas chaves e um apóstrofe depois de URL, o código correto seria:
    <script type='text/javascript'>
    var addthis_share = {
    templates: { twitter: '{{title}} {{url}}'}
    }
    </script>

    Com certeza isto ajudará. Qualquer dúvida, comente novamente. Volte sempre!

    ResponderExcluir
  6. Oi, como faço para desinstalar completamente o addthis do Blogger?

    ResponderExcluir
  7. Talândio: depende do tipo de botão que você escolheu instalar no seu blog, mas tente o seguinte: acesse o menu “Design > Editar HTML”, faça uma cópia de segurança do seu template, em seguida marque a opção “Expandir modelos de widgets”. Pressione Ctrl+F para abrir a janela Localizar do navegador, e procure pela palavra “addthis”, apague os códigos referentes ao mesmo e salve o template. Agora só verificar se os botões foram removidos do seu blog, espero que isso lhe ajude. Volte sempre.

    ResponderExcluir
  8. Eu não consegui achar o código de rastreamento, e tbm estou com um botão do twitter que não consigo tirar do meu blog. Se for mt dificil colocar esses botões, quero deixar sem nenhum, porque não sei nem mexer em CSS T.T

    ResponderExcluir
  9. Paloma: seu perfil do Blogger é bloqueado e, infelizmente, não consegui acessar seu blog para ver o que houve. Se o problema ainda persiste informe o endereço do seu blog, ou, se preferir, tente instalar esse outro modelo: http://bloggandonaweb.blogspot.com/2011/02/novo-modelo-de-botoes-para.html. Agradeço a visita, volte sempre.

    ResponderExcluir
  10. Oliveira Verdadeira7 de fevereiro de 2012 13:33

    Essa dica realmente valeu! (:
    Obrigada.

    ResponderExcluir
  11. Valeu pela dica.Obrigado!

    ResponderExcluir
  12. CAro Igor:

    Adicinei e não gostei muito!
    Como faço agora para remover os botões addthis?

    Obrigado e um abraço,

    André Araújo
    ATEC-BA

    ResponderExcluir
    Respostas
    1. Olá André, para remover os botões basta você deletar o gadget do AddThis no menu Layout do seu painel de controle. Agradeço a visita.

      Excluir
  13. Olá! Eu coloquei este widget e não apareceram os botões! Você sabe me dizer porque?

    ResponderExcluir
    Respostas
    1. Olá Doação Lollota, pode ser porque você não utiliza um template nativo do Blogger, o que faz com que os códigos da estrutura do seu template sejam diferentes, fazendo com que a ferramenta do AddThis não localize os códigos de referência para instalar os botões. Uma alternativa seria você instalar os botões manualmente utilizando a opção "Website" (veja a imagem do passo 1) e em seguida copiando o código do botão e colando onde você deseja que eles apareçam.

      Excluir
  14. Cara adorei a dica, está de parabéns!

    ResponderExcluir