Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1471608410
Vida do cache: 1472904410
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Facebook Gadgets Redes Sociais Twitter Widgets

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


De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

21 Comentários

  1. Andy Reis Elcimar disse:

    Mas o blogspot disponibiliza um compartilhado dele mesmo! kkk

    http://acessopermitidoblog.blogspot.com.br/

  2. Tiago Argolo disse:

    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!

  3. Paulo Estevão disse:

    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

  4. Paulo Estevão disse:

    As vezes muda um pouco, você tem que achar o lugar certo.

    abraços

  5. Wallace Oliveira disse:

    Legal esse widget, mas poderia ter implementado o Google +.

    Abraços

  6. Will Brasil disse:

    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).

  7. Edson F. disse:

    Desculpe a pergunta é para você, Tiago. Perdão!

  8. minimorsa disse:

    Interessante o widget
    em minha opinião ficou bom no meu blog
    vejam
    http://gooosgle.blogspot.com.br/

  9. Márcio Batista da Silva disse:

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

  10. Carlos Rocha disse:

    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!

  11. Carlos Rocha disse:

    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.

  12. Eduardo disse:

    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 😀

  13. Walace disse:

    Pó man no meu não apareceu fiz tudo igualzinho mais não aparece nas paginas de postagens… Se poder mi ajuda eu agradeço, Vlw.

  14. Luis Augusto disse:

    Amigo, o meu botão de seguir e tweetar não fica dentro da caixa verde!

  15. coloquei tudo certinho mais não apareceu nada/
    sera que ta acontecendo nem um botão de compartilhar quer aparecer, já tentei outros e nada

  16. Valeu! Gostei bastante. Estou usando no meu site: http://www.jornestado.com.br

    Só que eu também gostaria que tivesse o botão do Google+

    Abraço,

    Francisco Britto

  17. Calcular IMC disse:

    Muito obrigado um dos poucos que funcionam…

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.