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:

<div class='post-footer'>

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:

<b:if cond='data:blog.pageType == "item"'>

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