Adicionando Botões para Twitter, Facebook, Buzz e Outros

Ontem eu estava trabalhando em um projeto em que foi necessário buscar por algumas funcionalidades de compartilhamento. Eu queria os códigos originais dos sites de mídias sociais ao invés desses hacks encontrados por aí. O resultado foi que encontrei códigos para Twitter, Facebook, Google Buzz, StumbleUpon, Reddit e Digg. O único que não é do site original é o Twitter, onde usei o Tweetmeme.

Introdução

Certamente você já viu algum dos ícones exibidos nesse post. E provavelmente você usa algum, ou vários, desses serviços. Mas você sabe como adicionar botões para permitir que seus leitores compartilhem suas informações? Isso que pretendo mostrar aqui. Eu busquei as referências oficias para mostrar os exemplos aqui.

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âmetro tweetmeme_service para isso. Outra opção é utilizar o botão compacto adicionando o código “tweetmeme_style = ‘compact’;“.

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

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

<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>
Para o botão com tamanho menor, basta utilizar ‘data-button-style=”small-count”‘.

StumbleUpon

StumbleUpon possui um dos melhores sites para criar os botões. Basta você entras nesse site:

Referência: http://www.stumbleupon.com/buttons/

Lá você pode selecionar o estilo de botão e se você deseja adicionar em alguma plataforma existente ou no seu próprio site. O código gerado para o botão maior é esse:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=http://yourdomain.com"></script>

Você pode remover o texto ‘&r=http://yourdomain.com‘ se você quiser. Nesse caso o JavaScript vai utilizar a URL da página.

Reddit

Reddit tem várias opções de botões. Com tamanho pequeno, grande e até com um ET

Referência: http://www.reddit.com/buttons/

Nesse link você pode selecionar qual botão você deseja e verificar o código necessário. Também possuí ótimas formas de personalizar os dados, tudo feito por JavaScript. O código básico está aqui:

<script type="text/javascript" src="http://reddit.com/static/button/button2.js"></script>

Se você mudar para button1.js, você terá o botão pequeno. Se você mudar para button3.js terá o logo com o desenho do ET. E para personalizar, você pode usar as seguintes opções:

<script type="text/javascript">reddit_url='[URL]'</script>
<script type="text/javascript">reddit_target='[COMMUNITY]'</script>
<script type="text/javascript">reddit_title='[TITLE]'</script>
<script type="text/javascript">reddit_newwindow='1'</script>
<script type="text/javascript">reddit_bgcolor='[COLOR]'</script>
<script type="text/javascript">reddit_bordercolor='[COLOR]'</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:

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

Fonte: oscardias.com