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

Acessórios Widget Vanessa S.

Botões AddThis com ícones Personalizados

Incluir Botões AddThis com ícones Personalizados. Conforme eu havia prometido, neste tutorial veremos algumas formas de personalização mais avançadas para os Botões AddThis.

Para prosseguir com este tutorial requer que você já tenha feito o seu cadastro no site do AddThis, e já ter obtido o código javascript, conforme ensinado no início do tutorial anterior no tópico “Obtendo o código“.

[becape]Antes de mais nada, sempre é bom recomendar que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.[/becape]

AddThis com ícones personalizados

Quem disse que você tem que usar somente os ícones gerados no código do AddThis?
Você também pode personalizar os ícones, criando a sua própria caixa de ícones personalizados.

Botões AddThis com ícones Personalizados

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_toolbox .custom_images a {
width: 64px;
height: 64px;
margin: 0;
padding: 0;
}
.addthis_toolbox .custom_images a img {
opacity: 1.0;
}
.addthis_toolbox .custom_images a:hover img {
opacity: 0.75;
}
</style>
<!-- AddThis Share Button -->
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_facebook'><img alt='Share to Facebook' height='64' src='http://lh4.ggpht.com/_IPgHjkOTlhw/TKRPUIe3Y5I/AAAAAAAAAHI/qe2W8-Z7X34/facebook.png' width='64'/></a>
<a class='addthis_button_twitter'><img alt='Share to Twitter' height='64' src='http://lh6.ggpht.com/_IPgHjkOTlhw/TKRQBfCM_QI/AAAAAAAAAII/_fM5MmpYGjA/twitter.png' width='64'/></a>
<a class='addthis_button_linkedin'><img alt='Share to Linkedin' height='64' src='http://lh6.ggpht.com/_IPgHjkOTlhw/TKRPqFGxl0I/AAAAAAAAAHk/o5-CJvKI4FE/linkedin.png' width='64'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumble It' height='64' src='http://lh4.ggpht.com/_IPgHjkOTlhw/TKRP2epO4uI/AAAAAAAAAH8/-LxmyRtl3c0/stumbleupon.png' width='64'/></a>
<a class='addthis_button_googlebuzz'><img alt='Share to Google Buzz' height='64' src='http://lh5.ggpht.com/_IPgHjkOTlhw/TKRR0KR8_wI/AAAAAAAAAIc/OtmHy5CmSkk/google_buzz.png' width='64'/></a>

<a class='addthis_button_orkut'><img alt='Share to Orkut' height='64' src='http://lh4.ggpht.com/_IPgHjkOTlhw/TKRTOa6ScqI/AAAAAAAAAIw/k9qj66LSFEI/orkut.png' width='64'/></a>
<a class='addthis_button_more'><img alt='Mais...' height='64' src='http://lh6.ggpht.com/_IPgHjkOTlhw/TKRBktBjLeI/AAAAAAAAAGg/RCJ4jta95PE/addthis.png' width='64'/></a>
</div>
</div><!-- End Buttons-->

<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=SEU-USERNAME'></script>
<!-- End AddThis Share Button -->


Lembre-se que no código acima, onde está "SEU-USERNAME" é o seu nome de usuário, aquele que você cadastrou no site, e você deve incluí-lo no código.
Caso você não tenha configurado a opção para receber as estatísticas de compartilhamento por email, basta apagar o trecho que está destacado na cor azul.

Se você quiser, pode usar outros ícones. Confira algumas sugestões de ícones sociais para download.
Escolha os ícones que mais lhe agrada, hospede-os no seu site preferido e substitua o endereço das imagens no código acima.
Confira Demo

Botões de compartilhamento com contadores integrados

Você pode adicionar o novo botão oficial do Twitter e o botão "Curtir" do Facebook, juntamente com o botão do AddThis.
Desta forma poderá compartilhar os seus artigos em um único lugar.
Sem a necessidade de instalar diversos arquivos javascript, pois você só precisará instalar o javascript do AddThis.


<style type='text/css'>
#addthis_button {
margin-top:10px;
padding: 0;
}
</style>
<!-- AddThis Share Button -->
<div id='addthis_button'>
<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet' tw:count='horizontal'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
</div><!-- End AddThis Share Button -->
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=SEU-USERNAME'></script>

