Como Criar um Widget de Reações para Blogger (Com Porcentagem em Tempo Real)

Sabe qual é a maior frustração de quem cria conteúdo na internet hoje? É o silêncio. Você passa horas pesquisando, escrevendo e formatando um artigo incrível. Centenas de pessoas acessam, leem até o final, mas vão embora sem deixar um único comentário. Como saber se eles realmente gostaram? Como medir a temperatura da sua audiência?

Grandes portais de notícias resolveram isso com uma sacada genial: os botões de reações emocionais. Com apenas um clique, o leitor deixa o seu feedback (😄, 😍, 😡), sem precisar digitar uma palavra. O problema é que, no ecossistema do Blogger, as soluções que existem para isso (como plugins de terceiros) são pesadas, atrasam o carregamento da página e, pior, exibem propagandas no seu site.

Eu cansei de depender de ferramentas externas que prejudicam o meu PageSpeed e o meu Google AdSense. Por isso, abri o meu editor de código e desenvolvi uma tecnologia exclusiva. Neste artigo, vou te entregar o meu widget de reações para Blogger. Um sistema premium, leve, conectado ao banco de dados do Google (Firebase) para atualizar os votos em tempo real, exatamente como os sites gigantes fazem.

O Poder Oculto: Por que esse Widget vai mudar o jogo do seu Blog?

Se você escreve artigos para a internet, precisa aceitar uma verdade dura: o leitor moderno tem preguiça. Ele pode amar o seu conteúdo, ler cada palavra e até favoritar a sua página, mas as chances dele descer até a área de comentários, digitar o nome, e-mail e escrever um elogio são quase zero.

Isso cria o que eu chamo de "Síndrome do Blogueiro Cego". Você publica artigos incríveis, vê o número de acessos subindo no Google Analytics, mas não tem a menor ideia de como as pessoas estão se sentindo ao ler aquilo. Elas amaram? Acharam engraçado? Ficaram frustradas porque faltou algo?

É exatamente aqui que este sistema de reações entra como um divisor de águas na vida do seu projeto. Ao instalar esse código, você ativa três gatilhos poderosos simultaneamente:

• 1. A Psicologia do Micro-Engajamento: Clicar em um emoji leva menos de um segundo. É intuitivo, viciante e não exige esforço nenhum. Você transforma um leitor fantasma (que apenas lê e vai embora) em um usuário ativo. O cérebro humano adora deixar uma "marca" por onde passa, e os emojis suprem essa necessidade perfeitamente.
• 2. O Fim do "Achismo" (Criação Baseada em Dados): Pare de adivinhar o que a sua audiência quer. Se um post sobre "Dicas de Finanças" recebe 80 reações de "😍 (Amor)" e o seu post sobre "Notícias do Dia" recebe reações de "😞 (Triste)", o seu próprio público está te entregando um mapa do tesouro. Você passa a criar apenas o conteúdo que gera retenção.
• 3. Impacto Direto no SEO e no Google AdSense: O algoritmo do Google avalia o tempo que o usuário passa na sua página. Quando o leitor chega ao final do texto e para para ler os emojis, ver as porcentagens e clicar em um deles, você ganha segundos preciosos de "Tempo de Tela". Isso reduz a sua Taxa de Rejeição (Bounce Rate). Para quem monetiza com AdSense, mais tempo na página significa mais anúncios visualizados, o que impacta diretamente no seu RPM (Ganhos a cada mil visitas).

Resumindo: Você não está apenas colocando "carinhas bonitinhas" no final do seu post. Você está instalando uma ferramenta profissional de análise de sentimento e retenção de tráfego.

Por que as reações aparecem apenas dentro dos posts?

Uma dúvida muito comum que recebo quando lanço ferramentas desse tipo é: "Júnnior, eu posso colocar essa barra de reações na minha página inicial para os leitores votarem direto de lá?"

A resposta direta é: O meu script foi programado de propósito para não aparecer na página inicial. E existem dois motivos técnicos fortíssimos para essa decisão:

