Barra de Compartilhamento Twitter, Facebook, Orkut e Buzz

[Compartilhe seus artigos no Twitter, Facebook, Buzz e Orkut!]

Que tal dar a oportunidade a seus visitantes de compartilharem os seus conteúdos nas redes sociais?

Que tal abandonar a barrinha de compartilhamento do Blogger que não é atraente para o visitante?

Por esse motivo, criei essa barra de compartilhamento. Ela, por enquanto, tem suporte a 4 redes sociais (Twitter, facebook, Orkut e Google Buzz), 2 modelos de botão e 2 tamanhos. Veja:

• Modelo 1: ícones grandes, 50x50, com fundo transparente;
• Modelo 2: ícones pequenos, 30x30, com fundo transparente;
• Modelo 3: botões pequenos, 78x20 pixels;
• Modelo 4: botões grandes, 101x26 pixels.

O Script

O script foi criado para ser expansível para vários modelos e também para a possível adição de novos botões e funcionalidades.

Ele não foi escrito apenas para Blogger: ele funciona em qualquer plataforma. E, por funcionar em qualquer plataforma, ele funciona com a seguinte função, totalmente explicada:

<script type="text/javascript">
compartilha({
"twitter":"sim", // Você seleciona "sim" ou "nao" (sem acento) para a exibição do botão do Twitter
"facebook":"sim", // O Mesmo para o botão do facebook
"orkut":"sim", // A mesma coisa para o botão do Orkut
"buzz":"sim", // O mesmo para o botão do Google Buzz
"modelo":"icone", // Dois modelos disponíveis: "icone" e "botao"
"tamanho":"grande", // Dois tamanhos: "grande" e "pequeno"
"url":"URL da página para compartilhar",
"titulo":"Título do artigo para compartilhar"
});
</script>

E, claro, para a função funcionar, necessita que o arquivo JavaScript abaixo seja inserido antes da função (preferencialmente no head da página):

<script src=" http://semnomenet.googlecode.com/files/barra_compartilhamento.js" type="text/javascript"></script>

Como instalar
Como eu disse acima, o script funciona em qualquer página. Porém, só irei ensinar como instalar no Blogger:

Na Home Page do Blogger, clique em “Design” do seu blog. Após isso, vá em “Editar HTML”.

Marque a opção “Expandir modelos de widgets”:

Busque por </head> no seu código (Ctrl+F ajuda nessas horas):

Então, cole a linha logo acima do </head>:

<script src=" http://semnomenet.googlecode.com/files/barra_compartilhamento.js" type="text/javascript"></script>

Ficará assim:

Então, busque por post.body (utilize Ctrl+F novamente)

Cole o código a seguir uma linha acima, caso queira a barra acima da postagem ou uma linha abaixo, caso a queira abaixo da postagem:

<div class="sharebar">
<script type="text/javascript">
compartilha({
"twitter":"sim",
"facebook":"sim",
"orkut":"sim",
"buzz":"sim",
"modelo":"icone",
"tamanho":"grande",
"url":"<data:post.url/>",
"titulo":"<data:post.title/>"
});
</script>
</div>

Eu optei por colocar acima. Coloquei acima da div .post-body, mas isso depende do seu template:

Lembre-se de consultar a seção anterior para saber como modificar o modelo e o tamanho dos botões, além de escolher quais ícones você quer ou não.

Então, clique em “Salvar modelo” e pronto! Sua barra já está lá!

Provavelmente os botões estão colados e alinhados à esquerda. Então, temos duas soluções:
Para quem mexe com CSS, a div é da classe .sharebar e os botões são da classe .sharebutton.
Para quem não entendeu a linha acima, aguarde o próximo tutorial, onde irei ensiná-lo a personalizar a sua barra.

Aproveite e assine o nosso feed para ficar por dentro das próximas dicas de como personalizar essa barra, com CSS e outros hacks!

E você, o que achou? Tem alguma sugestão ou crítica? Deixe nos comentários. Qualquer crítica, desde que construtiva, será bem aceita! Sugira novas redes sociais e novas funções para o widget, pois se o blog é feito para você, você é quem manda!

Obs.: Esse widget foi criado pelo SemNome. A modificação é proibida e a distribuição só é permitida com os devidos créditos. Recomendo não baixar o arquivo e republicá-lo, pois novas atualizações – como a adição de novos botões para redes sociais e outros recursos – serão colocadas nesses arquivos.