No meu blog de testes eu optei por instalar este modelo de botão com contador na linha abaixo do título, mas você pode escolher o local mais adequado para seu blog.
Confira Demo

Se quiser incluir apenas o botão do AddThis com contador e não quiser incluir o botão do Twitter e nem o do Facebook, basta excluir as seguintes linhas no código acima:
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet' tw:count='horizontal'/>

Botões em forma de menu vertical em colunas

Você pode personalizar os botões de forma que eles se apresentem como um menu vertical dividido.

Esta forma de personalização como um menu vertical do lado esquerdo é ideal para os usuários que quiserem incluir um bloco de anúncio do Adsense do lado direito.

Se você quiser incluir apenas os botões em forma de menu vertical, o código é este:


<style type='text/css'>
.addthis_toolbox .two_column {
width: 200px;
padding: 10px 0 10px 0px;
border: 3px solid #eee;  /*--edite a cor da borda--*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.addthis_toolbox .two_column a{
padding: 4px 0 4px 34px;
position: relative;
width: 66px;
display: block;
text-decoration: none;
}
.addthis_toolbox .two_column a:hover{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #B4D3F8; /*--edite a cor de fundo--*/
text-decoration: none;
}
.addthis_toolbox .two_column span{
position: absolute;
left: 14px;
top: 4px;
}
.addthis_toolbox .two_column .top{
padding: 0 0 10px 0;
border-bottom: solid 1px #eee;
margin-bottom: 10px;
margin: 0 20px 10px 20px;
}
.addthis_toolbox .two_column .more{
border-top: solid 1px #eee;
padding: 10px 0 0 0;
margin: 10px 20px 0 20px;
text-align: center;
}
.addthis_toolbox .two_column .more a{
padding: 4px 0;
width: auto;
}
.addthis_toolbox .two_column .more span{
display: none;
}
.addthis_toolbox .two_column .column1{
width: 100px;
float: left;
}
.addthis_toolbox .two_column .column2{
width: 100px;
float: left;
}
.addthis_toolbox .two_column .clear{
clear: both;
padding: 0;
display: block;
height: 0;
width: 0;
}
</style>
<!-- AddThis Share Button -->
<div class="addthis_toolbox">
<div class="two_column">
<div class="column1">
<a class="addthis_button_email">Email</a>
</div>
<div class="column2">
<a class="addthis_button_print">Print</a>
</div>
<div class="clear"></div>
<div class="top">
</div>
<div class="column1">
<a class="addthis_button_twitter">Twitter</a>
<a class="addthis_button_facebook">Facebook</a>
<a class="addthis_button_myspace">MySpace</a>
</div>
<div class="column2">
<a class="addthis_button_delicious">Delicous</a>
<a class="addthis_button_stumbleupon">Stumble</a>
<a class="addthis_button_digg">Digg</a>
</div>
<div class="clear"></div>
<div class="more">
<a class="addthis_button_expanded"><img src="http://s7.addthis.com/static/btn/sm-plus.gif" width="16" height="16" border="0" /> Ver Mais...</a>
</div>
</div>
</div> <!-- End AddThis Share Button -->

<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=SEU-USERNAME'></script>

Botões em forma de menu vertical + Bloco do Adsense

Se você quiser incluir uma coluna ao lado direito dos botões, para inserir um bloco de anúncio do Adsense, o código é este:


