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