Facebook Messenger复选框插件未呈现[重复]答案

【问题标题】：Facebook messenger checkbox plugin is not rendered [duplicate]Facebook Messenger复选框插件未呈现[重复]
【发布时间】：2017-02-08 20:01:40
【问题描述】：

我正在尝试将 Facebook Messenger Checkbox Plugin 实现到我的 AngularJS 应用程序中。我正在关注本指南https://developers.facebook.com/docs/messenger-platform/plugin-reference/checkbox-plugin。

我设法让它工作。我导航到该页面并显示了我的 Messenger 复选框插件，但是当我导航到另一个页面然后返回到包含 Facebook Checkbox Messenger 插件的此页面时，它不会呈现并且我没有从 Facebook 记录任何内容。

这是我的 FB 初始化过程

$window.fbAsyncInit = function () {
    FB.init({
      appId: 'MY_FACEBOOK_APP_ID',
      xfbml: true,
      version: 'v2.8'
    });
};
(function (d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   var fbElement = d.getElementById(id);
   if (fbElement) {
     return;
   }
   js = d.createElement(s);
   js.id = id;
   js.src = '//connect.facebook.net/en_US/sdk.js';
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

这是我对 facebook messenger 复选框插件的指令

<div 
    class="fb-messenger-checkbox"
    origin="{{origin}}"
    page_id="{{pageId}}"
    messenger_app_id="{{messengerAppId}}"
    user_ref="{{userRef}}"
    prechecked="true"
    allow_login="true"
    size="xlarge">
</div>

就像我说的，当我第一次导航到页面时一切正常（然后呈现 Facebook Checkbox Messenger 插件）。之后，当我导航到另一个页面并返回时，插件不再显示。没有任何错误，而且我每次都会重新计算 user_ref 参数为随机字符串。

在我看来，当我导航回该页面时（即使我不再 FB.init）调用了一次 FB.init 时，出现了问题。

有谁知道可能是什么问题？

【问题讨论】：

标签： javascript jquery angularjs facebook facebook-messenger

【解决方案1】：

确保您在每次页面呈现时生成唯一的 user_ref。如果给出相同的 user_ref 则复选框将不会呈现

【讨论】：

【解决方案2】：

首先，您需要在 fb 上将您的域列入白名单/注册。

【讨论】：

是的，我将域列入白名单。我认为 facebook 应用程序设置没问题，因为就像我说的 facebook messenger 复选框插件实际上正在工作，但只是我第一次导航到包含它的页面。当我导航第二/第三/等时间时，它只呈现我提供的 html，但似乎没有触发 facebook 脚本，并且它没有在我提供的 html 中呈现 iframe。
公开曝光了吗？网址是什么？

【解决方案3】：

我遇到了同样的问题，你需要在你的 javascript 代码中使用：

FB.XFBML.parse(document.getElementById('fb-messenger_checkbox'));（如果您像我一样使用 angular-easyFb，请使用 ezfb 而不是 FB）

您也可以在使用应用程序时在控制台中尝试它，如果您做的一切正确，它也会呈现插件：

将您的域列入白名单
随机化用户引用（例如$scope.userRef = Math.floor((Math.random() * 10000000000000) + 1);）

PS : 如果你使用 angular-easyfb，你不需要加载任何 $window.fbAsyncInit，ezfb 为你做

【讨论】：

为什么要随机化用户参考？这会导致 FB 插件无法渲染吗？
是的。正如文档中所说，每次要渲染插件时，都需要有不同的 user_ref。这就是为什么你应该随机化这个变量。

【解决方案4】：

请务必查看所有这些故障排除提示

验证您的机器人实际上已获得 pages_messaging 权限。
验证您的页面是否有对您的机器人的 webhook 订阅。
如果您看到控制台错误，例如“拒绝在框架中显示 *，因为祖先违反了以下内容安全策略指令：*”，请检查该插件所在页面的域呈现在已被列入白名单。
如果 allow_login 参数设置为 false，则您需要有一个有效的 Facebook 用户会话（即未登录），否则插件将被隐藏。

这些来自 Facebook https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin

特别注意数字 2 验证您的页面是否已订阅您的机器人的 webhook。您可以使用此页面https://developers.facebook.com/docs/messenger-platform/getting-started/app-setup 了解如何将您的页面订阅到您的机器人。

【讨论】：

【解决方案5】：

试试这个步骤：

将<div id="fb-root"></div> 移动到索引页面，因为在加载 Facebook sdk 时，他会向 fb-root 添加一些逻辑。
在响应带有插件的页面的控制器中将此代码添加到 $onInit 方法：if (window.FB) { window.FB.XFBML.parse(); }

所以，问题是当您转到另一个页面时，带有某些逻辑的 fb-root 被破坏并且 FB.XFBML 不再工作。

【讨论】：