Código de botões para Curtir e Twittar posts e artigos de blogs ou sites

Código para colocar aqueles botões do Twitter e Facebook em blogs ou sites, aqueles que tem um balão com a quantia de pessoas que curtiram ou enviaram.
Esses botões servem para as pessoas compartilhar o conteúdo de seu artigo(postagem), se elas gostarem e acharem que amigos possam gostar também, fazendo isso elas estarão divulgando seu blog/site.

Os códigos podem ser pegos no twitter e no Facebook, mas o principal problema que eu enfrentei foi na organização dos elementos na página, e, no botão do facebook era necessário colocar o endereço Url do blog, mas, para cada pessoa que Curtia(clicava) no botão de um post(artigo) o resultado mostrado na conta dele era um link dizendo que ele havia gostado do blog e não daquele post, sendo assim, se aquele visitante quisesse retornar ou compartilhar aquele artigo ele não conseguiria, pois na conta dele só tinha o link da página inicial do blog.

Entenda alguns detalhes dos botões Curtir e Twittar

Para o botão do Facebook adaptei um javascript que irá usar window.location.href para 'pegar' a Url da página em que o visitante está e usar essa Url para criar o botão curtir, assim, se um visitante quiser curtir várias páginas(artigos, posts ou Home) de seu blog/site ele poderá, Ele irá curtir ou twittar a página que estiver, se fosse colocar a Url da página inicial, ele só poderia curtir aquela página, mesmo estando em outra.

Próximo aos códigos abaixo estão as imagens dos botões e mais ou menos como os botões ficam no local onde são colocados, as imagens são uma ilustração do botão, e, esse poderá ficar levemente diferente dependendo do navegador ou se os sites Facebook e Twitter fizerem alguma alteração.

O facebook tem dois tipos de botões, um mais azulado e outro escuro, o escuro é mais indicado para páginas com fundo escuro, mas, acho que, já que o botão do Twitter é azul claro, seria mais interessante usar os modelos claros para ambos porque eles irão combinar um com o outro, e, dizem que preto combina com tudo, sendo assim, os botões azuis podem ficar melhor e as pessoas vão perceber ele melhor, é mais chamativo e muitos já estão acostumados.

Atenção: Você deve fazer uma modificação fácil no código do botão do Twitter, você poderá escolher um dos códigos abaixo, o que tem formato de botão que lhe agrada, e pode mudar a palavra foitestado pelo seu nome de usuário do Twitter, com cuidado para não retirar as aspas, aí, quando o visitante de seu blog twitar, o seu nome de usuário do Twitter aparecerá no tweet dele, por exemplo, se você twittar esse post(usando o botão), o texto do seu tweet ficaria mais ou menos assim:

Botões para Curtir e Twitar artigos de blogs ou sites http://goo.gl/fb/VOJlf Via @foitestado

Os seguidores dele verão o nome de usuário que você quiser(o seu ou de seu blog) e poderão clicar e lhe seguir se quiserem, aí você que é o dono do blog poderá conseguir mais seguidores para seu Twitter, mas, isso nem sempre acontece, poucos clicam e alguns visitantes de seu blog, ao twittar, poderão apagar esse trecho para caber mais palavras... Mas, é uma pequena chance, e você não deve desperdiçar nada.

Outra coisa, ao visitante clicar no botão do Twitter abrirá uma nova página e o Twitter se encarregará de colocar o título do artigo e uma Url curta que, se acessada irá retornar para o artigo de seu blog. Algumas vezes, raramente, o twitter 'não confia' naquele site/blog ou artigo e não permite essa ação, isso pode ocorrer no começo e depois de algum tempo passar, pode ocorrer mais com Url longa, com alguns caracteres 'especiais' na Url de seu blog ou com blogs/sites que ele(o sistema) ainda desconhece.

Quem quiser dar uma margem(distancia) de folga entre os botões e outros elementos de sua página, vou explicar bem abaixo, depois dos códigos.

Atualização, quem quiser Código pra colocar botão +1 do Google, Orkut, Twitar e Curtir em blogs e sites, clique
Para blogger.com botões abaixo do post, Clique aqui

Códigos para blog/site que irá gerar botão Curtir no Facebook e tweet

Teste os botões aqui ao lado =>

Próximo aos códigos tem uma ilustração(imagem) dos botões, para testar o funcionamento use o botão acima.

No blogger, esses códigos são adicionados como gadget, Html/JavaScript, clique

Em páginas de sites o código vai em qualquer local entre as tags <body></body>Mas para testar ele deve estar numa página na web.

Botão Curtir escuro e tweet, vertical, esquerdo

Modelo do botão Curtir Facebook escuro(dark) e tweet, quadrado vertical e do lado esquerdo, para blogs e sites<div style='width:55px;float:left;margin:1px 4px 2px 3px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&amp;layout=box_count&amp;action=like&amp;colorscheme=dark&amp;font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='width:55px;overflow:hidden;height:65px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div><a class='twitter-share-button' data-count='vertical' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>

