我正在尝试按照本文档集成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