Facebook messenger复选框插件是隐藏的

Ste*_*vdk 10 html javascript jquery facebook messenger

我正试图以一种形式实现新的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>
Run Code Online (Sandbox Code Playgroud)

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

开发控制台消息的屏幕截图

Ami*_*.io 5

Facebook 更新了他们的文档

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

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

清单以显示 CheckBox 插件

  • 使用 Production App Id(不是测试版)
  • 永远重生 user_ref
  • 将域列入白名单 origin
  • origin- http / https 中使用正确的协议