• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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.

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

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn