Como colocar o chat do Facebook Messenger no Blogger - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Como colocar o chat do Facebook Messenger no Blogger

Publicado em 19/11/2018

Tempo de leitura:

Como colocar o chat do Facebook Messenger no Blogger
Seu blog tem fanpage? Provavelmente sim, né? Hoje em dia, apesar da queda no alcance das páginas do Facebook, elas ainda são uma boa fonte de divulgação dos posts do blog, além de ajudarem a firmar a "marca" do blog. Não rendem assim tantos acessos, é complicado crescer mas ainda assim a gente vai mantendo...

Sabia que há um widget que você pode adicionar ao seu blog e seu visitante pode, através dele, enviar mensagens privadas para Imbox/Messenger da sua página? E, olha que beleza, sem precisar sair de seu blog!
Assim (clique no ícone azul que aparecerá na lateral inferior direita):

Demonstração do tutorial

Quer aprender como colocar em seu blog? É bem simples, um único passo, um único código.
Vem cá, vou te mostrar!


Como colocar o chat do Facebook/Messenger no blog


Comece acessando a página com o único código que vamos usar e copie-o:


Copiar o código


A seguir vá ao painel de seu blog e clique em Layout.
Aí clique em Adicionar um gadget, e dentre as opções que aparecerem escolha HTML/JAVASCRIPT.
Dentro da caixinha que expandir cole o código que pedi para copiar.
Agora preste muita atenção!

No espaço onde marquei em vermelho e está o nome da minha fanpage você precisa trocar pelo endereço da sua fanpage, ok?
Esse trecho aqui:

<div class="HIH fb-close"></div>  
    <div class="fb-page" data-href="https://www.facebook.com/elainegaspareto/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">    
      <blockquote cite="https://www.facebook.com/elainegaspareto/" class="fb-xfbml-parse-ignore"> </blockquote>  
      </div>  
     
<div id="fb-root">
</div>
</div>
  <a href="https://m.me/elainegaspareto" title="Envie sua mensagem para mim!" class="HIH fb-button"></a>
</div>

Troque elainegaspareto pelo endereço de sua fanpage, isso é essencial!
Faça isso nas 3 vezes que marquei em vermelho.
Salve, arraste o widget para onde desejar (não interfere na exibição) e salve a alteração do Layout.
Se tudo deu certo seu ícone já está aparecendo, exatamente como em meu exemplo que mostrei acima.

Perguntas que podem surgir- dicas extras


Como colocar o chat do Facebook Messenger no Blogger

1- Fiz tudo e não deu certo, o que pode ter havido?
Seu blog pode ter outros widgets que rodem a partir da biblioteca JQuery.
Eu tentei em outros blogs de teste e o caso que notei é exatamente esse, se há outro gadget que usa JQuery pode causar conflito.
Também causa erro se o blog tiver pop up de curtir a página.

2- Quero trocar cores e fontes, tem jeito?
Sim, tem.
Tudo que se refere à aparencia do widget está definido entre as tags <style> e </style> no código.
Cores são precedidas do sinal # e as fontes são nomeadas.
Leia o código, faça testes. Mas do jeito que está eu gosto, mantive as cores originais do Facebook/Messenger.

3- Não posso usar meu perfil, só a fanpage?
Sim, só a fanpage.
A API do Facebook não funciona com perfis.

4- Quero mudar a posição do ícone e do box da mensagem, tem jeito?
Sim, tem. Basta trocar a palavra right por left em todas as ocorrências dela na folha de estilos (a tag <style>----</style>)
Mas eu, particularmente, prefiro como está.

E é isso, querido leitor.
Tentei antever as perguntas e dificuldades que possam surgir, se tiver outras perguntas que o tutorial não tenha esclarecido diga nos comentários e eu respondo assim que possível.
Aproveita que foi tão fácil e compartilhe esse post em suas redes sociais. Me ajuda muito!
Enjoy!
O código original, open source, pertence ao desenvolvedor Labnol







8 comentários via Blogger
comentários via Facebook

8 comentários:

  1. Como sempre vc arrasa!
    Agora eu gostaria de saber se vc tem algum tutorial de como colocar a caixa de cokkies. Assim q entrei no seu blog ela aparece. Quero colocar no meu tbm. Obg

    ResponderExcluir
    Respostas
    1. Lu, tem sim, procure ali na aba Dicas para blogs, na lista dos tutoriais tem. Se não me engano é o post que fala sobre GDPR (to fora de casa, net não abre direito pra achar o link , sorry)
      bjssss

      Excluir
  2. Respostas
    1. Sim, funciona mas o template precisa ser responsivo ou mobile friendly

      Excluir
  3. Ficou legal,gostei.
    Segui sua orientação e coloquei do lado esquerdo.
    Beijos

    ResponderExcluir
  4. Maravilhoso, vou correndo colocar no meu *---*
    Muito Obrigada por atender o meu pedido Elaine, você arrasa <3

    ResponderExcluir

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…