Botões AddThis para compartilhar seu blog nas redes sociais

Hospedagem para Blogs

Compartilhar seus links e conteúdo nas redes sociais é questão básica de sobrevivência para qualquer blog. Não é só estar presente, mas incentivar seus visitantes a divulgarem o que leram e assim atrair mais público. A forma mais eficiente para isso é colocar botões que, com um clique, as pessoas consigam propagar aquela informação. Aqui vão alguns modelos do AddThis, prontos para usar.

addthis-share-botoes-compartilhar

O sistema de botões para compartilhar em redes sociais do AddThis é bem simples e prático de adicionar no seu blog. É só escolher o modelo desejado, gerar o código e colar onde quer que os botões sejam exibidos.

Acesse: http://www.addthis.com/web-button-select

A primeira coisa a fazer é escolher a plataforma que irá usar (tem o Blogger e o WordPress, entre outros sistemas de blogs e sites). Então você pode ver os modelos de botões disponíveis e prédefinidos. Marque seu preferido e clique no botão para gerar o código:

addthis-get-code

Para quem usa o WordPress.org, há ainda a facilidade de usar um plugin para gerar e adicionar os botões no layout:

Plugin AddThis WordPress

Tudo é feito pelo painel e bem mais fácil de administrar, inclusive conta com estatísticas e dados sobre os cliques e links compartilhados.

Se você usa o Blogger, vou indicar aqui o código de dois modelos, os mais comuns, e como colocá-los no rodapé dos posts, bastando você copiar e colar, seguindo o tutorial abaixo.

Modelo 1 – Botões com contadores de cliques

addthis-contadores-twitter-facebook

Como dá pra ver na imagem, há o botão do Facebook, do Twitter e o padrão do AddThis, com seus devidos contadores de cliques para mostrar o quanto já foi divulgado.

Abra o painel do Blogger, clique no menu “Design” ~> “Editar HTML” e marque “Expandir modelos de widgets” para ver todo o código fonte. Então procure pela seguinte linha:

<div class=’post-footer’>

Logo ANTES dessa linha, cole o seguinte trecho, sem alterar nada:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'></a>
<a class='addthis_button_tweet'></a>
<a class='addthis_counter addthis_pill_style'></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d59531073ef4c27"></script>
<!-- AddThis Button END -->

Os botões com contadores aparecerão imediatamente abaixo de todos os posts do seu blog.

Modelo 2 – Botões das redes sociais

addthis-botoes-quadrados

Aqui temos a opção mais comum que são os botões quadrados e conta com envio para email, Facebook, Twitter, Favorito e o padrão do AddThis.

Do mesmo modo que explicado no modelo 1, entre no painel do Blogger para editar o HTML do template, procure pela seguinte linha:

<div class=’post-footer’>

E cole o trecho a seguir imediatamente ANTES:
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
<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_compact'></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d5954b335279641"></script>
<!-- AddThis Button END –>

Salve o modelo para ver o resultado em seu blog. Os botões aparecerão imediatamente abaixo de todos os posts, de cada conteúdo.

Outras opções de botões e rodapé:

26 Comentários

  1. Pingback: Tweets that mention Botões AddThis para compartilhar seu blog nas redes sociais | [ Ferramentas Blog ] -- Topsy.com

  2. Pingback: Adicionar o gadget de Membros Seguidores no Blog Blogger WordPress | [ Ferramentas Blog ]

  3. Nossa muito bom suas dicas e passo-a-passo… de fácil entendimento e sucesso, na primeira tentativa o sucesso é completo. Parabéns Sucesso Sempre.

    Responder

  4. Marcos,

    Consegui!!!

    Porém só consegui adicionando o antes e o depois do código.

    Sei que muitas pessoas que frequentam o [Ferramentas Blog] já conhecem milhões de coisas sobre como criar e customizar um blog. Não sei se esse detalhe que mencionei é muito óbvio, mas você não descreve isso no post.

    Bom, fica a dica e parabéns por tudo!!!

    Responder

  5. Parabéns cara!!
    Só tenho uma duvida: Como faço para alterar o “via @AddThis” no fim dos
    Tweets, por outro twitter?

    Responder

  6. Parabéns! Pesquisei muito até lhe encontrar. O meu site agora tem esse botão. As demais explicações que encontrei demandavam um certo conhecimento de html ou outras. Mas através do plugin que vc indicou para o WordPress, consegui aplicar o compartilhamento das redes em meu site. Obrigado!!!

    Responder

  7. Cara, mistérios da programação! Instalei o recurso no meu blog e consigo visualizá-lo no firefox e no chrome, mas quando vou abrir no IE os botões não aparecem. Assim que eu resolver o problema eu mando uma mensagem aqui pro caso de alguém estar passando pelo menos que eu.

    Responder

  8. Solucionado o problema e os botões já estão lá. Apenas uma ressalva: usei o modelo 1, mas ao lado dos ícones do face e do share não aparecem o campo do contador. O ícone do contador twitter aparece mesmo qdo é “0”.

    Responder

  9. O marcos o modelo 2 eu não conseguir colocar,pois da erro no xml, será que o codigo ai nao ta corrompido nao. vlww abraços e parabéns pelo blog, é a salvação de muitos na net

    Responder

  10. oi eu usei no meu blog os botoes de compartilhamento que ficam no rodapé da postagem, mas o botao curtir parece que não funciona pois quando clico nele ele desaparece, diferente do botao do twitter que quando clico ele abre uma janelinha com o link do post pra compartilhar.

    Responder

  11. Caro marcos tava tendo um problema com meu blog, pois o cara que fez ele colocou botoes de compartilhamento que nao compartilhava o post na pagina inicial e sim o link do blog e uma imagem aleatória no face,procurei na internet toda uma solução, troquei varias vezes os botoes,ai testei esse codigo seu, e resolveu meu problema pela metade,poi ele nao ficava centralizado no lugar que queria, passei varias noites acordado tentando resolver isso, e de repente uma luz brilhou na minha mente e resolvi meu problema, usando seu codigo e colocando a div de centralização , quando eu vi que deu certo dei um grito de alegria tão alto que meus vizinhos tudo deve ter acordado kkkk, Marcos valeu mesmo cara, mesmo só tendo me ajudado em partes, salvou minha pele, grande abraço

    Responder

  12. muitooooooooooooo obrigado cara tava com um problema com meu blog
    é que quando as pessoas curtiam algum post automaticamente todos os posts era curtido ai os números das redes sociais eram todos iguais !! mas olhando o teu código e olhando o meu reparei que estava faltando um código. aii valeu mesmo
    e parabéns pelo seu blog está me ajuda muito !!!!!

    Responder

  13. Oi Marcos. No lugar de “Like” aparece “Gosto”. Como eu faço para mudar?
    Tentei de tudo, até mudar o idioma do navegar. Mas não funciona!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.