Botão Curtir e tweet, vertical, esquerdo

Modelo do botão Curtir Facebook claro e tweet, quadrado vertical e do lado esquerdo, para blogs ou site<div style='width:55px;float:left;margin:1px 4px 2px 3px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&amp;layout=box_count&amp;action=like&amp;font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='width:55px;overflow:hidden;height:65px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div><a class='twitter-share-button' data-count='vertical' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>

Botão Curtir escuro e tweet, vertical, lado direito

Modelo do botão Curtir Facebook escuro(dark) e tweet, quadrado vertical e do lado direito, para blog e sites<div style='width:55px;float:right;margin:1px 4px 2px 3px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&amp;layout=box_count&amp;action=like&amp;colorscheme=dark&amp;font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='width:55px;overflow:hidden;height:65px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div><a class='twitter-share-button' data-count='vertical' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>

Botão Curtir e tweet, vertical, lado direito

Modelo do botão Curtir Facebook claro e tweet, quadrado vertical e do lado direito, para blog e sites<div style='width:55px;float:right;margin:1px 4px 2px 3px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&amp;layout=box_count&amp;action=like&amp;font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='width:55px;overflow:hidden;height:65px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div><a class='twitter-share-button' data-count='vertical' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>

Botões Curtir e Tweet na Horizontal

Modelo do botão Curtir Facebook escuro e tweet padrão, estreito(horizontal) e do lado esquerdo, para blog e sites<div style='width:205px;float:left;margin:1px 4px 2px 3px;height:20px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&amp;layout=button_count&amp;action=like&amp;colorscheme=dark&amp;font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='float:left;width:90px;overflow:hidden;height:20px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div style='float:left;width:110px;'><a class='twitter-share-button' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>

Modelo do botão Curtir Facebook claro e twittar padrão, horizontal e do lado esquerdo, para blogs e sites<div style='width:205px;float:left;margin:1px 4px 2px 3px;height:20px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&amp;layout=button_count&amp;action=like&amp;font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='float:left;width:90px;overflow:hidden;height:20px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div style='float:left;width:110px;'><a class='twitter-share-button' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>

Modelo do botão Curtir Facebook escuro e twitter padrão, estreito(horizontal) e do lado direito, para blog e sites<div style='width:205px;float:right;margin:1px 4px 2px 3px;height:20px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&amp;layout=button_count&amp;action=like&amp;colorscheme=dark&amp;font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='float:left;width:90px;overflow:hidden;height:20px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div style='float:left;width:110px;'><a class='twitter-share-button' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>

Modelo de botão Curtir Facebook claro e twitter padrão, horizontal e do lado direito, para blogs e sites<div style='width:205px;float:right;margin:1px 4px 2px 3px;height:20px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&amp;layout=button_count&amp;action=like&amp;font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='float:left;width:90px;overflow:hidden;height:20px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div style='float:left;width:110px;'><a class='twitter-share-button' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>

Afastar os botões de outras coisas

Nos códigos acima, eu coloquei uma margem, mas, ela é tão fina que quase não faz diferença, deixei assim porque não sei qual será a necessidade de cada um, sendo assim, talvez você terá que entendê-la e aumentar um pouco.

O código responsável pela margem é:
margin:1px 4px 2px 3px;

Essa margem não se aplica ao botão individualmente, mas sim, a volta deles, é que os dois botões estão dentro de uma mesma DIV, e, a margem se aplicará a essa div, para os botões horizontais, a div tem uma largura de 205px e, só para constar, as margens laterais são somadas a essa largura. A div com botões verticais tem 55px de largura, somando as margens laterais que eu coloquei fica 62px.

No código de margem acima:

1px O primeiro valor é para o topo.
4px O segundo valor é a lado direita
2px O terceiro valor é a base
3px O quarto e último valor é para o lado esquerdo

No código de margem, os espaços e caracteres devem ser respeitados.
Sabendo disso, você pode alterar apenas os números para aumentar ou diminuir as margens e, assim fazer com que eles fiquem mais distantes ou perto de outras coisas.

Talvez observando a imagem abaixo fica mais fácil entender o lado que cada número representa.
Clique para aumentar

• Colocar botão Web Slice e Feed no blog ou site
• Mudar frase do botão do gadget seguidores
• Colocar gadget do blogger no seu blogspot
• Mudar a aparência do gadget de inscrição do blogger
• Gadget classificar com estrelas, votar, avaliar post no blogger
• Mudar cores de fonte e fundo de Reações e gadget de Votar com estrelas
• Encurtar links com novo serviço do Google Shortener
• Baixar Toolbar pra encurtar URL e enviar pro Twitter