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:
