Widget de compartilhamento no rodapé da postagem

\"botão

Todo blogueiro de sucesso precisa de bons artigos e de bons leitores. Porém, para sua expansão e presença na internet é necessário que ele tenha suas postagens divulgadas em várias redes sociais, pricipalmente Facebook e Twitter criando um efeito viral bastante útil.

Para aqueles que acompanham minhas postagens aqui no Códigos Blog já devem ter percebido que meus artigos são direcionados à redes sociais, dicas de ferramentas, sites e outros assuntos que interligam com essa base. Porém, eu estudo um pouco sobre web design também.
Resolvi então mudar um pouco meu foco dessa vez, entrar na área do Paulo Estevão (criador deste blog) e dar essa dica para vocês.

Funcionalidades

– Botão curtir e enviar para o Facebook.
– Botão tweet, para postar no Twitter.
– Botão para seguir no Twitter.

Alterações

1) Faça login no Blogger, entre em “Modelo” – > “Editar HTML”. Depois marque a caixa “Expandir modelos de widgets”;

2) Procure (Ctrl + f) por <div class=\’post-footer-line post-footer-line-1\’/> ou <div class=\’post-footer-line post-footer-line-1\’>

3) Quando achar, adicione este código ABAIXO de uma destas tags citadas acima:

<b:if cond=\'data:blog.pageType == &quot;item&quot;\'>
<div style=\' height:80px;  background:rgb(232, 240, 249); border: 1px solid rgb(171, 210, 233); padding: 10px; margin: 10px 0pt 10p 0px;\'>
<p style=\'color: rgb(59, 89, 152); margin: 0pt 0pt 5px; font: bold 1.3em helvetica,arial,verdana;\'>Gostou? Então compartilhe!</p>
<div id=\'fb-root\'/><script src=\'http://connect.facebook.net/pt_BR/all.js#xfbml=1\'/><fb:like send=\'true\' show_faces=\'false\' width=\'450\'/>

<a class=\'twitter-share-button\' data-count=\'horizontal\' href=\'http://twitter.com/share\'>Tweet</a>
<script src=\'http://platform.twitter.com/widgets.js\' type=\'text/javascript\'/><a href=\"https://twitter.com/codigosblog\" class=\"twitter-follow-button\" data-show-count=\"false\" data-lang=\"pt\">Seguir</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=\"//platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");</script>
</div>
</b:if>

Ajustes

Azul: Mude para frase que deseja colocar no widget.
Laranja: A largura do widget. Recomendo que seja a mesma da área do post.
Vermelho: Seu username do Twitter.
Área grifada: Ao invés de colocar o botão \"curtir/enviar\" tu poderá colocar o botão de curtir a página de fãs. Basta substituir o texto grifado pelo código abaixo:

<div class=\"fb-like\" data-href=\"http://facebook.com/codigosblog\" data-send=\"true\" data-width=\"450\" data-show-faces=\"true\"></div>

- Modifique o nome em negrito pelo da sua página no Facebook.

Verifique se está tudo certo e salve seu modelo!

Agradecimentos: MM Ahmedzai