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/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=.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:
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:
Share Improve this question edited Feb 22, 2017 at 9:01 dakab 5,87510 gold badges45 silver badges70 bronze badges asked Dec 14, 2016 at 23:00 StefanvdkStefanvdk 1551 gold badge2 silver badges13 bronze badges 3- Have you looked in the browsers Developer console? What does it say? – WizKid Commented Dec 15, 2016 at 1:05
- There are no errors in the dev console. I added a screenshot of the state logs to the post – Stefanvdk Commented Dec 15, 2016 at 9:12
- One thing I found that was causing problem for me was that the parent div was hidden in my case, which caused the container-width they take as 0px. Moving that same button to first section of my 5 page wizard fixed it. Make sure your div is visible and has width > 0px. – Jay Patel - PayPal Commented Oct 6, 2018 at 19:50
7 Answers
Reset to default 5Facebook 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
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
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.
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.)
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>
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
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);
}