问题
I'm trying to implement the new Facebook Checkbox plugin in a form but in a weird way I can't get it showing on the screen. So I don't get errors clientside but Iframe is hidden.
Here's an simplified example of the code:
<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>
There are no errors in the dev console. Only logs that the plugin is hidden:
回答1:
Facebook updated their docs:
The web plugin takes a
user_refparameter 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.
You have to generate a new user_ref for every single render of the checkbox plugin.
Checklist to display CheckBox Plugin
use Production App Id (not the test one)- always regenerated
user_ref - whitelist the domain in
origin - use correct protocol in
origin- http / https
回答2:
Hi I'm trying to implement this and getting the same Hidden state in the console.
Is yours hidden until the user Confirms Opt in or is the checkbox visible on load of the webpage?
Thanks, Phil
回答3:
Solved: Problem with Plugin was hidden is because the messenger app is in the development mode and that's why when you have logged out from FB the checkbox won't show up on the page and it will be hidden because there is no authorized user session. But while you have logged in on FB as a developer, owner, tester of the app then the checkbox will show up on the page because then there is an authorized session.
回答4:
Try changing the user_ref. I was having the same issue. Then I discovered (by accident) that once the Facebook user has opted in, the checkbox will be hidden until you submit a different user_ref. (This is document nowhere, by the way.)
回答5:
Here's the code @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>
回答6:
Had same issue and after hours of research, I found out this as a solution:
For this to work, you must create a messaging webhook although you wouldn't make use of it.
Follow this link for steps to achieving that: https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup
Reference: https://stackoverflow.com/a/42411068/3697733
回答7:
I am using this javascript function to make sure facebook checkbox is showing when the div is in hidden.
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);
}
来源：https://stackoverflow.com/questions/41153714/facebook-messenger-checkbox-plugin-is-hidden