Como colocar os emoticons Reações do Facebook em posts do Blogger? - * Blog Elaine Gaspareto *

Como colocar os emoticons Reações do Facebook em posts do Blogger?

em 08/05/2017

Como colocar os emoticons Reações do Facebook em posts do Blogger?

Alô, pessoas blogueiras!
Você costuma navegar pelo Facebook? Possivelmente sim, né?
Então você certamente conhece os botões das reações, aqueles emoticons bomnitinhos que a gente usa para expressar nosso sentimento diante de uma postagem.
Mais ou menos assim:


Quer aprender como colocar em seu blog um widget semelhante?
E tem mais!
Esse widget dá acesso à um painel de controle bem legal, fornecido pelo site que gera o serviço, e que mostra coisas como quantas pessoas reagiram ao post do blog, quantas clicaram, quais foram as reações, etc...
Também é possível personalizar e trocar as palavras, e ainda adicionar o recurso de compartilhar o post no Facebook. E ainda tem posts recomendados! Uma belezinha!
Quer aprender?
Depois de pronto o resultado será esse:


Demonstração do tutorial


Como colocar os emoticons Reações/Reactions do Facebook em posts do Blogger?



Para começar acesse o site que gera os emoticons: Vicomi
Lá você verá a página incial; role um pouco a página, preencha os campos pedidos e clique no botão Proceed to step 2:

Na página seguinte selecione o estilo de seu widget e clique em Done ao final da página.
Abrirá a página com seu código.
Copie-o. Deixe a página do site Vicomi aberta, vamos voltar lá depois.

Agora vamos instalar em seu blog.
Acesse a aba Modelo e clique em Editar HTML.
Dentro da caixa do código fonte tecle Ctrl+F e na barra de busca que abrir cole essa linha:



Tecle Enter para localizar.
Talvez você ache 2 ocorrências dessa linha; estamos em busca da segunda ocorrência, ok?
Abaixo dela cole o código copiado do site Vicomi.

Agora preste atenção!
Caso queira que os emoticons apareçam na página inicial de seu blog não precisa fazer mais nada, basta salvar e tá pronto.
Porém eu recomendo que você deixe que os emoticons apareçam somente nas páginas internas dos posts.
Fica menos repetitivo e mais bonito, eu acho.
Para fazer isso é bem simples:

Antes do código copiado do site cole isso em seu código fonte:



Aí cole seu código e finalize fechando a condicional com </b:if>
Ficará assim:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Seu código aqui
</b:if>

Salve, entre em algum post do blog e veja o resultado.
Legal, né?

Caso queira colocar os emoticons em outro lugar de seu template precisará testar.
Experimente antes de <div class='post-footer-line post-footer-line-1'> ou <div class='post-footer-line post-footer-line-2'> por exemplo.
Teste até achar o melhor lugar para você.

Emoticons instalados?
Agora volte à página do site Vicomi e clique em Go to my dashboard, que aparece no final da página com seu código.
Abrirá a página com seu painel de controle.
Tem muita coisa lá, não vou detalhar; é ir mexendo e aprendendo.

Exemplo: clicando em Settings, na lateral esquerda do seu painel Vicomi dá pra mudar as palavras dos emoticons, dá pra configurar o compartilhamento via Facebook, etc...
Vá mexendo, se familiarizando... e divirta-se!
Altere como quiser, salve e tá feito!

Créditos:
A imagem que ilustra o começo do tutorial foi editada por mim e é uma cortesia Shutterstock.


Gostou da dica, querido leitor?
Aproveita que tamo aqui e deixe seu comentário, ou curta/compartilhe esse post!
Se você curtir em breve eu publico um tutorial de como instalar emoticons nos comentários do blog...

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

8 comentários , comente também!

  1. Olá, obrigada!! Estava mesmo atrás disso. Beijinhos

    Beijinhos!!

    ♡ Blog Life Enthusiast

    ResponderExcluir
  2. ótimo tutorial! já tinha visto em outro blog mas aqui foi o único que funcionou :3 Parabéns

    ResponderExcluir
  3. Quando eu colo < div class='post-footer' > na caixa de pesquisa ele não acha nada.

    ResponderExcluir
  4. Elaine, ainda estou tentando e como já falei em outros comentários, não acho nem a aba modelo. Queria muito conseguir...
    bjk

    ResponderExcluir
    Respostas
    1. Karine, como respondi antes Modelo e Tema é a mesma coisa.
      Quanto ao trecho que precisa achar tente de novo, todo e qualquer template do Blogger tem, é uma tag de fechamento. Sem ela o template não existiria...

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



Visualizações

Contando...

Dias online
Postagens
comentários