Widget de compartilhamento no rodapé da postagem

botão compartilhamento twitter facebook share

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
Receba nossos posts por feed ou email

Posts Relacionados

18 Comentários

  1. Eu estou utilizando um template personalizado no meu blog. Isto interfere no resultado deste método de instalação do widget? Pois não aparece nada!

    Grato pela atenção!

  2. Isso te impede de usar outros? Fica a dica: Seja diferente, se você pensa em fazer um blog igual, no padrão… Você está no caminho errado. ;D

  3. Acho que ele não entendeu rs. Coloquei no meu blog e só precisou ajustar algumas coisas no espaço de publicação, pois o gadget tava ficando por cima dos botões de marcações, enviar por email, e próprios botões de compartilhamento… acho que ficou legal, se não ficou dá um toque: http://www.bipolarbrasil.net (grato).

  4. Não tenho conta no Twitter. Tem como retirar o botão para seguir? Funciona em template não nativo do Blogger?

  5. Seu widget é muito bom. Dá pra colocar o google+, espaço tem. Minha sugestão é um widget pra colocar de maneira manual, para quem não tem habilidade com html. Parabéns. Obrigado!

  6. Gostaria muito de colocar esse widget no blog, mas, está dando erro 500 “não foi possível analisar o seu modelo, pois sua formatação é inadequada…” O que estou fazendo de errado? Obrigado.

  7. Achei isso em outro blog, ele não ensinou bem e o meu Template ficou tudo Ferrado. Obrigado pela ajuda, seu Site é muito bom, o meu Blogger só é bom por causa de suas ajudas e de seus outores :D

Faça um comentário