Colocar Ícones de Reações estilo Facebook no Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

O Facebook lançou um novo estilo de interação com o conteúdo que vai além do simples “Like” (Curtir), adicionando os ícones de Reações. Agora você pode colocar isso em seu Blog no Blogger (BlogSpot), deixando a interação com seu público e a avaliação do conteúdo ainda mais interessante e interativa.

Já ensinei como fazer isso no WordPress.ORG de forma bem fácil com um plugin. Agora vou mostrar como adicionar esse estilo de ícones e avaliação do conteúdo do Blog, para quem tem Blog no Blogger.

Não funciona exatamente como o clique no “Like”, mas já deixa as opções visíveis para o visitante no rodapé da postagem, incentivando a reação do público. Ficará bem parecido com a imagem abaixo, mas tem outras opções, cores e formatos, incluindo ícones diferentes ou mesmo apenas o texto da reação.

ATENÇÃO: Antes de proceder com qualquer alteração no seu Blog, faça backup.

Esse recurso é disponibilizado gratuitamente pelo Vicomi – http://www.vicomi.com/

Para começar é preciso registrar seu blog, criando uma conta. Nessa etapa ainda é possível escolher o idioma (que tem a opção do Português). Depois de preencher o formulário, clique no botão “Proceed to Step 2”.

Na próxima etapa você vai escolher o estilo desejado. Neste exemplo eu escolhi o primeiro estilo de ícones mais parecido com o Facebook:

Role a página até o final e clique no botão “Done” para seguir à terceira e última etapa. Você será levado até a página que tem o código HTML para inserir no código fonte do seu Blog, bem parecido com o que se vê na imagem abaixo:

Copie essas linhas de código sem alterar NADA.

Abra o painel de controle do seu Blog no Blogger, clique no menu “Modelo” e depois no botão “Editar HTML” que fica abaixo do quadro com o exemplo do seu Template. Isso vai abrir o código fonte do seu template.

Agora vem a parte difícil que é encontrar o código que representa o rodapé de todos os artigos do seu Blog. Clique numa área branca do editor e pressione CTRL+F para fazer uma busca pelas linhas de código. Você deverá procurar por:

<data:post.body/>

 

Cole o código do Vicomi imediatamente abaixo dessa linha, sem alterar nada. E por fim salve as alterações do modelo para aplicar a mudança.

Depois de salvo, vá até um artigo do seu blog para ver o recurso funcionando.

A melhor parte é que você pode usar sua conta do Vicomi para acompanhar as estatísticas de interações nos artigos do seu Blog e ver o desempenho de todo conteúdo que você produzir.

.

29 Comentários

    • Consegui, mas não foi nessa n, funcionou acima dos codigos de share do meu template, se alguém tbm tiver problemas procure por share e cole acima

      Responder

  1. Adorei, demorou mas consegui por. Quem não tiver conseguindo… acaso o seu blog tenha aquela área de compartilhar a postagem em outras redes sociais, tente colocar embaixo dela… Comigo foi o único jeito pra dar certo. Só não consegui mexer direito nas estatistificas lá, parece não ter uma área com todas as postagens que tiveram reações, achei meio confuso

    Responder

  2. Tudo muito lindo, mas no texto só faltou dizer que a oferta é temporária. Depois, só pagando. Significa que este post só faz sentido se o Ferramentas Blog recebeu pela publicação. Se não recebeu, é publicidade gratuita, o que também não faz sentido. Abraço.

    Responder

    • Armindo,
      A aplicação é totalmente gratuita. Apenas se você quiser acesso a mais recurso, como análise dos cliques, é que você precisa contratar um plano.
      Veja a tabela deles para entender: http://www.vicomi.com/#/pricing
      Há sim, uma versão gratuita.

      Publiquei este tutorial sem ser pago para tal. Quando meus conteúdos são patrocinados, eles ficam marcados como “Publieditorial”. Sou totalmente transparente com meu público.

      Responder

      • Amigo Marcos, o que aconteceu foi que de o código deixou de ser funcionar a partir do momento em que deixei de ter direito aos extras e por isso retirei o código do HTML. Agora, depois de ler a sua resposta ao meu comentário, voltei a repor o código e já funciona. Peço desculpa e agradeço a sua atenção. Abraço.

        Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.