<style type='text/css'>
.addthis_toolbox .two_column {
width: 200px;
padding: 10px 0 10px 0px;
border: 3px solid #eee;  /*--edite a cor da borda--*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.addthis_toolbox .two_column a{
padding: 4px 0 4px 34px;
position: relative;
width: 66px;
display: block;
text-decoration: none;
}
.addthis_toolbox .two_column a:hover{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #B4D3F8; /*--edite a cor de fundo--*/
text-decoration: none;
}
.addthis_toolbox .two_column span{
position: absolute;
left: 14px;
top: 4px;
}
.addthis_toolbox .two_column .top{
padding: 0 0 10px 0;
border-bottom: solid 1px #eee;
margin-bottom: 10px;
margin: 0 20px 10px 20px;
}
.addthis_toolbox .two_column .more{
border-top: solid 1px #eee;
padding: 10px 0 0 0;
margin: 10px 20px 0 20px;
text-align: center;
}
.addthis_toolbox .two_column .more a{
padding: 4px 0;
width: auto;
}
.addthis_toolbox .two_column .more span{
display: none;
}
.addthis_toolbox .two_column .column1{
width: 100px;
float: left;
}
.addthis_toolbox .two_column .column2{
width: 100px;
float: left;
}
.addthis_toolbox .two_column .clear{
clear: both;
padding: 0;
display: block;
height: 0;
width: 0;
}
</style>
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tbody> <tr>
<td valign='top'><!-- AddThis Share Button -->
<div class="addthis_toolbox">
<div class="two_column">
<div class="column1">
<a class="addthis_button_email">Email</a>
</div>
<div class="column2">
<a class="addthis_button_print">Print</a>
</div>
<div class="clear"></div>
<div class="top">
</div>
<div class="column1">
<a class="addthis_button_twitter">Twitter</a>
<a class="addthis_button_facebook">Facebook</a>
<a class="addthis_button_myspace">MySpace</a>
</div>
<div class="column2">
<a class="addthis_button_delicious">Delicous</a>
<a class="addthis_button_stumbleupon">Stumble</a>
<a class="addthis_button_digg">Digg</a>
</div>
<div class="clear"></div>
<div class="more">
<a class="addthis_button_expanded"><img src="http://s7.addthis.com/static/btn/sm-plus.gif" width="16" height="16" border="0" /> Ver Mais...</a>
</div>
</div>
</div> <!-- End AddThis Share Button -->
</td> <td valign='top'>
<!-- AdSense Inicio -->

<>

<!-- AdSense Final -->
</td></tr></tbody></table>

<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=SEU-USERNAME'></script>

Atenção: Se você optar por usar este menu , lembre-se de verificar a largura total da sua área de postagens, pois você terá que tomar muito cuidado com a escolha do modelo de bloco de anúncios do Adsense. Verifique as medidas do anúncio que você irá incluir. As medidas não podem ultrapassar a largura total da sua área de postagem, caso contrario vai ficar desconfigurado.
E antes que me pergunte, não há como eu saber as medidas do seu template, portanto, faça testes, e mãos à obra!

 

Ocultar os botões da página inicial

Se quiser que os ícones não apareçam na página inicial do seu blog, use a condicional para mostrar os elementos apenas nas páginas internas é esta:

<b:if cond='data:blog.pageType == "item"'>

esta condicional deve ser fechada corretamente e a tag de fechamento dela é:

</b:if>

Tudo o que você incluir dentro desta condicional será mostrado apenas nas página internas.

O Código deve ficar assim:


<b:if cond='data:blog.pageType == "item"'>
<----Código aqui---->
</b:if>

Veja mais sobre as condicionais no artigo:
Ocultar Elementos em Página Específica

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.

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

