Question

我正在尝试将Facebook Messenger Checkbox插件应用到我的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），有些事情是错误的。

有谁知道什么是问题？

Answer 1

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

Answer 2

首先，您需要使用fb。

将您的域列入白名单/注册

Answer 3

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

FB.XFBML.parse(document.getElementById('fb-messenger_checkbox'));（如果你像我一样使用angular-easyFb，则使用ezfb代替FB）

你也可以在你的应用程序中在控制台中尝试它，如果你做了其他正确的事情，它也会渲染插件：

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

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

Answer 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了解如何将您的页面订阅到您的机器人。

Answer 5

尝试以下步骤：

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

因此，问题是当您转到具有某些逻辑的fb根目录的另一页时，FB.XFBML不再起作用。

Facebook messenger复选框插件未呈现

5 个答案: