Personalizando os botões de compartilhamento AddThis

Compartilhar:
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+Fsubstitua-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.
► Postagens Relacionadas:

10 Comentários

Anderson Souza disse...

Muito bom, se algum dia eu usar o Twitter, vou experimentar a dica.

26 de fevereiro de 2012 às 19:17
João Almeida disse...

É verdade, este opção é muito boa para quem quer um estilo mais com o blog. Obrigado pela participação.

26 de fevereiro de 2012 às 19:26
Fabiano Alves disse...

Ótima dica! Obrigado por compartilhar =D

28 de fevereiro de 2012 às 10:49
João Almeida disse...

Que bom que gostou Fabiano! Volte sempre!

1 de março de 2012 às 16:42
Jumentrix disse...

Muito obrigado o lance do nome do Twitter foi uma mão na roda... !!!

20 de março de 2012 às 19:21
João Almeida disse...

Que bom que gostou Jumentrix! Sempre tentamos trazer o melhor para os leitores! Obrigado pela participação.

20 de março de 2012 às 19:56
Tatiana Santos disse...

Salvou minha vida também. Obrigada e parabéns pelo Blog.

27 de julho de 2012 às 23:56
Bruno Bezerra disse...

Gostei João!, Vou instalar esses botões em meu blog, pois aqueles que o Google disponibiliza são muito ''100 graça''!, Abraços, sou um leitor assíduo de seu blog!.

18 de janeiro de 2014 às 21:33
João Almeida disse...

Realmente. Ah kkkk São tantos comentários que quase não dou conta de responder tudo. Obrigado, é uma pena que não estou com tempo e criatividade para continuar o blog =/

18 de janeiro de 2014 às 21:52
Caroline Beltrame disse...

Quando coloco imagem personalizada + "@viausuariotwitter" não dá certo.



Esse "" dá erro.


Qual seria o codigo certo por favor?

8 de abril de 2014 às 16:01

Postar um comentário