30 de julho de 2010

Como adicionar o AddThis no Blogger


O AddThis é uma ferramenta que permite o compartilhamento do conteúdo do seu blog ou site em, deixe ver... 296 canais diferentes, entre redes sociais, agregadores de conteúdo, email e o bom e velho "adicionar aos favoritos", lembra dele? E a cada dia o número de canais aumenta.

O princípio é o mesmo do sistema de compartilhamento padrão do Blogger, só que o AddThis já existia bem antes do sistema do Blogger e é muito mais abrangente. Também é melhor em alguns itens, como na opção de enviar o conteúdo do site por email para alguém.


Outra vantagem é a ferramenta de acompanhamento das estatísticas de quantas vezes o seu conteúdo foi compartilhado e quantas visitas vieram ao seu site por estes links que foram espalhados por aí.

Estatísticas do AddThis
Para incluir esta ferramenta no Blogger siga o roteiro abaixo:

1 - Acesse a página http://addthis.com. Você pode obter o código para incluir no seu site ou blog sem precisar se cadastrar no site. Porém você precisa se cadastrar para poder voltar depois no AddThis e ver suas estatísticas de compartilhamento. Recomendo que você faça isso, mas vamos abordar aqui os passos necessários para a inclusão do código no Blogger. Se você tiver um cadastro os passos são os mesmos.
Na tela inicial do site você verá algumas opções:


2 - Conforme a imagem acima, selecione no item 1 o serviço onde irá usar o código, no caso marque o Blogger. Depois selecione o terceiro modelo de botões, porque vamos mexer nele depois. No item 3, como estamos pulando a etapa do cadastro, selecione a primeira opção, que diz mais ou menos "me dá o botão aí!".

3 - Em seguida clique no botão para passar para a próxima fase.

não neste, lá no AddThis...

4 - Na página seguinte o AddThis fornece o trecho de código que você irá incluir no HTML do seu blog. Se você seguiu as indicações acima, o código que ele irá gerar será parecido com esse logo abaixo:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><a href='http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c53577713e232cf' class='addthis_button_compact'>Share</a>
<span class='addthis_separator'>|</span>
<a class='addthis_button_facebook'></a>
<a class='addthis_button_myspace'></a>
<a class='addthis_button_google'></a>
<a class='addthis_button_twitter'></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c53577713e232cf"></script>
<!-- AddThis Button END -->

5 - Os passos seguintes estão descritos no restante da página de configuração do AddThis, mas vamos fazer aqui um resumo. Entre na área de administração do seu blog e clique nas abas "Design" e "Editar HTML". Você já viu isso antes em algum lugar...

6 - Marque a opção "Expandir modelos de widgets".


7 - Use a busca do seu navegador para localizar o seguinte trecho de código no HTML do seu modelo:  <div class='post-footer'>

8 - Copie o código do AddThis e cole logo abaixo desta linha, conforme a imagem abaixo:


9 - É isso, clique no botão "Salvar modelo" e confira no blog como ficou. Os links do AddThis irão aparecer no final de cada post, mesmo se ele estiver na página inicial do seu blog.

- Por que não falou antes?!!
10 - Agora vamos aos detalhes. No modelo que você acabou de salvar no seu blog o AddThis mostra os botões para compartilhar seu conteúdo no Facebook, Myspace, Google e Twitter. Se você quiser que o botão mostre outras redes ou links, como fazer? Podemos alterar o código do AddThis para mostrar links para o Orkut, para mandar por email, e vários outros. E podemos também mudar o termo "Share" para um em português.

11 - Para alterar isso basta voltar na área de edição do HTML do seu modelo e localizar o trecho que código que você acabou de inserir. Lendo o código você percebe onde fazer as alterações. Veja o modelo abaixo:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><a href='http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c53577713e232cf' class='addthis_button_compact'>Share</a>
<span class='addthis_separator'>|</span>
<a class='addthis_button_facebook'></a>
<a class='addthis_button_myspace'></a>
<a class='addthis_button_google'></a>
<a class='addthis_button_twitter'></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c53577713e232cf"></script>
<!-- AddThis Button END -->

12 - Vamos alterar o código acima e mudar os links para mostrar os ícones do Orkut, Twitter, Facebook e email. E iremos mudar também o "Share" para "Compartilhe". O código ficará assim:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><a href='http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c53577713e232cf' class='addthis_button_compact'>Compartilhe</a>
<span class='addthis_separator'>|</span>
<a class='addthis_button_orkut'></a>
<a class='addthis_button_twitter'></a>
<a class='addthis_button_facebook'></a>
<a class='addthis_button_email'></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c53577713e232cf"></script>
<!-- AddThis Button END -->

13 - Se você quiser acresentar mais um botão, copie a linha toda e cole na sequência. Para inserir o botão de "Adicionar aos favoritos" insira a seguinte linha de código:

<a class='addthis_button_favorite'></a>

14 - Depois de feitas as alterações, basta "Salvar o modelo" e conferir.

Com isso os visitantes do seu blog ou site poderão espalhar o seu conteúdo pela rede, indicando para as pessoas que fazem parte da rede de contatos deles. Também fica mais fácil para você mesmo divulgar seu conteúdo para os seus contatos. Um único detalhe é que ultimamente o Orkut não está linkando corretamente as indicações na ferramenta "Promova" dentro do site, mas isso é um bug no Orkut, não no compartilhamento dos links feito pelo AddThis ou outras ferramentas.

Gostou do tutorial? Então clique nos botões aí abaixo e compartilhe!
blog comments powered by Disqus