Question

我在测试页面上实现了Facebook Checkbox插件，如per their documentation。但是，该复选框不会呈现。它仍然是隐藏的。

我遇到了同样问题的其他一些问题，但似乎没有一个能解决我的问题。我确定了：

我的域名已在我的FB应用中列入白名单。
user_ref始终是唯一的。
我是该应用的所有者，因此我可以在开发模式下进行测试。
我已登录我的FB帐户。

以下是我的代码：

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

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

        FB.Event.subscribe('messenger_checkbox', function(e) {
            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':'472807186447994',
            'page_id':'408145106012959',
            'ref':'some-ref-here',
            'user_ref':'<?php echo $random_val; ?>'
        });
    }
</script>      

<div class="col-md-7">
    <div class="fb-messenger-checkbox"  
        origin="https://maartenbelmans.com/fbtest"
        page_id="408145106012959"
        messenger_app_id="472807186447994"
        user_ref="<?php echo $random_val; ?>" 
        prechecked="false" 
        allow_login="true" 
        size="large">
    </div>   
</div>

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

我不确定如何解决这个问题。 有什么想法吗？

Answer 1

当我看到你已经通过的所有Fb政策时，但是你错过了一件事我看到你的代码结构，你把facebook DIV放在html的正文部分之外是错误的。

参考：http://pasted.co/b052c12f

    <div class="fb-messenger-checkbox"  
       origin="https://maartenbelmans.com/fbtest"
       page_id="408145106012959"
       messenger_app_id="472807186447994"
       user_ref="<?php echo $random_val; ?>" 
       prechecked="false" 
       allow_login="true" 
      size="large">
   </div>

上面这个div必须在任何页面的正文中。

所以，你的问题将得到解决。

Answer 2

你试过在div中设置origin =“maartenbelmans.com/”吗？ Origin应该只是域名，所以当插件检查你的来源与白名单时没有匹配。

Answer 3

我曾遇到过这些问题一个是白名单域名一个是起源的东西

另一个是当我玩这个版本的时候请确定你选择的版本也是2.8，所以2.6可能不是真的，请找出你正在使用的相应版本

Answer 4

我用这个解决了。

故障排除技巧

如果您无法正确显示插件，请尝试以下提示：

验证您的漫游器实际上已获得pages_messaging许可。
验证您的页面是否已对机器人进行Webhook订阅。
如果您看到类似“由于祖先违反了以下内容安全策略指令：* ”而拒绝在框架中显示 *的控制台错误，请检查插件页面所在的域呈现在白名单上。

如果allow_login参数设置为false，则您将需要具有有效的Facebook用户会话（即未登录），否则该插件将被隐藏。

目前不支持在localhost上进行测试。

Answer 5

我有同样的问题。这是来自Facebook的提示：

验证您的漫游器实际上已获得pages_messaging许可。
验证您的页面是否已对机器人进行Webhook订阅。
如果您看到控制台错误，例如“由于祖先违反了以下内容安全策略指令而拒绝显示在框架中：”，请检查已在其上呈现插件的页面域已列入白名单。
如果allow_login参数设置为false，则您将需要具有有效的Facebook用户会话（即未登录），否则该插件将被隐藏。
目前不支持在localhost上进行测试。
仅在一个位置将xfbml设置为true。在FB.init中将其设置为true，或者在https://connect.facebook.net/en_US/sdk.js#xfbml=1这样的SDK URL中进行设置。

我遵循了所有这些提示，但是仍然没有用。

我的解决方案是添加WebHook网址并订阅消息事件

Facebook Checkbox插件仍然隐藏

5 个答案: