Facebook Messenger 复选框插件被隐藏

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

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

Answer 2

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

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

谢谢，菲尔

Answer 3

这是代码@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 4

Facebook 更新了他们的 docs:

The web plugin takes a user_ref parameter which is used as an identifier for the user. When the user finishes the flow, we will pass this identifier back to you to identify the user. This parameter should be unique not just for every user, but for every time the plugin is rendered. If the parameter is not unique, then the plugin may not render.

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

Checklist 显示复选框插件

~~使用生产应用程序 ID（不是测试）~~
总是重新生成user_ref
将 origin
在 origin 中使用正确的协议 - http / https

Answer 5

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

Answer 6

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

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

按照此 link 了解实现该目标的步骤：https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup

参考：

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 复选框插件被隐藏

Facebook messenger checkbox plugin is hidden

html

javascript

jquery

facebook

messenger