Javascript Facebook messenger复选框插件已隐藏

我试图以一种形式实现新的Facebook复选框插件，但奇怪的是，我无法在屏幕上显示它。所以我不会在客户端看到错误，但Iframe是隐藏的

下面是一个简化的代码示例：

window.fbAsyninit=函数（）{
FB.init({
appId:'181570495309469'，
xfbml：是的，
版本：“v2.6”
});
FB.Event.subscribe（'messenger_复选框'，函数（e）{
日志（“messenger_复选框事件”）；
控制台日志（e）；
如果（e.event=='rendered'）{
log（“插件被呈现”）；
}else if（e.event==“checkbox”）{
var checkboxState=e.state；
log（“复选框状态：+checkboxState”）；
}else if（e.event=='not_you'）{
log（“用户单击了‘不是你’”）；
}else if（e.event==“hidden”）{
log（“插件被隐藏”）；
}
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）
);
功能确认素（）{
FB.AppEvents.logEvent（'Messenger CheckboxUserConfirmation'，null{
'应用程序id'：'18157049425309469'，
'页码id'：'1711063052543482'，
“ref”：“shopping-cart-company”，
“用户参考”：“1234”
});
}

---

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

---

尝试更改用户参考。我也遇到了同样的问题。然后我发现（无意中）一旦Facebook用户选择加入，复选框将被隐藏，直到您提交其他用户参考。（顺便说一句，这不是任何地方的文档。）

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

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

---

谢谢，菲尔这是代码@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>

window.fbAsyninit=函数（）{
FB.init({
appId:'3411689464551'，
xfbml：是的，
版本：“v2.6”
});
FB.Event.subscribe（'messenger_复选框'，函数（e）{
日志（“messenger_复选框事件”）；
控制台日志（e）；
如果（e.event=='rendered'）{
log（“插件被呈现”）；
}else if（e.event==“checkbox”）{
var checkboxState=e.state；
log（“复选框状态：+checkboxState”）；
}else if（e.event=='not_you'）{
log（“用户单击了‘不是你’”）；
}else if（e.event==“hidden”）{
log（“插件被隐藏”）；
}
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）
);
功能确认素（）{
FB.AppEvents.logEvent（'Messenger CheckboxUserConfirmation'，null{
'应用程序id'：'3411689464551'，
'页码id'：'238619342849536'，
“ref”：“shopping-cart-company”，
“用户参考”：”
});
}
Facebook更新了他们的：

web插件使用
user\u ref
参数作为用户的标识符。当用户完成流时，我们将把这个标识符传递给您以识别用户。这个参数不仅对每个用户都是唯一的，而且对插件的每次呈现都是唯一的。如果参数不是唯一的，则插件可能不会呈现

您必须为复选框插件的每个渲染生成一个新的
用户\u ref

显示复选框插件


使用生产应用程序Id（不是测试应用程序Id）
始终重新生成
user\u ref
在
origin
在
origin
-http/https中使用正确的协议
已解决：
插件的问题被隐藏
是因为messenger应用程序处于开发模式，这就是为什么当您从FB注销时，该复选框不会显示在页面上，并且会被隐藏，因为没有授权的用户会话。但是，当你以开发者、所有者、应用程序测试人员的身份登录FB时，该复选框将显示在页面上，因为此时有一个授权会话
 也有同样的问题，经过数小时的研究，我发现这是一个解决方案：

要使其工作，您必须创建一个消息传递webhook，尽管您不会使用它

遵循此链接了解实现以下目标的步骤：

参考资料：
我正在使用此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);
}

你看过浏览器开发者控制台了吗？它说什么？开发控制台中没有错误。我在postOne中添加了一个状态日志的屏幕截图。我发现对我造成问题的一件事是，父div被隐藏在我的案例中，这导致它们采用的容器宽度为0px。将相同的按钮移动到我的5页向导的第一部分修复了它。确保您的div可见并且宽度>0px。谢谢，这似乎可以解决问题！所以现在我在渲染方面遇到了问题，因为我无法在JS中生成一个随机数，并将其作为用户_ref在plugin元素中的attributevalue。有什么建议吗？我现在可以用PHP而不是JS。现在很好，谢谢你的回答@Stefanvdk是否可以共享您的php代码片段。@JP当然可以，np@斯特凡夫德克多