Facebook Messenger 复选框插件被隐藏答案

【问题标题】：Facebook messenger checkbox plugin is hiddenFacebook Messenger 复选框插件被隐藏
【发布时间】：2025-11-26 16:35:01
【问题描述】：

我正在尝试在表单中实现新的 Facebook Checkbox 插件，但以一种奇怪的方式，我无法让它在屏幕上显示。所以我不会在客户端收到错误，但 iframe 是隐藏的。

这是代码的简化示例：

<html>
<head>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : '1815704925309469',
            xfbml      : true,
            version    : 'v2.6'
        });

        FB.Event.subscribe('messenger_checkbox', function(e) {
            console.log("messenger_checkbox event");
            console.log(e);

            if (e.event == 'rendered') {
                console.log("Plugin was rendered");
            } else if (e.event == 'checkbox') {
                var checkboxState = e.state;
                console.log("Checkbox state: " + checkboxState);
            } else if (e.event == 'not_you') {
                console.log("User clicked 'not you'");
            } else if (e.event == 'hidden') {
                console.log("Plugin was hidden");
            }
        });
    };

    (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 = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk')
    );

    function confirmOptIn() {
        FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, {
            'app_id':'1815704925309469',
            'page_id':'1711063052543482',
            'ref':'shopping-cart-company',
            'user_ref':'1234'
        });
    }
</script>      

<div class="col-md-7">
    <div class="fb-messenger-checkbox"  
        origin=https://shopping-cart-company.herokuapp.com/index.html
        page_id=1711063052543482
        messenger_app_id=1815704925309469
        user_ref="1234" 
        prechecked="true" 
        allow_login="true" 
        size="large">
    </div>   
</div>

<body>
    <input type="button" onclick="confirmOptIn()" value="Confirm Opt-in"/>
</body>

开发控制台中没有错误。仅记录插件被隐藏：

【问题讨论】：

您是否查看过浏览器的开发者控制台？它说什么？
开发控制台中没有错误。我在帖子中添加了状态日志的屏幕截图
我发现对我造成问题的一件事是父 div 隐藏在我的案例中，这导致它们将容器宽度设为 0px。将相同的按钮移动到我的 5 页向导的第一部分修复了它。确保您的 div 可见且宽度 > 0px。

标签： javascript jquery html facebook messenger

【解决方案1】：

Facebook 更新了他们的docs：

网络插件采用user_ref 参数，用作用户的标识符。当用户完成流程时，我们会将这个标识符传回给您以识别用户。这个参数应该是唯一的，不仅对于每个用户，而且对于每次渲染插件时都是唯一的。如果参数不是唯一的，那么插件可能不会渲染。

您必须为复选框插件的每次渲染生成一个新的user_ref。

Checklist 显示 CheckBox 插件

~~使用生产应用 ID（不是测试应用 ID）~~
总是重新生成user_ref
将origin中的域列入白名单
在origin - http / https中使用正确的协议

【讨论】：

我使用的是正确的 user_ref，实际上我们有 shopify 插件，但对于某些商店插件是隐藏的，我不知道为什么？
@Thorin 我们的文档中有其他故障排除技巧：docs.amio.io/docs/… 我会亲自检查特别是allow_login 并且messenger_app_id 和appId 是相等的。告诉我。
是的，我已经了解了这些故障排除技巧，但我的意思是为什么某些商店的代码行为不同并且对某些商店有效
@Thorin，我没有想到为什么......如果你发现了，回来写信告诉我有什么问题。谢谢！

【解决方案2】：

您好，我正在尝试实现这一点并在控制台中获得相同的隐藏状态。

在用户确认选择加入之前，您的复选框是隐藏的还是在网页加载时可见？

谢谢，菲尔

【讨论】：

该复选框在网页加载时可见。当你说你实现了这个你的意思是什么？可以分享一下代码吗？
@Stefanvdk 是的，这是我的代码，不能发布太久！
我认为出了点问题，因为我看不到代码。可以再分享一次吗？

【解决方案3】：