• 1. Experiência do Usuário (UX): O objetivo de uma reação é medir a satisfação do leitor após ele consumir o seu conteúdo. Não faz sentido o usuário votar se ele leu apenas o título e o resumo na sua página inicial. A votação precisa acontecer no final do texto completo.
• 2. Performance e PageSpeed: Imagine a sua página inicial carregando 10 resumos de artigos. Se o nosso script carregasse 10 painéis de reações e fizesse 10 conexões simultâneas com o banco de dados do Google Firebase, o seu blog ficaria extremamente lento. O Google puniria o seu ranqueamento e o seu RPM do AdSense cairia.

É por isso que a inteligência do "Teleporte" que programei é tão vital. Quando o leitor acessa a sua Home, o código "dorme" e não pesa um único byte. Quando ele entra em um post específico, o código "acorda", carrega os dados e se posiciona perfeitamente no rodapé da leitura. Isso é código limpo e inteligente.

Por que usar o Google Firebase no Blogger?

Antes de irmos para a prática, preciso te explicar o motor por trás dessa Ferrari. O Blogger não possui um banco de dados global nativo onde você possa salvar um contador de "likes". Ele salva comentários, mas não reações isoladas.

Para que o voto de um leitor em São Paulo preencha a barrinha azul de porcentagem na tela de um leitor que está em Portugal ao mesmo tempo, nós precisamos de uma "nuvem". É aí que entra o Google Firebase. É a plataforma de banco de dados em tempo real oficial do Google. É gratuita, blindada em segurança e extremamente rápida, o que garante que o seu SEO fique intacto e totalmente otimizado para as regras do AdSense.

Passo 1: Criando o seu Banco de Dados Gratuito

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Para que as suas reações funcionem, você precisa criar a sua própria "caixa forte" no Google. É super rápido:

1. Acesse o Console do Firebase e faça login com a mesma conta Google do seu blog.
2. Clique em "Criar um projeto" (dê o nome de ReacoesBlog, por exemplo).
3. No painel esquerdo, clique em Criação > Firestore Database.
4. Clique em Criar banco de dados. Na tela de segurança que aparecer, escolha Iniciar no modo de teste (isso é vital para o seu blog conseguir gravar os cliques). Avance e clique em Ativar.
5. Agora, volte à tela inicial do seu projeto no Firebase e clique no ícone </> (Web) para registrar o seu aplicativo.
6. Ele vai te gerar um bloco de código chamado firebaseConfig. Guarde ele, pois você vai precisar da sua apiKey, projectId e outras chaves no próximo passo.

O resultado no final dos seus artigos será exatamente este:

Passo 2: Instalando o Gadget Monzart (Sem XML)

Agora vem a parte fácil. Você vai pegar o meu código exclusivo, inserir as chaves que você acabou de gerar no Firebase e colar no seu blog.

• Vá no painel do seu Blogger e clique em Layout.
• Na barra lateral (Sidebar) ou no Rodapé, clique em Adicionar um Gadget.
• Escolha HTML/JavaScript (deixe o título em branco).
• Copie o código abaixo, cole lá dentro e substitua as informações onde diz SUA_API_KEY_AQUI pelas chaves do seu Firebase. Salve e pronto!

    Copiar Código
