Botões para compartilhar posts e botão Reaction igual do Facebook para usar no blog - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Botões para compartilhar posts e botão Reaction igual do Facebook para usar no blog

Publicado em 02/05/2019

Botões para compartilhar posts e botão Reaction igual do Facebook para usar no blog
Há aqui no blog diversos tutoriais que ensinam como colocar botões de compartilhar os posts do blog em redes sociais.
Todos são muito legais, fáceis de instalar e de usar mas hoje quero te ensinar um modelo diferente.

O tutorial que vamos fazer hoje usa um serviço externo para funcionar, e não um script aberto como eu sempre mostrei. Estou falando do ShareThis, um serviço que gera botões variados e muito úteis para usar no blog.
Depois de pronto o resultado será esse:


Demonstração do tutorial


Como colocar os botões ShareThis no blog?


Para começar você precisa criar uma conta no site ShareThis.
Ao clicar no link aparecerá a página para fazer login (caso você já tenha criado uma conta lá anteriormente) ou então para criar a conta.
Vou partir do pressuposto de que você vai criar a conta agora, ok?
Na página que aparece quando você acessa o site clique em Sign up - It's free e na janela que abrir digite seu email, crie uma senha e coloque a url de seu blog, sem o https.
Assim:
Como criar uma conta ShareThis
A seguir, na página que abrir, terá um código de verificação que você precisa inserir em seu template do blog.
(Não feche a página do ShareThis, ok?)

Esse código de verificação e ativação será assim (claro que com número de identificação):

<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5c9c2853fbd80b0011b664f6&product=social-ab' async='async'></script>

Porém, se tentar inclui-lo assim no seu código-fonte do blog ele dará erro.
Precisamos modifica-lo. Guarde apenas seu ID, o número que identifica sua conta.
Para facilitar deixei o código já pronto para ser copiado, junto com outros que vamos usar.
Abra a página dos códigos:


Copiar o código


Copie o CÓDIGO JVASCRIPT SHARETHIS MODIFICADO, coloque o seu ID no lugar de SEU ID NUMÉRICO AQUI e vá ao painel administrativo de seu blog.
Lá clique em Tema e a seguir clique em Editar HTML.
Dentro da caixa do código-fonte tecle Ctrl+F e na barra de busca que expandir digite </body>. Tecle Enter para localizar.
Cole o código já modificado acima de </body> lá no código fonte de seu blog.
Salve.
Volte então à página do ShareThis e clique em Verify.
Se tudo deu certo o site já terá verificado seu blog e podemos seguir.


Como configurar os botões ShareThis


Nessa mesma página do ShareThis aparece na lateral um menu de opções.
Clique em Share Buttons.
Dentre as opções escolha Inline share buttons.
Ative o recurso Inline share buttons clicando no botãozinho Off/On.

Aí role a página e vá mexendo, ajustando as redes sociais que deseja exibir, o alinhamento dos botões, o tamanho deles, se quer contador ou chamada à ação, defina se quer arredondar os botões e escolha o idioma.
Terminou de configurar? Clique em Update.

Agora vamos colocar de fato no blog.
Volte ao seu painel do blog e na barra de busca digite </head>
Tecle Enter para localizar.
Acima de </head> cole o CÓDIGO CSS DOS BOTÕES REACTIONS ANIMADOS E SALVE.

Agora localize essa linha:
<div class='post-footer-line post-footer-line-1'>
Podem aparecer 2 ocorrências dessa linha, em geral a segunda ocorrência é a que buscamos.
Teste para saber qual linha funciona pra você, ok?
Abaixo dessa linha cole o CÓDIGO HTML
Salve.
Seus botões já aparecem.



Informações finais sobre os botões ShareThis


Como configurar os botões ShareThis

1- Os botões não funcionam corretamente se forem exibidos na página inicial do blog. Por isso adicionei ao CÓDIGO HTML a condicional que exibe os botões apenas nas páginas dos posts.
Recomendo deixar assim, portanto esses botões não são indicados para quem usa os posts inteiros na home do blog (não usem, gente, pesa demais, usem posts resumidos).

2- ShareThis fornece um painel que mostra as estatísticas dos botões, vale a pena acompanhar para saber os números das interações em seus posts.

3- Caso não queira mais os botões, todos ou alguns deles, não precisa mexer no seu código-fonte do blog.
Basta acessar sua conta ShareThis e "desligar" os botões clicando no botãozinho On/Off.

4- Também é no seu painel ShareThis que você edita seus botões, muda configurações, exclui ou adiciona novos botões, etc...
Lembre-se apenas de clicar em Update a cada modificação que fizer.

5- Também dá pra gerar botões com link para perfis em redes sociais.
Basta clicar, no menu lateral, em Follow Buttons e configurar como desejar.
Aí é só copiar a linha de código fornecida e colar em seu blog como gadget HTML/JAVASCRIPT.
Muito legal e simples, né?

6- E dá pra ter os botões sobrepostos às imagens do blog.
Clique em Share Buttons e ative a opção Image Share Buttons.
Elas aparecerão automaticamente em seu blog, sem precisar adicionar mais nada. Mas não use ao mesmo tempo que as Reactions, dá pane, tem que optar por um ou por outro (deu ruim nos meus testes).


E terminamos!
Sei que ficou um tutorial grande mas é que gosto de explicar em detalhes, mas basicamente os passos são:
  1. Criar a conta ShareThis;
  2. Verificar a conta inserindo o código modificado que eu forneci (adicionando seu ID, não esqueça);
  3. Inserir as linhas de código fornecidas para que os botões apareçam;
  4. Adicionar a personalização caso queira usar os botões Reaction animados.
Experimente em seu blog, faça o tutorial e se tiver alguma pergunta diga nos comentários e eu ajudo assim que possível.
Enjoy!





8 comentários

  1. Muito obrigado pelos post,bacanas e informativos.

    ResponderExcluir
  2. Muito obrigado, uma informação? Como poderia conseguir o menu que aparece neste blog de teste? Obrigada ;)

    ResponderExcluir
    Respostas
    1. Sandra, o tutorial deste menu está pronto, será publicado na semana que vem, segunda ou terça feira.
      beijossss

      Excluir
  3. Oi Elaine,
    os botões demoram um pouco para aparecer?
    Eu fiz tudo direitinho e nada até agora...

    bjs

    Amor por Livros

    ResponderExcluir
    Respostas
    1. Renata, não demora não, é automático.
      Tem certeza que não esqueceu nada?

      Excluir
    2. Acho que não... pode ser incompatibilidade com meu layout? Ele não é original do blogger...

      Excluir
    3. Olha, nunca testei em temas não nativos, mas em princípio não teria problema não, até porque seu template é personalizado com base em um tema antigo do Blogger, o Mínima..
      Ainda acho que o local para colar o código pode estar errado, experimente em outra área de post-footer, vá testando até dar certo......
      As vezes é o local mesmo que dá erro :)

      Excluir
  4. Fiz primeiro no blog de teste e somente apareceu os ícones de compartilhar, as carinhas não apareceram...mesmo assim achei legal e fiz no meu blog oficial - apareceu os ícones em cima das fotos mas acabei mudando pois fica muito lento de carregar a página. Mudei o estilo e agora não apareceu mais nada. Tem mais de hora para atualizar e nada mesmo.

    ResponderExcluir

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…