Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1502920770
Vida do cache: 1502963970
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Acessórios Widget

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 “Get sharing buttons for” escolha a opção “A web site“.
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.
botoes-addthis-blogger

4. Se você quiser obter acesso as informações das estatísticas, saber quantas pessoas compartilharam seus post usando o AddThis, clique em “Create an account“.
O site vai pedir que você faça um pequeno cadastro. Preencha os dados para se cadastrar. É rápido, simples e é grátis.
pois será através dele que você receberá as informações das estatísticas, informando quantas vezes seu artigo foi compartilhado nas redes sociais.
Através desse cadastro pois que você receberá as informações das estatísticas, informando quantas vezes seu artigo foi compartilhado nas redes sociais.
Finalize o cadastro, clicando no botão “Register”.

5. Na próxima página o site fornecerá um código. Copie este código.
Clique em “Get the Code“.

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:
modelo-botoes-addthis

O código fornecido será este :


<!-- 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"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#username=SEU-USERNAME"></script>
<!-- AddThis Button END -->

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.
Basta incluir o código referente ao botão que você quer acrescentar logo acima da linha </div>

Veja exemplos:


<a class="addthis_button_linkedin"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_stumbleupon"></a>
<a class="addthis_button_digg"></a>

Código do botão para imprimir:

   <a class="addthis_button_print"></a>

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.

addthis-css3_button

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

Caso queira conferir outras formas de personalização mais avançada dos botões, veja o artigo:
Botões AddThis com ícones Personalizados

Artigo atualizado em fevereiro/2013.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

