Botões Curtir e Compartilhar com contador integrado para blog - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Botões Curtir e Compartilhar com contador integrado para blog

Publicado em 22/01/2019

Botões Curtir e Compartilhar com contador integrado para blog
Não lembro mais quem foi (pois faz tempo e foram alguns pedidos) mas finalmente lembrei de elaborar esse tutorial hoje, que vai te ensinar como colocar em seu blog esses botões Curtir e Compartilhar do Facebook, com contadores que contabilizam as curtidas/compartilhamentos individuais de cada post. São os mesmos que eu uso há anos aqui no blog.
Role a página para ver (e aproveita pra curtir o post, você verá a contagem mudar automaticamente).
Vamos aprender?


Botões Curtir e Compartilhar com contador para blog


Comece acessando o painel administrativo de seu blog.
Desnecessário dizer que toda e qualquer alteração deve ser feita antes em um blog de testes, né?
Alerta feito, vá até a aba Tema e clique em Editar HTML.
Dentro da caixa com o código-fonte de seu template tecle Ctrl+F e na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima dessa tag de fechamento cole o CÓDIGO CSS e salve.

Importante:
Esse código define o posicionamento dos botões, e sua distância em relação ao final do post ou qualquer outro elemento em post-footer.

Agora digite <div class='post-footer'>  tecle Enter para localizar.
Abaixo dessa linha cole o CÓDIGO DOS BOTÕES.
Salve.

Agora preste atenção!
Muito provavelmente você encontrará mais de uma ocorrência dessa linha; estamos em busca de segunda ocorrência, mas precisa testar, ok?
Aí é contigo pois cada template pode ter variações.

Outros locais onde o CÓDIGO DOS BOTÕES pode ser colado:
Procure por
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

E faça testes. No caso do meu blog eu posicionei os botões abaixo dos botões de compartilhar personalizados, em <div class='post-footer-line post-footer-line-2'>

Ia esquecendo!
Os códigos:

Copiar os códigos


Faça testes de posicionamento, se não apareceu na primeira ocorrência, tente a segunda, insista até dar certo porque dará.
Eu agarantio...






3 comentários

  1. Ola amiga tem um jeito de colocar esse botões nas páginas estaticas do blogger?

    ResponderExcluir
    Respostas
    1. Antonio, se seu template não tiver nenhum bloqueio que limite a exibição do post-footer os botões aparecem normalmente nas páginas estáticas.
      Mas tem que ver se o template permite isso.
      O meu, por exemplo, defini para não exibir...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…