Como colocar os botões de compartilhamento com o AddToAny Share. [Com o WhatsApp incluso!!!]

Aprenda a incluir uma barra com botões de compartilhamento com o WhatsApp incluso.


Redes sociais são grandes fontes de tráfego para blogs, quando os leitores do blog resolvem compartilhar seus artigos com certeza seu blog terá bons resultados nas estatísticas.

Pensando nisso, pode ser interessante inserir no seu blog, botões para compartilhar o artigo nas redes.

Mas e o WhatsApp? Não seria legal ter um botão que facilita a vida dos seus leitores ao compartilhar conteúdo através do WhatsApp?

O AddToAny permite tudo isso e a instalação é fácil e rápida.

Então vamos ao tutorial:


Caso você se interesse em saber mais sobre dicas e tutoriais para blogs acesse nossa página Tutorial Blogs e encontre tudo o que você precisa para o seu blog bombar...

#01  Para começar acesse o site do AddToAny e clique em Get the Share Buttons.

#02  Escolha a plataforma, neste caso vamos de Blogger.

#03  Neste momento você terá duas opções, ou instala o modelo padrão do AddToAny, ou personaliza o código para alterar as redes sociais que aparecerão na sua barra.

       Clicando em Install Blogger Widget você será direcionado (caso esteja logado) para uma tela onde irá selecionar um blog, depois basta clicar em Adicionar Widget e pronto.

       Caso você prefira clicar em Edit Buttons HTML uma caixa com o código a seguir, ele irá aparecer para você personalizar a sua barra de botões.

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <a class="a2a_button_facebook" href="https://www.blogger.com/null"></a>
    <a class="a2a_button_twitter" href="https://www.blogger.com/null"></a>
    <a class="a2a_button_google_plus" href="https://www.blogger.com/null"></a>
    <a class="a2a_button_pinterest" href="https://www.blogger.com/null"></a>
    <a class="a2a_dd" href="http://www.addtoany.com/share_save"></a>
</div>

Caso você queira alterar alguns dos botões basta trocar no nome dele no trecho _button_nome". Por exemplo, para trocar o Pinterest pelo WhatsApp altere:

<a class="a2a_button_pinterest" href="https://www.blogger.com/null"></a>

Por este outro código:

<a class="a2a_button_whatsapp" href="https://www.blogger.com/null"></a>



É possível inserir o gadget diretamente dentro do HTML, este outro método pode ser necessário para aqueles que não conseguiram um bom resultado com o método anterior, então é o seguinte:

Acesse a página Modelo e clique no botão Editar HTML, no código do seu blog procure por: <data:post.body/>

Logo abaixo desta linha cole o código asseguir:
<!-- AddToAny BEGIN -->
<br/><a class='a2a_dd' href='http://www.addtoany.com/share_save'><img alt='Share/Bookmark' border='0' src='//static.addtoany.com/buttons/share_save_171_16.png' width='171' height='16'/></a><p class='a2a_linkname_escape' style='display:none'><data:post.title/></p><script type='text/javascript'>var a2a_config = a2a_config || {};a2a_config.linkname_escape=1;a2a_config.linkurl="<data:post.url/>";</script><script src='//static.addtoany.com/menu/page.js' type='text/javascript'></script>
<!-- AddToAny END -->

Simples né? Falando em compartilhamento que tal inserir o sistema de comentários do Facebook no seu blog, show de bola certo? Clique aqui e veja o tutorial que preparei para você acrescentar mais este recurso.

Agora os seus leitores irão compartilhar o seu conteúdo fácil fácil.

Caso tenha gostado compartilhe, comente, faça um sinal de fumaça enfim se expresse de alguma forma, obrigado e até a próxima.
SHARE

Alexandre Santos

Eu sou Alexandre Santos, graduado em Sistemas de Informação pela Faculdade Pitágoras, e professor a mais de 8 anos. Me aventurando como blogueiro afinal conhecimento só é útil quando compartilhado.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