44 Comentários

  1. Olá muito bom esse addthis
    tentei com outos…
    mais o melhor é esse valew!

  2. Oi chará!
    Muito obrigado pela ajuda…
    beijos

  3. Derp disse:

    Pois é, foi alterado o add this.
    Poderia atualizar o post?
    Obg (:

  4. Creio que a pagina do ADD This foi alterada, nao consegui acompanhar o post pelo que vi lá… Talvez seja bom “atualizar” o post. Obrigado. Ricardo

  5. Muito obrigada Vanessa, funcionou direitinho =D (menos o curtir :( )

  6. ñ consigo ver os avatas das pessoas que curten minha página no facebook
    gandiget>>>sidebar

  7. Samuel disse:

    Vlw vc me ajudou bastante !

  8. Arlane disse:

    Vanessa,
    tento instalar o AddThis agora e ele não mostra os contadores zerados, e sim como se já estivessem usados.
    Você já viu algum erro parecido?

    • Vanessa disse:

      Não se preocupe que isso é normal. É pq seus post já haviam sido compartilhados antes mesmo de vc instalar o AddThis.

  9. Ruy Costa disse:

    Como faço para centralizar?

    • Rodrigo disse:

      Estou com a mesma dúvida. Também tentei, e não consegui.

      • assis disse:

        obg eu tinho o widget no meu outro blog mas eu nao guardei ele, ele tinha a opçao de configurar as redes sociais facil , eu so queria saber mesmo como colocar as redes sociais que essa semana eu procurei o html

  10. cm-japan disse:

    mto boa a dica do baraka.
    tbém fiquei dias tentando resolver o preblema.
    valeu!!!

  11. .:: Clau ::. disse:

    Sybylla
    Valeu pela dica! A dica que o Baraka deu acima tb funciona bem. Obrigada mais uma vez pela dica;)

  12. Sybylla disse:

    Eu tive o mesmo problema que muitos acima relataram, onde vem o link do blog inteiro e não da postagem.

    O problema foi resolvido quando eu adicionei os botões de maneira automática pelo botão Adicionar no Blogger que tem no painel do Add This. Ele encaminha você para um painel do Blogger onde o código é adicionado com o gadget HTML/Javascript e os botões escolhidos aparecem direto no rodapé do post. Talvez isso ajude.

    Abraço!

  13. Felipe Damasceno disse:

    brigado obrigado arrazeures

  14. Max Martins disse:

    Oi, Clau =)

    Enfim, coloquei o AddThis no CBSaberes!
    A única dúvida que tenho é quanto ao botão "Send to Blogger"…por acaso, ele "reproduz" o post? Espero que não.

    Muito obrigado por "compartilhar" mais essa dica.

    Abraços

  15. Fancisco Santana disse:

    Obrigado, sempre que venho neste site resolvo meus problemas

  16. Rafael Malhado disse:

    Descobri!!!

    O Baraka já havia comentado como personalizar a mensagem com o titulo do post acima!

    Pra tirar o @AddThis e colocar o seu username é só add o tw:via='username' no final antes do />

  17. Rafael Malhado disse:

    Excelente dica do Baraka!!!

    Não sabe o quanto procurei por essa modificação.

    Agora só falta eu personalizar a mensagem do botão do Twitter com "via @username" ao invés de "via @AddThis".

  18. .:: Clau ::. disse:

    Baraka
    Muito obrigada pela ajuda! Fico tão feliz qdo vejo isso \o/
    Valeu mesmo! Espero que a Juliana agora consiga resolver o problema. 😉

  19. Baraka disse:

    — Juliana Netto —

    Eu fiz assim no meu e deu certo!

    Por exemplo, o botão do twitter é assim, certo:

    a class='addthis_button_twitter'

    Para compartilhar o post individualmente (e não o endereço do blog apenas) eu alterei assim:

    a class='addthis_button_twitter' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'

    Onde, os códigos —

    expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' —

    vão mostrar que é o link do post é que deve ser compartilhado. Repita isso com todos os outros botões!

  20. .:: Clau ::. disse:

    Juliana Netto
    Deve ser algum problema no seu template. Lamento,mas não tenho como ajudar.

  21. Juliana Netto disse:

    Tenho tentando usar o botão de compartilhamento do addtoany e do addthis.
    O problema é que, em ambos, quando clico nos ícones orkt,facebook, buzz, por exemplo, ao invés de aparecer o link e o título do post, aparece o link do blog como um todo.
    Como faço para que os botões compartilhem os conteúdos dos meus posts isoladamente?
    PS: Uso o miscali.blogspot.com como teste, se quiser conferir.

  22. .:: Clau ::. disse:

    encontramos.net
    Tenta usar a tag de alinhamento centralizado antes do código html:
    <center> e </center> no final do código.

    Luis Henriques
    Que bom que vc entendeu..realmente, não há como eu ajudar individualmente os leitores, a quantidade de pedidos que recebo, se fosse atender todo mundo, teria que largar trabalho,casa,marido etc e ficar praticamente 24h na net trabalhando de graça..ai eu ia viver de que né?Não dá! rs
    Sobre o seu pedido, já estou providenciando a continuidade dos artigos sobre html e css há um tempo e esses elementos logo logo entrarão na lista desta série em artigos publicados. É que acabei de voltar de viagem de férias, e logo volto as atividades blogueiras, assim que me reorganizar.

  23. Luis Henriques disse:

    Desculpe pela minha ignorância Clau, acabo de ler os termos e vi que estou totalmente errado em te pedir tal coisa. E lendo realmente você me convenceu não da para oferecer ajudar personalizada de graça para todo mundo, afinal você tem milhares de leitores já pensou se fosse ajudar todos desse tipo? rsrsrs. Então aqui fica o meu pedido de desculpa pela minha implicância.

    Eu queria deixar além das minhas desculpas um sugestão de postagem; vi que seu blog é muito completo, na minha opinião o mais completo da categoria se me permite dizer mais senti falta de explicação da utulização de alguns termos para usuários avançados.

    Ex; elemento id e class, div e span

    Será que dava para fazer um tutorial sobre o uso desse elementos, sei que são usados para personalizar determinadas partes do template mais não usá-los bem ao certo e acho que seria de interesse de um grande número de blogueiros.

    E ai o que acha?

  24. encontramos.net disse:

    Muito bom o tutorial… Estava querendo muito! MAs tenho uma Duvida… Como cenralizar a barra? Veja como ficou no meu blog.

  25. .:: Clau ::. disse:

    Luis Henriques
    Por favor, dá uma lida nos Termos de Uso do Blog.

  26. Luis Henriques disse:

    E se enviar uma cópia do código fonte para seu e-mail você poderia me ajudar?

  27. .:: Clau ::. disse:

    Luis Henriques
    Tais recursos podem variar de template para template. Sendo assim, não tenho como te ajudar.

  28. Luis Henriques disse:

    Oi Clau admiro muito seu trabalho. Sempre consigo implementar com perfeição todos os seus elementos, mais por obra do destino não estou conseguindo o mesmo com esse, quer dizer, implementar eu consigo mais ocorre um problema. Olha só como faço, eu pego o código do AddThis e insiro debaixo da linha post-footer-line-1 (não pus o código completo porque não é aceito nos comentários mais acho que da para entender), para ficar no rodapé do post:

    Até ai tudo bem, o problema é que se uma pessoa clicar no botão do Twitter por exemplo aumento o número em todos os botões do Twitter na página inicial. Como faço para resolver isso, estou desesperado e agradeceria muito se pudesse me ajudar!

  29. José Geraldo Magalhães Júnior disse:

    Excelente! acabei de fazer. Completíssimo, parabéns!

  30. .:: Clau ::. disse:

    Lucas
    Uma maneira de enviar os post automaticamnente no Facebook existe, mas no Dihiit não.
    Se quiser saber como envirar seus posts automaticamente no Facebook , dá uma lida no tutorial:
    "Criar uma página do blog no Facebook".

    ? Jão Bless ?
    Ainda não existe essa possibilidade, pelo menos q eu saiba.

  31. ? Jão Bless ? disse:

    Clau s2
    aki
    será q vc teria uma solução para o que eu busco a tempos ???
    queria compartilhar meus posts do blog automaticamente (auto-share) no orkut… (como no faceboock e no twitter)
    Será possível ?
    Há tempos busco isso !!!
    Grato desde já Gata… s2

  32. Lucas disse:

    clau,existe algum jeito de enviar todos os posts (ao publicar) para o facebook Dihitt? seria muito ùtil para divulgar o blog.

  33. .:: Clau ::. disse:

    Obrigada pelos comentários pessoal..
    Mais tarde sai outro post com outras dicas de personalizações desta ferramenta 😉

  34. alezandri disse:

    Óptima dica, já conhecia, mas já não me lembrava. Vou aproveitar o código dos favoritos. Obrigado :)

  35. bonjoviarchives disse:

    Obrigado,Clau! ótima dica,simples e eficiente!Estou usando e adorando.
    Beijo

  36. Will disse:

    Alguém ainda tem dúvida?
    Acho que não né?O post tá completo! :)
    Valeu Clau! 😉

  37. .:: Clau ::. disse:

    comandoblogger
    Essa ferramenta é muito boa, eu tb a uso há bastante tempo.

    kaytros
    Obrigada pela sugestão.
    Quando quiser enviar sugestão de artigos, envie-a através do formulário de contato para Sugestões de Artigos

    Max
    Vc tá perdendo tempo em não usar essa ferramenta heim? Ela é ótima :)

  38. Max Martins disse:

    Oi, Clau

    Que coincidência esse post! Ainda ontem, estava tentando lembrar o motivo pelo qual chegam mensagens do AddThis pra mim…rs

    Parece mentira, mas fiz o cadastro e por algum motivo não instalei no blog.

    Vou esperar o próximo post para ver o que fazer a respeito, mas acho que é uma opção excelente de divulgação.

    Obrigado por mais essa dica.

    Bjs

  39. kaytros disse:

    Ola não sei se e o lugar certo mas vou fazer o pedido aqui, gostaria de saber como faço para importar um blog do wodpress para o blogger, são mais de 500 post….
    se puder postar um tuto ou algo assim fico agradecido.

  40. comandoblogger disse:

    Excelente artigo Clau, já venho utilizando o AddThis a muito tempo nos meus blogs.

    Estava pensando em escrever um post sobre essa ferramenta mais como você já postou hoje vou deixar para postar semana que vem :)

    Att.
    @JamisHenri

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.