27 Comentários

  1. Dedessa disse:

    Você poderia ensinar como colocar os botões de compartilhamento (tweetar, +1, Curtir, Share, Pin It) e o número de comentários na mesma linha, logo após o título do post, assim como está no seu blog? Ficaria MUITO agradecida, já testei mil tutoriais mas nenhum dá certo, me ajuda? Adoro o seu cantinho, sempre encontro tudo o que preciso aqui, parabéns, você merece! Beijos, aguardo sua resposta 🙂

  2. Oli disse:

    O post está super interessante e correcto mas…
    Será que tem alguma forma de colocar estes botões centrados?
    Já tentei assim:
    CODIGO e não deu não sei mais! E não econtro em nenhum lugar! Será que me pode ajudar, Vanessa?
    Obrigado,
    Oli

  3. Bruniele disse:

    Clau, o meu blog ficava aberto so para mim e as configurações estavamtodas certinhas, quando eu abri ele para o público, sei lá o que deu,esses botoes do rodapé desapareceram, já procurei por tutoriais testei algumas coisas desse post e nada adiantou, o que houve? Pode ajudar?

    • Vanessa disse:

      Lamento, mas alguns casos só é possível encontrar alguma resolução testando, e por não dispor de tempo para isso, no momento não estou prestando este tipo de suporte.

  4. Isadora disse:

    Meus posts tem “leia mais”… como colocar os botões apenas nas paginas e não mostrar antes do “leia mais”?

  5. Cristiano Almeida disse:

    Este post me ajudou bastante a configurar melhor a ferramenta do AddThis. Obrigado mesmo.

  6. GM Tricks disse:

    Clau, só queria desejar parabéns pelo Mundo Blogger.
    Sinceramente, é o melhor blog de dicas que eu já vi.

    É incrível como você consegue personalizar cada detalhe do Blogger. Aqui sempre encontro tudo o que preciso para deixar meu blog EXATAMENTE como quero.
    Parabéns Clau e muito obrigada pelas dicas. Você é 10.

  7. Medrado disse:

    Clau

    Aprendimais um pouco com você.
    Obrigado!
    http://novautos.blogspot.com

  8. Adalberto Albuquerque disse:

    Bem, eu não só gostei desse artigo, como também de todos os outros que li, são objetivos e de fácil entendimento!

  9. .:: Clau ::. disse:

    Fa clube Fernando e Sorocaba
    Dá uma lida neste artigo:
    https://www.mundoblogger.com.br/2010/11/como-instalar-gadget-abaixo-do.html
    Pode ser que te ajude.

  10. Fa Clube Fernando e Sorocaba - Delegada disse:

    como eu coloco estes botoes em baixo da imagem do blog, acima do menu ?

  11. Vanessa disse:

    Heyder Numeriano
    Tenta incluir:
    <div class='text-align:center;'>
    no inicio e
    </div>
    no final do código.
    Se vc incluiu e não deu certo, então deve ser algum problema relacionado a seu template. Não tenho como ajudar.

  12. Heyder Numeriano disse:

    boa tarde clau! olha só, o código funcionou perfeitamente, porém não estou conseguindo centralizá-los. já coloquei as htmls "centers", mas nada muda. alguma outra sugestão de como conseguir centralizar esses ícones? dá uma conferida no http://WWW.PEITOLINA.COM pra você ver como ficou.
    obrigado e parabéns pelo blog, sempre me ajuda muito!

  13. .:: Clau ::. disse:

    Mestre Paulão
    Eu verifiquei e o código está correto. Verifique se não está relacionado a largura da sua coluna de postagens. Dá uma lida no texto de alerta que tem no post.

  14. Mestre Paulão - Mestre de Capoeira e Produtor Cultural disse:

    Clau, boa tarde. Primeiro parabéns pelo seu trabalho. Tem nos ajudado bastante. Estamos tentando colocar o addthis + código adsense e está dando erro. Você poderia ver se o erro é no código que você postou aqui? Agradeço.

  15. .:: Clau ::. disse:

    Luhenun
    Ué, é só apagar as linhas referentes aos códigos e icones que vc não quer que apareçam.

  16. Luhenun disse:

    E se eu quiser escolher os icones que vão aparecer, como por exemplo colocar o icone de email e retirar alguns outros.

    Obrigado!

  17. Kawann Alves disse:

    Tem como colocar os botões centralizados?
    Já deu certo aqui, mas só que eu quero centralizado que nem o seu!

  18. Ana Sousa Mattera disse:

    Olha eu fiz, mas n aparece os ícones, fica um X.A do facebook vme encaminha p lá…mas o resto nada…e eu nem sei direito como fazer nada… por favor..me ajude passo a passo e sem essas palavtras complicadas q eu nem sei o q é, pois sou novata.

  19. Blogs Moderations disse:

    Clau
    adorei o post
    ficou muito no no meu blog
    Thanks pela dica

  20. James Rocha disse:

    Me serviu bastante! Muito obrigado.

  21. ? Jão Bless ? disse:

    Clauuuu… Gataa…
    Você é D+
    Eu quando coloquei esses botões em meu blog tive que ser criativo
    usar a imaginação
    pois não havia encontrado nada há respeito referente a colocar os botões AddThis nos posts
    Parabéns e Obrigada
    Forte Abraço…

  22. .:: Clau ::. disse:

    lukadesigner
    Orytcha's Blog

    Que bom q gostaram. Obrigada pelos comentários. Voltem sempre!

  23. Orytcha's Blog disse:

    Achei o post bem legal. Parabéns pelo blog.

    Continue assim que ficará ainda melhor.

    Depois dá uma passada no meu blog e se gostar
    siga e comente.

    http://orytchasblog.blogspot.com

    Forte abraço

  24. lukadesigner disse:

    Nossa, muito show esse tutorial, vai ajudar muita gente.
    Vou te confessar uma coisa Clau. Quase tudo que eu sei de blogger hoje, aprendi com você. Você é 10.

    Muito obrigado,
    Luciano – Luka Designer

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