Personalizando os botões de compartilhamento AddThis

Olá queridos leitores, hoje iremos aprender como personalizar os botões de compartilhamento AddThis. É um processo simples e fácil. Esta postagem é um pedido e sugestão de um de nossos leitores, o Rubens, que nos perguntou como personalizar os botões e a frase "via @Addthis". Vale lembrar que o nossos botões não são personalizados. Mas vamos com o tutorial?

Personalizando os ícones

Neste primeiro passo, iremos ver como personalizar os botões, ou seja, substituir os botões normais pelos que você preferir.

1. Procure pelo código dos botões AddThis em seu template pressionando Ctrl+F e substitua-o completamente pelo código a seguir.

<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 -->

Lembrando que: você terá que substituir as partes destacadas de vermelho pelo URL das imagens referentes. A parte destacada de negrito você pode excluir assim como a que você preferir. E a parte em azul, corresponde ao username que você pode encontrá-lo em códigos de botões ao se cadastrar.

Clique na imagem para ampliar

2. Clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

3. Caso você queria que os botões fiquem ocultos na pagina inicial, utilize os códigos a seguir.

<b:if cond='data:blog.pageType == &quot;item&quot;'><!-----------------------Código AddThis aqui----------------------------------!>
</b:if></div>

Alterando a frase via @addthis

Para aletrar a frase via @addthis, siga os seguintes passos.

1. Pressione Ctrl+F para abrir o Localizador do navegador e procure pelo seguinte código.

<a class="addthis_button_tweet"></a>

2. Imediatamente, substitua o código acima por este outro código.

<a class='addthis_button_tweet' tw:via='nome do twitter'/>

3. Clique em Salvar modelo.

Pronto! Espero lhe ter ajudado Rubens e aos outros que estiverem com esta dúvida. Boa sorte e até mais.