Facebook Ferramenta Rodrigão Pires

Capturando e transmitindo reações Facebook LIVE em tempo real

Reações Facebook LIVE

A nova moda que EXPLODIU na internet com as eleições nos EUA.
como fazer facebook live

Exibir um contador das reações Facebook Live (👍❤😆😢😠) em tempo real!

Já vi até grandes canais de comunicação fazendo com suas audiências…

O poder de engajamento é SURREAL!

Aqui no Brasil, alguns amigos começaram a testar, e resolvi pesquisar para saber se era complexo fazer algo parecido.

Precisei de umas 3 horas, e alguns recurso para replicar o que achei pelas páginas gringas.

Tutorial em português, eu não vi ainda…

Imagino eu, que este seja um dos primeiros. 🙂

O processo é bem simples e vamos replica-lo SOMENTE para uso em fanpages

OK!?

“Rodrigão, pode fazer com transmissões do meu perfil pessoal e grupos?”

SIM! Mas é um pouco mais complexo, e neste post, decidi focar nas fanpages.

O que rola para isso acontecer?

Envolve apenas transmitir uma página dinâmica (podemos criar funcionalidades e teremos interações), exibindo em tempo real as reações da live que você está fazendo dentro do seu facebook.

Expliquei bem?

Isso é uma BOMBA de engajamento!

Único ponto aqui, é que é tudo por sua conta em risco de como vai ser usado!

Agora vamos ao tutorial, mesmo que você não saiba NADA de HTML/CSS/Javascript.

 

Vai precisar:

1- Fanpage.

2- Conexão com a internet (obviamente de qualidade!).

3- Computador.

4- OBS Studio Instalado (atenção, não é a versão Classic)

5- Vontade de fazer.

 

Vídeo para acompanhar o tutorial:

 

1) Capturar e Contabilizar as Reações no Facebook

Graças ao Open Graph, o Facebook permite que você acompanhe as reações em seus posts.

Como eu, sei que você pode não saber nada de programação… então, vai rolar um arquivo zipado com tudo que você precisa para criar uma página dinâmica para transmiti-la na Live do Facebook. 🙂

Download da página dinâmica pronta aqui.

Se você sabe programar, o código limpo aqui.

Salve no seu computador o ZIP, e descompacte o arquivo.

Dentro da pasta descompactada, abra o “index.html” com um editor de texto. (botão direito do mouse > abrir com > bloco de notas).

Saiba que teremos algumas alterações básicas para fazer, e você não precisar saber nada de CSS. 🙂

Ex: mudar a imagem de fundo (background.png).

Texto (localize dentro do “index.html” aberto com bloco de notas o texto “Como Foi Seu Dia?”).

Imagem acima do texto (“logo.png”).

Ambas as imagens “.png”, ficam dentro da pasta descompactada.

Mas se assim você desejar, poderá customizar esse modelo, mas prepare-se, vai precisar lidar com CSS/HTML.

facebook live

 

2) Gerar no seu Facebook o Token de Acesso

Essa etapa é um pouco mais chata de fazer, mas é essencial para gerar seu próprio token de acesso.

Se você já criou um app de facebook, você vai estar mais familiarizado com esse processo.

Não vou fazer um passo a passo aqui, para encurtar o tutorial, mas caso necessite, recomendo seguir esse passo a passo aqui (mesmo sendo inglês, é fácil e objetivo).

Após seguir o passo a passo acima, pegue seu token de acesso do Facebook gerado, e entre com ele no “index.html” que você abriu com bloco de notas exatamente nesse ponto: e localize “TOKEN_DE_ACESSO_AQUI” e substitua pelo “CÓDIGO DO TOKEN GERADO PELO PASSO ACIMA”.

obs live

3) Vamos criar uma LIVE no Facebook

Dentro da fanpage, vá em “Ferramentas de publicação”, depois Biblioteca de vídeos no menu à esquerda, e por último, clique em “Ao Vivo”.

reacoes facebook

 

Copie a Chave de stream conforme demarcado abaixo e clique em avançar.

reacoes live

 

Se você não copiou sua chave stream, copie agora. Aproveite, e entre com um título para a LIVE e o vídeo.

Lembre-se, o título da LIVE, do vídeo e as palavras chaves, serão determinantes para o face entregar sua live até pegar tração.

Palavras fora do contexto da sua fanpage, podem atrair curiosos. O que pode ser bom por um lado, mas ruim por outro. 😉

facebook

 

4) Configurando OBS Studio

Após instalado, abra o programa e vá em configurações > Stream.

Selecione tipo de stream: Serviços de Streaming

Serviço: Facebook Live

Servidor: Default

Chave de Stream: Entre com sua chave copiada na etapa 3

live

 

Clique em aplicar e OK.

Adicione uma fonte no OBS. Clique no “+”> “Browsersource”e Criar novo .

reacoes face

 

Entre com um nome e clique em OK.

capturar reacoes face

 

