Barra de Compartilhamento Twitter, Facebook, Orkut e Buzz

| 10 Comentários

Compartilhamento no 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:

Modelos da barra de compartilhamento
  • 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”.

Blog » Design

Blog » Design » Editar HTML

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

Expandir modelos de widgets

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

</head>

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:

Script antes do </head>

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

ScreenClip000005

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:

ScreenClip000006

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.

10 comentários [Comente também!]:

Marco Damaceno disse:

Gostei muito do script! Tenho o costume de colocar o código do script sem link para algum lugar, ou seja, hospedo o javascript no Blogger mesmo. Mas já que você falou que pretende melhorá-lo resolvi por não fazer isso.

Muito bom mesmo!

José Eduardo disse:

Ótima ferramenta, as opções que deixou para eliminar os botões ou acrescentar são as que considerei mais relevantes, mas todo o trabalho que fez está de parabéns. A ferramenta está no meu blog e funcionando perfeitamente.

Gostaria só de fazer uma observação. A única opoção que não funcionou foi a alteração de "icone" para "botão", ou seja, os icones são alteráveis para grande ou pequeno, mas se eu quiser mudar de icone para botão, seja botão grande ou pequeno eles não aparecem no blog.

Para mim não teve importância, pois os ícones foram satisfatórios, só postei esta observação para mantê-lo informado.

Como forma de gratidão este blog está linkado em todos os meu artigos como sugestão para quem possui um blog e necessita de ferramentas como esta.

Muito obrigado pela ferramenta, e que Deus o abençoe.

SemNome disse:

@José, Obrigado pelo apoio e pelo comentário.

Sobre o modelo dos botões, talvez seja porque você tenha colocado "botão", com acento. Pelo fato de ser um script, preferi deixar sem acentos ("botao").

E obrigado novamente. São leitores como você que dão motivação para continuar criando ferramentas.

@Marco, sinto-me feliz por você ter gostado do script. Agradeço também por ter optado utilizar o nosso script hospedado.

A próxima versão do widget será criada assim que tiver mais funções, mas já tem algumas delas: Tracking para acompanhar os cliques pelo Analytics, botão do Tumblr, citação do Twitter e textos personalizados por rede social.

[]'s
SemNome

José Eduardo disse:

Perfeito, agora que vi que na explicação você não põe o acento em "botao" de fato eu havia acrescentado o acento, mas agora está funcionando.

Mais uma vez agradeço a dica.

Periecos Brechó disse:

muito boa a postagem, Valeu. Cara queria saber se tem como mudar as cores dos botoes de acesso do facebook, orkut em fim?isso é possivel?

SemNome disse:

@Periecos, por enquanto isso não é possível. Talvez numa próxima edição do widget.

Mas você pode usar uma imagem como background dos ícones, utilizando CSS.

[]'s
SemNome

Pedro disse:

Po, tava procurando um tutorial desses a dias, ja estava ficando sem cabelos, até que encontrei esse, muito bom, personalizável e funcional, da forma que eu queria!

GRATO!

Cláudio Luiz disse:

Ótimo tutorial...
Já coloquei no meu blog e esta funcionando...
só tem um problema, ele não aparece os icones em todas as postagens só a ques estão na pagina inicial.
Será que tem que modificar alguma coisa?
mas mesmo assim ficou legal!

SemNome disse:

@Cláudio, provavelmente você colocou o código dentro de uma condicional (b:if) que só aparece caso a página seja do tipo "index" ou não seja do tipo "item".

Tente colocar um pouco mais abaixo, depois de um </b:if>.

[]'s
SemNome

Anderson Oliveira de Carvalho disse:

Oi. Boa noite.
Eu nao entendi essa parte:

"url":"URL da página para compartilhar",
"titulo":"Título do artigo para compartilhar

O que eu tenho que fazer?

É o URL de qual pagina?
E que artigo?

Vlw!

Postar um comentário

Antes de comentar, leia:

  • Não serão permitidos comentários com ofensas pessoais
  • Não serão permitidos comentários com conteúdo referente à pirataria
  • Os comentários devem ter ligação direta com o assunto
  • Não serão tolerados comentários com links para promover outros blogs.
  • Se quiser deixar um link, comente com a opção OpenID
  • O comentário será lido antes de ser publicado e só será publicado se estiver de acordo com as regras
  • Os comentários não refletem a opinião do autor do blog
  • O autor do blog não se responsabiliza pelo conteúdo dos comentários postados por outros visitantes