Barra de Compartilhamento Twitter, Facebook, Orkut e Buzz
Autor: Tkoift | Publicado: 2011-01-11T12:05:00-03:00

[Compartilhe seus artigos no Twitter, Facebook, Buzz e Orkut!]  Que tal dar a oportunidade a seus visitantes de compartilharem os seus conte&#250;dos nas redes sociais?  Que tal abandonar a barrinha de compartilhamento do Blogger que n&#227;o &#233; 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&#227;o e 2 tamanhos. Veja:      Modelo 1: &#237;cones grandes, 50x50, com fundo transparente;     Modelo 2: &#237;cones pequenos, 30x30, com fundo transparente;     Modelo 3: bot&#245;es pequenos, 78x20 pixels;     Modelo 4: bot&#245;es grandes, 101x26 pixels.    O Script  O script foi criado para ser expans&#237;vel para v&#225;rios modelos e tamb&#233;m para a poss&#237;vel adi&#231;&#227;o de novos bot&#245;es e funcionalidades.  Ele n&#227;o foi escrito apenas para Blogger: ele funciona em qualquer plataforma. E, por funcionar em qualquer plataforma, ele funciona com a seguinte fun&#231;&#227;o, totalmente explicada:  &lt;script type=&quot;text/javascript&quot;&gt;    compartilha({     &quot;twitter&quot;:&quot;sim&quot;, // Voc&#234; seleciona &quot;sim&quot; ou &quot;nao&quot; (sem acento) para a exibi&#231;&#227;o do bot&#227;o do Twitter     &quot;facebook&quot;:&quot;sim&quot;, // O Mesmo para o bot&#227;o do facebook     &quot;orkut&quot;:&quot;sim&quot;, // A mesma coisa para o bot&#227;o do Orkut     &quot;buzz&quot;:&quot;sim&quot;, // O mesmo para o bot&#227;o do Google Buzz     &quot;modelo&quot;:&quot;icone&quot;, // Dois modelos dispon&#237;veis: &quot;icone&quot; e &quot;botao&quot;     &quot;tamanho&quot;:&quot;grande&quot;, // Dois tamanhos: &quot;grande&quot; e &quot;pequeno&quot;     &quot;url&quot;:&quot;URL da p&#225;gina para compartilhar&quot;,     &quot;titulo&quot;:&quot;T&#237;tulo do artigo para compartilhar&quot;     });     &lt;/script&gt;  E, claro, para a fun&#231;&#227;o funcionar, necessita que o arquivo JavaScript abaixo seja inserido antes da fun&#231;&#227;o (preferencialmente no head da p&#225;gina):  &lt;script src=&quot; http://semnomenet.googlecode.com/files/barra_compartilhamento.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  Como instalar     Como eu disse acima, o script funciona em qualquer p&#225;gina. Por&#233;m, s&#243; irei ensinar como instalar no Blogger:  Na Home Page do Blogger, clique em &#8220;Design&#8221; do seu blog. Ap&#243;s isso, v&#225; em &#8220;Editar HTML&#8221;.       Marque a op&#231;&#227;o &#8220;Expandir modelos de widgets&#8221;:     Busque por &lt;/head&gt; no seu c&#243;digo (Ctrl+F ajuda nessas horas):     Ent&#227;o, cole a linha logo acima do &lt;/head&gt;:  &lt;script src=&quot; http://semnomenet.googlecode.com/files/barra_compartilhamento.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  Ficar&#225; assim:     Ent&#227;o, busque por post.body (utilize Ctrl+F novamente)     Cole o c&#243;digo a seguir uma linha acima, caso queira a barra acima da postagem ou uma linha abaixo, caso a queira abaixo da postagem:  &lt;div class=&quot;sharebar&quot;&gt;    &lt;script type=&quot;text/javascript&quot;&gt;     compartilha({     &quot;twitter&quot;:&quot;sim&quot;,     &quot;facebook&quot;:&quot;sim&quot;,     &quot;orkut&quot;:&quot;sim&quot;,     &quot;buzz&quot;:&quot;sim&quot;,     &quot;modelo&quot;:&quot;icone&quot;,     &quot;tamanho&quot;:&quot;grande&quot;,     &quot;url&quot;:&quot;&lt;data:post.url/&gt;&quot;,     &quot;titulo&quot;:&quot;&lt;data:post.title/&gt;&quot;     });     &lt;/script&gt;     &lt;/div&gt;  Eu optei por colocar acima. Coloquei acima da div .post-body, mas isso depende do seu template:     Lembre-se de consultar a se&#231;&#227;o anterior para saber como modificar o modelo e o tamanho dos bot&#245;es, al&#233;m de escolher quais &#237;cones voc&#234; quer ou n&#227;o.  Ent&#227;o, clique em &#8220;Salvar modelo&#8221; e pronto! Sua barra j&#225; est&#225; l&#225;!  Provavelmente os bot&#245;es est&#227;o colados e alinhados &#224; esquerda. Ent&#227;o, temos duas solu&#231;&#245;es:    Para quem mexe com CSS, a div &#233; da classe .sharebar e os bot&#245;es s&#227;o da classe .sharebutton.     Para quem n&#227;o entendeu a linha acima, aguarde o pr&#243;ximo tutorial, onde irei ensin&#225;-lo a personalizar a sua barra.  Aproveite e assine o nosso feed para ficar por dentro das pr&#243;ximas dicas de como personalizar essa barra, com CSS e outros hacks!  E voc&#234;, o que achou? Tem alguma sugest&#227;o ou cr&#237;tica? Deixe nos coment&#225;rios. Qualquer cr&#237;tica, desde que construtiva, ser&#225; bem aceita! Sugira novas redes sociais e novas fun&#231;&#245;es para o widget, pois se o blog &#233; feito para voc&#234;, voc&#234; &#233; quem manda!  Obs.: Esse widget foi criado pelo SemNome. A modifica&#231;&#227;o &#233; proibida e a distribui&#231;&#227;o s&#243; &#233; permitida com os devidos cr&#233;ditos. Recomendo n&#227;o baixar o arquivo e republic&#225;-lo, pois novas atualiza&#231;&#245;es &#8211; como a adi&#231;&#227;o de novos bot&#245;es para redes sociais e outros recursos &#8211; ser&#227;o colocadas nesses arquivos.