Marque “local file”, e procure através do localizar, a pasta que você descompactou lá na etapa 1, o arquivo index.html.

Coloque widht 1270 e Height 720 (padrão transmissão face) e clique em OK.

obs studio

 

Você verá uma pré-visualização da sua página. Redimensione para preencher a tela toda, e clique em “Iniciar Transmissão”.

obs studio face

 

5) Transmitir Ao Vivo

Volte para a janela pop-up ao vivo do Facebook no navegador. Depois de alguns segundos, ele deve exibir sua página!

capturar obs studio

 

Publique sua Live no Facebook clicando em “Transmitir ao vivo”.

Agora que está ao vivo, podemos obter o “Post ID” para rastrear todas as reações dos usuários.

Ponto chave!

Há muitas maneiras de obter o ID de um post. A maneira mais fácil é visitar a sua página de Facebook, clique sobre a hora da postagem criada para Live, e veja o link do post para copiar SOMENTE o código final.

Esse número exibido na URL, é o seu post ID.

live obs studio

transmitir facebook

 

Cole este número no arquivo “index.html“. Procure por “POST_ID_AQUI” e substitua por pelo seu “POST ID ACIMA CRIADO”.

obs para transmitir ao vivo

 

Agora volte para o programa OBS. Clique duas vezes sobre sua fonte da página index.html criada.

Uma janela aparecerá. Clique em OK. Ele irá recarregar sua página com atualizações recentes em 5 ~ 7 segundos.

 

Viu como é fácil?

Existem outras centenas maneiras de se fazer, mas essa foi a mais simples que achei sem envolver serviços, plataformas pagas e conhecimento em programação.

Espero que goste. 🙂

Comenta e compartilha o conteúdo. Não guarda com você.

Agora é só montar uma estratégia para suas fanpages e colher os frutos. 

Grupo exclusivo estratégias de marketing: https://www.facebook.com/groups/dmders.

Créditos: Socialwall.

Lista Vip Rodrigão

Sobre o autor | Website

Co-Fundador da empresa Azoli Coaching, Autor do e-book 4 Semanas Para Conquistar Clientes, fundador da agência de marketing dmd e idealizador do projeto Coach na Prática.

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

12 Comentários

  1. Rodrigo Pires disse:

    Oi Alessandra, recomendo você usar o recurso que indiquei na resposta anterior. Esse tutorial ficou defasado. 🙁 Se você entender um pouco de programação, talvez você possa até ainda usa-lo. Abs.

  2. alessandra disse:

    Nao consegui capturar os numeros das reações

  3. Rodrigo Pires disse:

    Olá Alessandra, tudo bem?

    Você terá que conhecer um pouco de programação pois você vai precisar excluir algumas linhas de código.

    Mas posso dar uma sugestão?

    Já tem uns tutoriais que agilizam o processo. Dá uma olhada nesse aqui: https://react.cast.net.au/polls/. Está em inglês (se não souber, use o google translator), mas é bem simples e bem mais fácil que meu método que acabou ficando antigo rapidamente pelo avanço devido as dificuldades envolvidas. Só lembre-se que deve ser feito sobre sua própria conta e que não tenho qualquer vínculo com esse tutorial. 😊

  4. alessandra disse:

    Ola como faço para colocar somente duas reações?

  5. Rodrigão Pires disse:

    Tudo bom Bianca? Então, na parte do OBS, tem o passo de carregar uma imagem. Só que eu carreguei 4. Uma de fundo, e três de bichos em PNG (só os bichos, e sem fundo – você acha isso no Google).

    Mas já tem uns tutoriais que agilizam o processo. Dá uma olhada nesse aqui: https://react.cast.net.au/polls/. Está em inglês, mas é bem simples e bem mais fácil que meu método que acabou ficando antigo rapidamente pelo avanço devido as dificuldades envolvidas. Só lembre-se que deve ser feito sobre sua própria conta e que não tenho qualquer vínculo com esse tutorial. 😊

  6. Bianca Nicole Puntel disse:

    Rodrigo, como faço para usar mais de uma imagem? Por exemplo, esse do cachorro, peixe e gato?

  7. Rodrigão Pires disse:

    Felipe, então só está faltando a parte de capturar as reações da postagem. Veja com atenção essa parte do vídeo como fiz.

  8. Puxa eu também tentei, mina conexão não está muito legal, o video apareceu, mas as reações não

  9. Rodrigão Pires disse:

    Walquiria, é isso mesmo. Deixe somente duas entradas com as reações que deseja. Mesmo que o Face capture, ele não vai exibir.

  10. Walquiria Agostinho disse:

    Olá,primeiramente obrigada por compartilhar seu conhecimento! Tenho uma dúvida, como eu não sei editar em html, se eu quiser criar duas reações, eu apago as outras do index? Desde já, obrigada!

  11. Rodrigão Pires disse:

    Aline, tudo bem? Acabei de subir um vídeo com passo a passo para ajudar. 🙂

  12. aline shiroiwa disse:

    tentei duas vezes e não consegui.