即使设置了webhook并添加了唯一的user_ref,Facebook Messenger Messenger复选框仍保持隐藏状态

时间:2019-05-24 03:04:23

标签: facebook symfony preact

我正在尝试按照本文档集成Facebook Messenger复选框API https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin

我已经尝试将facebook复选框集成到我们的网站,说实话,它就像一个魅力一样工作。

这是我用于预设组件的代码。

注册fb初始化

  window.fbAsyncStack = [];
                window.fbAsyncInit = function() {
                    console.log('this has been rendered');
                    FB.init({
                        {#appId            : '{{ facebook_app_id }}',#}
                        appId: '489987305072387',
                        autoLogAppEvents : true,
                        xfbml            : true,
                        version          : 'v2.11'
                    });

                    window.fbAsyncStack.forEach(function(fn) {
                        fn();
                    });

                    window.fbAsyncInitFired = true;
                };

                (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 = '{{ facebook_sdk_url }}';
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));

                window.fbAsyncStack.push(function() {
                    FB.XFBML.parse();
                });

我做了坐骑活动

 fbEventSubscibe(){
        window.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");
            }

        });
    }

    componentDidMount(){
        if(typeof window.fbAsyncInit === "undefined") {
            window.fbAsyncInit = () => {
                console.log("window fb not init");
                window.FB.init({
                    appId      : 'xxxx',
                    xfbml      : true,
                    version    : 'v2.6'
                });
                this.fbEventSubscibe();
            };

        } else {
            console.log("window fb init");
            this.fbEventSubscibe();
        }
    }

我的div渲染事件

div className={"fb-messenger-checkbox"}
                             origin={props.facebookOriginDomain}
                             page_id={"xxxxx"}
                             messenger_app_id={"xxxxx"}
                             user_ref={Math.random().toString(36).slice(-5)}
                             allow_login={"true"}
                             size={"medium"}
                             skin={"light"}
                             center_align={"true"}>
                        </div>

这是控制台日志中的实际结果


{event: "hidden", user_ref: "xbjr3", ref: null, pluginID: undefined}
event: "hidden"pluginID: undefinedref: null user_ref: "xbjr3"__

Plugin was hidden

enter image description here

0 个答案:

没有答案