时间戳

首页 > 解决方案 > Facebook Messenger 客户聊天未显示

facebook - Facebook Messenger 客户聊天未显示

问题描述

我正在尝试在我的网站中包含 Facebook Messenger 客户聊天插件，但该插件未显示。几天前它工作正常，但突然停止工作。

我收到两种类型的错误：

1- 当我没有登录 facebook 时，我在控制台中收到此错误：

无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“ https://www.facebook.com ”）与收件人窗口的来源（“ https://web.facebook.com ” ）不匹配。

我在控制台中使用了 FB.CustomerChat.show() ，出现了对话框，但错误重复出现，并且没有显示气泡。

2- 当我登录到 facebook 时，我没有收到任何错误，并且插件仍然没有出现。我在控制台中使用了 FB.CustomerChat.show() ，出现了对话框，但没有显示气泡，但这次在气泡的 iframe 中显示了一个错误链接：

此插件需要使用 Javascript SDK 和 XFBML

我尝试更改 sdk 的版本，更改 facebook 应用程序 (developers.facebook.com) 中的设置，将我的 facebook 页面中的域列入白名单，尝试在 sdk 的 url 之后添加 #xfbml=1&version=v2.12&autoLogAppEvents=1 .. 一点运气都没有。

      window.fbAsyncInit = function () {
        FB.init({
          appId: app_id,
          autoLogAppEvents: true,
          xfbml: true,
          version: 'v2.12'
        });
      };

      (function (d, s, id) {
        var js;
        var fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/'+localization+'/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

标签： facebookfacebook-customer-chat

解决方案

要解决方法将此添加到响应标头：

X-Frame-Options: allow-from *

或者

X-Frame-Options: allow-from https://www.facebook.com https://web.facebook.com

推荐阅读