33 comentários:

  1. Muito bom, ficou show de bola. Parabéns pelo tutorial. Com certeza farei mais visitas no seu blog. Abraços!

    ResponderExcluir
    Respostas
    1. Obrigado, fico feliz por ter gostado, espero ajudar sempre que aparecer por aqui, uma abraço...

      Excluir
  2. Alexandre, td bem ? Adorei a dica, não aguentava mais só achar tutorial do addthis. Só que assim, no meu layout ficou abaixo do título, não tem como alterar a posição ? ou pelo menos diminuir o tamanho do mesmo? Grata pela atenção desde já. beijo!

    ResponderExcluir
  3. Oi, qual o nome desse efeito nos ícones sociais abaixo dos posts juntamente com teu nome ?

    ResponderExcluir
  4. Não funciona no meu ...não aparecenada

    ResponderExcluir
    Respostas
    1. Nanda eu coloquei uma segunda maneira de inserir os botões, este outro método também é indicado pelo AddToAny, tente desta forma.

      Excluir
  5. Nem no meu, www.canalazulmarinho.com.br

    ResponderExcluir
    Respostas
    1. Guilherme eu sugiro a você o mesmo que para a Nanda no comentário anterior ao seu, tente lá e me diga se resolve.

      Excluir
  6. Não Funciona (www.cacoalnews.com.br)

    ResponderExcluir
  7. muito bom, parabêns pelos artigos, o meu é sobre humor, coisas engraçadas na net:
    http://www.vaibranquelo.com.br/

    ResponderExcluir
  8. Não encontro o código no blog. Existe algum outro jeito de colocar? Não consigo mais contato com a pessoa que criou o layout do blog, e desde então não consigo mudar mais nada. Obrigada!
    www.modaegestao.com.br

    ResponderExcluir
    Respostas
    1. No painel do blogger, basta clicar em modelo e depois HTML. Dentro do código tecle CTRL + F para pesquisar as tags.

      Mesmo que você não consiga encontrar o responsável pelo seu projeto, é possível alterar o código fonte.

      Mas não deixe de fazer um backup antes de qualquer alteração.

      Boa sorte e obrigado.

      Excluir
  9. Adorei me ajudou muito obrigada!!

    ResponderExcluir
  10. Hey, nem sei como lhe agradecer...
    estava procurando por isso a muito tempo, você me salvou, parabéns pelo blog e sua dedicação, seu post foi realmente útil para mim!
    Muito obrigada...

    ♥ Beijos da Panda ^^~
    Blog: Panda Vaidosa ♥

    ResponderExcluir
    Respostas
    1. Panda eu que te agradeço. Boa sorte com seu blog ;)

      Excluir
  11. Alê primeiramente parabéns pelo seu trabalho, eu queria te agradecer muito o meu template é complicado então dependendo do widget que é colocado ele bagunça todo o layout, tentei vários outros e somente esse deu certinho...Mais uma vez obrigado !!! Já me tornei seguidora do seu blog ;)

    ResponderExcluir
    Respostas
    1. Opa Juliana, fico muito feliz por ter te ajudado.

      Excluir
  12. Amei o tutorial,tentei vários,o seu o foi o mais fácil,e sem precisar mexer no html do blog,já testei e deu super certo,obrigada. http://mochileiradagalaxia.blogspot.com.br/ :)

    ResponderExcluir
    Respostas
    1. Ainda bem que foi fácil, muito sucesso com o seu blog!

      Excluir
  13. Obrigada, ficou muito legal no meu blog :D

    ResponderExcluir
  14. Excelente tutorial, super recomendo. Simples, sucinto e eficaz. Segui a sugestão de colocar o Whats e ficou show!!! Parabéns e Obrigada. Meu blog: http://biblioteconomiasocial.blogspot.com.br/

    ResponderExcluir
  15. Na versão para celular, não tá aparecendo os botôes !

    ResponderExcluir
  16. http://zikatube.blogspot.com.br Agradece ajudou muito um forte abraço.

    ResponderExcluir
  17. Só não aparece quando está no versão padrão blogger! no meu só aparece os botões quando ativo a versão web... porque será?

    ResponderExcluir
  18. Não consegui, ou meu template nao aceita esse codigo.
    qual valor cvocês cobram para atualizar pra mim ?
    buenofotografiaevideo@gmail.com aguardo retorno

    www.kidss.com.br (blogspot)

    ResponderExcluir
  19. Eu que tudo. Demorei mas consegui. muito obrigada

    ResponderExcluir