已解决：Plugin was hidden 的问题是因为 Messenger 应用程序处于开发模式，这就是为什么当您从 FB 注销时，该复选框不会显示在页面上，并且会因为没有授权而被隐藏用户会话。但是，当您以应用程序的开发人员、所有者、测试人员的身份登录 FB 时，该复选框将显示在页面上，因为此时存在授权会话。

【讨论】：

【解决方案4】：

尝试更改 user_ref。我遇到了同样的问题。然后我（偶然）发现，一旦 Facebook 用户选择加入，该复选框将被隐藏，直到您提交不同的 user_ref。（顺便说一句，这不是文档。）

【讨论】：

谢谢，这似乎解决了问题！所以现在我遇到了渲染问题，因为 atm 我无法在 JS 中生成随机数并将其作为 user_ref 的属性值放在插件元素中。有什么建议吗？
我现在可以使用 PHP 而不是 JS。现在很好，谢谢你的回答！
@Stefanvdk 是否可以分享您的 php 代码 sn-p。
@JP 当然，np！
shopping-cart-company.herokuapp.com/index.html page_id=1711063052543482 messenger_app_id="1815704925309469" user_ref="=$random_val?>" prechecked="true" allow_login="true" size="large">
@Stefanvdk 您是否需要为您的应用注册任何 webhook 才能使其正常工作？我有同样的问题。无法显示信使复选框。我已经检查了所有内容，唯一的区别是我使用 JS Date 对象来生成唯一的 user_ref，并且我再次使用 JS 将 div 元素动态添加到正文中。当我看到订阅事件被触发但插件被隐藏时，它似乎正在工作。

【解决方案5】：

这是@Stefanvdk 的代码

<script>
window.fbAsyncInit = function() {
    FB.init({
        appId      : '341168946244551',
        xfbml      : true,
        version    : 'v2.6'
    });

    FB.Event.subscribe('messenger_checkbox', function(e) {
        console.log("messenger_checkbox event");
        console.log(e);

        if (e.event == 'rendered') {
            console.log("Plugin was rendered");
        } else if (e.event == 'checkbox') {
            var checkboxState = e.state;
            console.log("Checkbox state: " + checkboxState);
        } else if (e.event == 'not_you') {
            console.log("User clicked 'not you'");
        } else if (e.event == 'hidden') {
            console.log("Plugin was hidden");
        }
    });
};

(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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')
);

function confirmOptIn() {
    FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, {
        'app_id':'341168946244551',
        'page_id':'238619342849536',
        'ref':'shopping-cart-company',
        'user_ref':'<?=$random_val?>'
    });
}
</script>      

<?php $random_val=rand(100000,999999);?>

<div class="fb-messenger-checkbox"
origin=https://stablevehiclecontracts.co.uk/checkbox3.php 
page_id=238619342849536 
messenger_app_id=341168946244551 
user_ref="<?=$random_val?>" 
prechecked="true" 
allow_login="true" 
size="large"> </div>

【讨论】：

感谢分享！我查看了您的代码，但找不到问题所在。我访问了您的网站，可以看到您的 user_id 每次都不同，所以恐怕不是这样。
我有同样的问题，已经尝试生成随机用户 ID，但作为 Phil，问题仍然存在。对于这个问题，您还有其他解决方案吗？谢谢

【解决方案6】：

有同样的问题，经过数小时的研究，我发现这是一个解决方案：

为此，您必须创建一个消息传递 webhook，尽管您不会使用它。

点击此链接了解实现该目标的步骤：https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup

参考：https://*.com/a/42411068/3697733

【讨论】：

【解决方案7】：

我正在使用这个 javascript 函数来确保当 div 处于隐藏状态时显示 facebook 复选框。

var scan_checkbox = null;
function startCheckBoxScanenr() {
    jQuery("[id*='fb-messenger-checkbox']:first").each(function() {
        if (jQuery(this).is(':visible') && scan_checkbox === null){
            var user_ref_new = Math.floor((Math.random() * 10000000000000) + 1);
            jQuery(this).attr("user_ref", user_ref_new);
            FB.XFBML.parse();
            stopCheckboxScanner();
        }
        // else {
        //     console.log("checkbox was hidden");
        //     scan_checkbox = null;
        // }
    });
}

function stopCheckboxScanner() {
    clearInterval(checkbox_scanner);
}

【讨论】：