Dicas: Adicionando Botões para Twitter, Facebook, Buzz e Outros no Blog

1.Faça login no Blogger
2.Vá para Layout->Editar HTML->marque a caixinha Expandir modelo de Widgets
Agora procure pelo código abaixo utilizando as teclas Ctrl e F:  <data:post.body/>

Cole abaixo do código o botão desejado!

Twitter

Twitter é um dos sites de mídias sociais mais famoso atualmente. Infelizmente não tem um botão para tweetar oficial. Mas, nesse caso, existe o Tweetmeme, que é usado por muitos sites.
Referência: http://help.tweetmeme.com/2009/04/06/tweetmeme-button/
Esse exemplo é do botão de tamanho grande. É possível modificar o usuário do retweet e a URL a ser compartilhada. Você pode definir um URL “encurtado” ou usar o parâmetrotweetmeme_service para isso. Outra opção é utilizar o botão compacto adicionando o código “tweetmeme_style = ‘compact’;“.


Código do botão:

<script type="text/javascript">
tweetmeme_source = 'username';
tweetmeme_url = 'http://yourdomain.com';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Também é possível alterar o texto que será “tweetado”. Por padrão será utilizado o título da página, porém é possível alterar esse texto com o seguinte código:

<meta name="tweetmeme-title" content="Texto modificado" />

Facebook
Facebook é outra mídia social muito utilizada. E possui ótimas ferramentas para desenvolvedores. E a criação de botões não poderia ser diferente. Você pode escolher como deseja o botão e o Facebook fornece o código para você no seguinte site:
Referência: http://www.facebook.com/share/
Aqui eu mostro um exemplo do botão grande. A URL e o texto serão buscados automaticamente. Como não temos o limite de 140 caracteres, como no Twitter, não precisamos nos preocupar muito em mudar esses valores.

Código do botão:

<a name="fb_share" type="box_count"
href="http://www.facebook.com/sharer.php">
</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
type="text/javascript"></script>

Se você preferir o botão menor, pode utilizar ‘type=”button_count“‘. Você também pode especificar o text e a URL é claro, basta mudar o HREF para algo assim: http://www.facebook.com/sharer.php?u=url&t=texto

Google Buzz

Google Buzz é relativamente recente se comparado a outras mídias sociais. Foi criado como uma resposta a popularidade do Twitter. Como todos os produtos do Google, tem boas ferramentas.

Referência: http://code.google.com/apis/buzz/buttons_and_gadgets.html
Entre as diferentes maneiras de exibir os botões, uma das mais personalizáveis utiliza JavaScript e HTML5. Aqui está um exemplo do botão com tamanho normal.


Código do botão:

<a href="http://www.google.com/buzz/post"
    class="google-buzz-button"
    title="Google Buzz"
    data-message="Texto compartilhado"
    data-url="http://yourdomain.com"
    data-locale="en"
    data-button-style="normal-count"></a>
    <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

Digg
Digg é outra mídia social muito interessante com boas opções de botões. Mas o código é um pouco diferente. Possui um código base e a personalização é feita diretamente na tag A.
Referência: http://about.digg.com/button
Esse é o código JavaScript básico:


Código do botão:



<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

Para posicionar o botão, você precisa adicionar o seguinte código onde você quer que ele apareça:

<a class="DiggThisButton DiggMedium"></a>

Todas as opções podem ser adicionadas nessa última tag.Por exemplo, para exibir o botão pequeno você deve alterar o atributo class da tag para “DiggThisButton DiggCompact“. Se você quiser modificar a URL que será compartilhada pode usar o seguinte código:


<a class="DiggThisButton DiggMedium" href="http://yourdomain.com"></a>

Tags: buzz,compartilhar,digg,facebook,midia social,reddit,stumbleupon,twitter