Instalando o chat do Messenger no seu site ou blog

(19) 99106-5974
comercial@brasilwebhost.com.br

Instalando o chat do...

Home / Dicas/Instalando o chat do Messenger no seu site ou blog

15jan, 2018

8Comentários

Categoria / Dicas Tags:chat, messenger por Gabriel Benato

Recentemente o Facebook disponibilizou o Bate-bapo do Messenger, no qual possibilita o uso em seu site ou blog transformando um contato mais próximo com seus clientes e parceiros. Se você gostou desta ideia, então não deixe de conferir nosso tutorial de como instalar ele. Vamos lá.

Passo 1 – Para colocar o chat do Messenger em seu site primeiro teremos que saber o ID de sua página no Facebook.
Para isso abra sua página do Facebook >> Clique no item Sobre >> Localize o ID como mostrado abaixo:

Passo 2 – Você deve adicionar o seu domínio que irá ter o chat a lista branca de autorizado em sua página no Facebook. Para isso novamente esteja em sua página >> Clique em Configurações (canto superior direito) >> Plataforma do Messenger >> Adicione seu domínio na lista como mostrado abaixo:

Passo 3 – O próximo passo é criar um app Facebook, para isso vá até o developer.facebook.com se não tiver uma conta será necessário se registrar e aceitar os termos do Facebook. Depois clique em Adicionar um novo aplicativo >> Dê um nome ao app, coloque o e-mail e clique em Criar um número de identificação do aplicativo.

Após criar, na página do App. No canto superior esquerdo terá um ID, é o numero do App que acabamos de criar, pegue este ID e anote-o.

Passo 4 – Vamos editar o código do chat Messenger com as devidas informações com o seguinte:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'YOUR-APP-ID',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
 
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
 
  jQuery('body').append('<div class="fb-customerchat" page_id="YOUR-PAGE-ID" minimized="false"> </div>');
 
</script>

window.fbAsyncInit = function() {

FB.init({

appId : 'YOUR-APP-ID',

autoLogAppEvents : true,

xfbml : true,

version : 'v2.11'

});

};

(function(d, s, id){

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

js.src = "https://connect.facebook.net/en_US/sdk.js";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

jQuery('body').append('<div class="fb-customerchat" page_id="YOUR-PAGE-ID" minimized="false"> </div>');

</script>

Localize a linha 4 e mude o YOUR-APP-ID pelo ID que anotou no passo 3

Localize a linha 15 e mude onde está en_US coloque a nossa linguagem padrão pt_BR

Localize a linha 19 e coloque no lugar de YOUR-PAGE-ID pelo numero ID da sua pagina que fizemos lá no passo 1, ainda na linha 19 é opcional se desejar que o chat inicie aberto mude onde está: false para true

Passo 5 – Coloque o código HTML no site ou blog, aconselhamos o uso do Google Tag Manager para isso, você poderá criar um nova etiqueta HTML personalizada >> depois colar o código >> Selecionar o acionar como ALL (se quiser em todas as páginas) >> Clique em Guardar e Publicar.

Caso queira seguir a documentação do Chat Messenger, não deixe de ver o seguinte link: Facebook Delevopers

Pronto, seu chat foi instalado com sucesso. Até a próxima e esperamos que este tutorial tenha sido util, caso tenha gostado compartilhe com seus amigos.

Existem 8 Comentários

Osvaldo Schaukoski Junior

17 jan, 2018

Acho que o seu código está quebrado, as aspas e aspas duplas não são as corretas para código.
- Caio Zanzarini
  
  18 jan, 2018
  
  Agradecemos pela informação, o erro estava no bloco de código que o tema do WordPress formatou, inserirmos agora em formato código.
Osvaldo Schaukoski Junior

17 jan, 2018

Consegui habilitar no meu site http://www.schauk.com

Obrigado!
Tárcio Leal

16 mar, 2018

Boa tarde!

Segui os seus passos, realizei pelo tagmanager, publiquei, porem não obtive sucesso
O que pode ter acontecido?

http://www.lefs.com.br
- Caio Zanzarini
  
  17 mar, 2018
  
  Olá Tárcio, acessamos seu site e conseguimos ver o uso do chat normalmente.
ISRAEL VILLA VERDE

23 ago, 2018

Fiz todos os passos e não aparece o botão.
http://www.itaperuna.guiadasuacidade.com.br/
ISRAEL VILLA VERDE

23 ago, 2018

Fiz o passo a passo e não deu certo.
Site no blogger:
http://www.itaperuna.guiadasuacidade.com.br/
- Caio Zanzarini
  
  23 ago, 2018
  
  Nós utilizamos este código com sucesso em nosso website https://www.brasilwebhost.com.br. Veja se todas as etapas foram realizadas com sucesso, incluindo todas as variações de domínios, exemplo com WWW, sem WWW, com HTTPS, sem HTTPS, etc.
  Persistindo o erro, veja a documentação: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin

Comentar Cancelar resposta

Precisa de um plano de hospedagem para seu site?

Entre em contato conosco!