Facebook Messenger 客户聊天未显示

Question

我试图在我的网站中包含 Facebook Messenger 客户聊天插件，但该插件未显示。几天前还好好的，突然就不行了

我遇到两种类型的错误：

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

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.facebook.com') does not match the recipient window's origin ('https://web.facebook.com').

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

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

this plugin requires the use of the Javascript SDK and 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'));

Answer 1

将 Facebook JS SDK 的版本更改为 v3.3 并确保 Facebook SDK 和 Facebook MCC SDK 都在 body 标签解决问题后加载。

更新： Facebook JS SDK 中有一个 bug 导致了这个问题，您可以在此处跟踪问题： https://developers.facebook.com/support/bugs/470869643489449/

Answer 2

要解决此问题，请将其添加到响应中 header：

X-Frame-Options: allow-from *

或

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

Facebook Messenger 客户聊天未显示

Facebook Messenger Customer Chat not showing

facebook

facebook-customer-chat