- (19) 99106-5974
- [email protected]
15jan, 2018
15Comentários
Instalando o chat do Messenger no seu site ou blog
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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/pt_BR/sdk/xfbml.customerchat.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 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, ou poderá insera este código edite o código antes da tag </body> de seu website.
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 15 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
Diego
10 fev, 2019
Pelo que sei não está mais funcionando esses códigos, pois tentei muitos e os que estavam funcionando parou todos. Está funcionando ainda isso?
Caio Zanzarini
10 fev, 2019
Sim esta funcionando!
Houve alterações na API do Facebook, mas o código acima já foi atualizado. Nosso site utiliza-se deste mesmo código.
Fabio Silva
15 fev, 2019
como colocar messenger do facebook no blogger?
Fabian
11 jun, 2019
OLá, me perdi no PASSO 4….pois não esta nao explicado onde e como abro este codigo do messenger para fazer as alterações….parei no PASSO 3 anotando o numero gerado e agora, o que devo fazer?
Caio Zanzarini
20 jun, 2019
É preciso pegar o código gerado como no exemplo https://prnt.sc/o4e82l
Com o ID em mãos, edite o código fonte de seu site inserindo os códigos antes da tag alterando este código pelos IDs obtidos no passo 1 e 3. YOUR-APP-ID e YOUR-PAGE-ID
Maik
29 jul, 2019
Gostaria de deixar o ícone do messenger no lado esquerdo em minha pagina
Gabriel Benato
05 set, 2019
Bom dia Maik,
Na documentação do próprio Facebook não oferecer opção de mudar a posição como segue um trecho “Posicionamento recomendado
Recomendamos não alterar a posição padrão do plugin de bate-papo com o cliente no canto inferior direito da sua página.” O senhor pode estar verificando a mudança junto a seu desenvolvedor com a ajuda de plugins JS.
Segue o link da documentação direto do Facebook https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin