Botão AddThis com imagem personalizada

Hoje tenho uma dica bastante interessante e ao mesmo tempo simples e prática, não sei se você percebeu mais lá em cima no canto superior da sidebar deste blog tem um coração meio amundiçado no tamanha para falar a verdade que ao passar o mouse por cima aparece uma janela com vários botões de favoritos (bookmarks) do aplicativo AddThis.

Mais para quer adicionar um botão como esse ao meu blog? O que eu ganho com isso?

Caro “gafanhoto” paciência! Bookmarks ou favoritos, servem, para que o leitor de seu blog guarde e compartilhe o conteúdo do mesmo ou seja consequentemente ao fazer isso você está abrindo portas para novos leitores chegarem ao seu blog.

A conversa está boa mais vamos logo ao que interessa primeiro você precisa do código html para esse botão então vá até o site.

Logo na página inicial você perceberá 3 etapas para que possamos pegar o código então na primeira o que vamos fazer é selecionar o estilo que o botão apresentará, o que vou mostrar a você é como colocar uma imagem como botão para favoritos em seu blog então para isso selecione o segundo modelo (Share).

A segunda etapa é apenas para saber se você tem interesse em acompanhar as estatísticas de seu aplicativo se não desejar isso, basta deixar como esta e passar para a terceira etapa e clicar no botão GET YOUR BUTTON para gerar o código html. Por enquanto apenas copie esse código.

Agora em seu blog vá em Design > Elementos da página e adicione um novo elemento escolha Html/JavaScript e cole o código que você pegou.
Deve estar assim:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c9dfbf71ee34450" class="addthis_button_compact">Share</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c9dfbf71ee34450"></script>
<!-- AddThis Button END -->

Como eu disse lá no começo é algo realmente simples.

O que vamos apenas fazer é substituir o nome em laranja por uma imagem, para isso você precisa fazer uma pequena alteração apague o nome “Share” em destaque como mostrado em cima e substituía pela seguinte linha de código.

<img src="COLOQUE AQUI O LINK DE SUA IMAGEM" />

Lembrando que você deve substituir o nome em laranja pelo link de sua imagem você pode usar o ImageShack, para fazer a hospedagem.

Salve o novo elemento e veja se ficou tudo certo, teste outras imagens até chegar a uma que mais se encaixe com seu template ok.

É isso, viu como é fácil! Até a próxima.

Compartilhe ! Tweet