<!-- 
======================================================================
🚀 WIDGET EXCLUSIVO: REAÇÕES EM TEMPO REAL (FIREBASE) V3.1
👨‍💻 Desenvolvido por: Júnnior | Monzart Tutoriais
🔗 Portal Oficial: https://www.monzart.com.br
⚠️ Propriedade Intelectual. Por favor, mantenha os créditos.
====================================================================== 
-->
<style>
  #ms-reaction-master { display: none; font-family: -apple-system, sans-serif; max-width: 600px; margin: 40px auto 10px auto; padding: 20px 0; border-top: 1px solid #e2e8f0; clear: both; }
  .ms-reactions-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; font-size: 13px; color: #64748b; }
  .ms-reactions-header strong { color: #5a33aa; letter-spacing: 0.5px; }
  .ms-emojis-container { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .ms-emoji-col { display: flex; flex-direction: column; align-items: center; width: 18%; cursor: pointer; transition: transform 0.2s ease; }
  .ms-emoji-col:hover { transform: translateY(-5px); }
  .ms-emoji-icon { font-size: 45px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); transition: transform 0.2s; }
  .ms-emoji-col:active .ms-emoji-icon { transform: scale(0.9); }
  .ms-emoji-label { font-size: 12px; color: #475569; margin-bottom: 8px; }
  .ms-bar-bg { width: 100%; height: 18px; background-color: #f1f5f9; border-radius: 10px; overflow: hidden; position: relative; }
  .ms-bar-fill { height: 100%; background-color: #3b82f6; width: 0%; border-radius: 10px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; }
  .ms-bar-text { position: absolute; width: 100%; text-align: center; font-size: 11px; font-weight: bold; color: #ffffff; line-height: 18px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
  .ms-bar-text.dark { color: #475569; text-shadow: none; }
  #ms-thanks-msg { display: none; text-align: center; margin-top: 20px; padding: 12px; background-color: #ecfdf5; color: #047857; border-radius: 6px; font-size: 13px; font-weight: 600; border: 1px solid #a7f3d0; animation: fadeIn 0.5s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
</style>

<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore-compat.js"></script>

<div id="ms-reaction-master">
  <div class="ms-reactions-header"><span>O que você achou deste conteúdo?</span><span>Powered by <strong>MONZART</strong></span></div>
  <div class="ms-emojis-container" id="ms-reactions-board">
    <div class="ms-emoji-col" onclick="msRegistrarVoto('feliz')" aria-label="Reação feliz"><div class="ms-emoji-icon">😄</div><div class="ms-emoji-label">feliz</div><div class="ms-bar-bg"><div class="ms-bar-fill" id="fill-feliz"><span class="ms-bar-text dark" id="pct-feliz">0</span></div></div></div>
    <div class="ms-emoji-col" onclick="msRegistrarVoto('amor')" aria-label="Reação amor"><div class="ms-emoji-icon">😍</div><div class="ms-emoji-label">amor</div><div class="ms-bar-bg"><div class="ms-bar-fill" id="fill-amor"><span class="ms-bar-text dark" id="pct-amor">0</span></div></div></div>
    <div class="ms-emoji-col" onclick="msRegistrarVoto('animado')" aria-label="Reação animado"><div class="ms-emoji-icon">😂</div><div class="ms-emoji-label">animado</div><div class="ms-bar-bg"><div class="ms-bar-fill" id="fill-animado"><span class="ms-bar-text dark" id="pct-animado">0</span></div></div></div>
    <div class="ms-emoji-col" onclick="msRegistrarVoto('triste')" aria-label="Reação triste"><div class="ms-emoji-icon">😞</div><div class="ms-emoji-label">triste</div><div class="ms-bar-bg"><div class="ms-bar-fill" id="fill-triste"><span class="ms-bar-text dark" id="pct-triste">0</span></div></div></div>
    <div class="ms-emoji-col" onclick="msRegistrarVoto('irritado')" aria-label="Reação irritado"><div class="ms-emoji-icon">😡</div><div class="ms-emoji-label">irritado</div><div class="ms-bar-bg"><div class="ms-bar-fill" id="fill-irritado"><span class="ms-bar-text dark" id="pct-irritado">0</span></div></div></div>
  </div>
  <div id="ms-thanks-msg"></div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Sensor mais seguro que não depende de .html na URL
    const postBody = document.querySelector('.post-body') || document.querySelector('.entry-content');
    const widget = document.getElementById('ms-reaction-master');
    
    if (postBody && widget) {
      postBody.appendChild(widget);
      widget.style.display = 'block';

      // ⚠️ ATENÇÃO: COLOQUE SUAS CHAVES DO FIREBASE ABAIXO
      const firebaseConfig = {
        apiKey: "SUA_API_KEY_AQUI",
        authDomain: "SEU_AUTH_DOMAIN_AQUI",
        projectId: "SEU_PROJECT_ID_AQUI",
        storageBucket: "SEU_STORAGE_BUCKET_AQUI",
        messagingSenderId: "SEU_MESSAGING_SENDER_ID_AQUI",
        appId: "SEU_APP_ID_AQUI"
      };
      
      if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); }
      const db = firebase.firestore();

      let rawPath = window.location.pathname;
      let safePostId = rawPath.replace(/[^a-zA-Z0-9]/g, "_");
      
      const docRef = db.collection('monzart_reactions').doc(safePostId);
      const defaultVotos = { feliz: 0, amor: 0, animado: 0, triste: 0, irritado: 0 };
      let votosAtuais = { ...defaultVotos };

      docRef.onSnapshot((doc) => {
        if (doc.exists) { votosAtuais = { ...defaultVotos, ...doc.data() }; }
        msAtualizarBarras();
      });

      window.msRegistrarVoto = function(emocao) {
        const thanksMsg = document.getElementById('ms-thanks-msg');
        if(localStorage.getItem('ms_voted_' + safePostId)) {
          thanksMsg.innerText = "Você já deixou sua reação neste post. Muito obrigado! 💙";
          thanksMsg.style.display = 'block';
          return;
        }

        docRef.set({
          feliz: firebase.firestore.FieldValue.increment(emocao === 'feliz' ? 1 : 0),
          amor: firebase.firestore.FieldValue.increment(emocao === 'amor' ? 1 : 0),
          animado: firebase.firestore.FieldValue.increment(emocao === 'animado' ? 1 : 0),
          triste: firebase.firestore.FieldValue.increment(emocao === 'triste' ? 1 : 0),
          irritado: firebase.firestore.FieldValue.increment(emocao === 'irritado' ? 1 : 0)
        }, { merge: true }).then(() => {
          localStorage.setItem('ms_voted_' + safePostId, 'true');
          thanksMsg.innerText = "🎉 Obrigado pelo seu feedback! Sua opinião ajuda muito.";
          thanksMsg.style.display = 'block';
        });
      };

      function msAtualizarBarras() {
        let totalVotos = Object.values(votosAtuais).reduce((a, b) => a + b, 0);
        for (let emocao in defaultVotos) {
          let quantidadeExata = votosAtuais[emocao];
          let porcentagemBarra = totalVotos === 0 ? 0 : Math.round((quantidadeExata / totalVotos) * 100);
          let fillElement = document.getElementById('fill-' + emocao);
          let textElement = document.getElementById('pct-' + emocao);
          fillElement.style.width = porcentagemBarra + '%';
          textElement.innerText = quantidadeExata;
          if(porcentagemBarra > 20) { textElement.classList.remove('dark'); } 
          else { textElement.classList.add('dark'); }
        }
      }
    }
  });
</script>

Bônus: Como mudar a cor da barrinha para combinar com o seu Blog

Por padrão, o código que eu te entreguei preenche as barras de porcentagem na cor Azul. Mas como eu sei que você gosta de deixar tudo com a cara da sua marca, alterar isso é a coisa mais fácil do mundo.

Dentro do código do Passo 2, logo no comecinho (na área de <style>), procure por esta linha de CSS:

.ms-bar-fill { height: 100%; background-color: #3b82f6; ... }

Tudo o que você precisa fazer é apagar o código #3b82f6 e colocar o código HEX da cor do seu blog (ex: #ff0000 para vermelho, #00ff00 para verde, etc). Salve o Gadget e pronto! O widget agora tem o DNA da sua marca.

Dúvidas Frequentes (FAQ)

1. O usuário pode votar várias vezes e burlar o sistema?

Não. Eu programei uma trava baseada no armazenamento local (localStorage) do navegador. Assim que ele vota, o script agradece. Se ele tentar votar de novo, o sistema avisa amigavelmente que o voto já foi computado, mantendo as suas estatísticas reais e honestas.

2. O script vai aparecer na minha página inicial?

Negativo. Este código tem um sensor embutido que detecta a URL. Ele nasce 100% invisível e só "desperta" e se teletransporta para a tela quando o leitor entra dentro do conteúdo de um artigo específico.

3. O Widget funciona em celulares (Mobile)?

Com certeza. O layout foi construído com Flexbox e é totalmente responsivo. Em telas menores, os emojis se agrupam perfeitamente sem criar barra de rolagem horizontal indesejada.

O Que Acho

Ter o controle das métricas do seu blog sem depender de plugins pesados de terceiros é o que separa um blog amador de um portal profissional. Com esse widget de reações exclusivo, você vai transformar leitores passivos em uma comunidade engajada e ter um mapa exato do que a sua audiência ama ler.

Gostou dessa tecnologia? E se você tiver dúvidas na hora de instalar, deixe um comentário. Faço questão de ajudar.

Escrito por

Júnnior MonZart

Desenvolvedor web, criador de conteúdo e fundador do MonZart.com.br. Minha missão é simplificar o marketing digital e ajudar você a monetizar seus projetos na internet.

Ver Perfil Completo →

Compartilhe este post: