Question

我试图以一种形式实现新的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>

开发控制台中没有错误。仅隐藏插件的日志：

Answer 1

您好我试图在控制台中实现此功能并获得相同的隐藏状态。

在用户确认选择加入或是否在网页加载时可以看到复选框时，您的隐藏？

谢谢，菲尔

Answer 2

Facebook更新了他们的docs：

Web插件采用user_ref参数，该参数用作用户的标识符。当用户完成流程时，我们会将此标识符传回给您以识别用户。此参数不仅对每个用户都是唯一的，而且每次都会呈现插件。如果参数不唯一，则插件可能无法呈现。

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

Checklist显示CheckBox插件

~~使用Production App Id（不是测试版）~~
始终重新生成user_ref
在origin
在origin - http / https

Answer 3

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

Answer 4

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

Answer 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>

Answer 6

有同样的问题，经过数小时的研究，我找到了解决方案：

要使其正常工作，您必须创建一个消息传递网络挂钩，尽管您不会使用它。

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

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

Answer 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);
}

Facebook messenger复选框插件是隐藏的

7 个答案: