Плагин флажка Facebook Messenger скрыт
Я пытаюсь внедрить новый плагин Facebook Checkbox в форме, но странным образом я не могу его показать на экране. Поэтому я не получаю ошибки клиентов, но iframe скрыт.
Здесь приведен упрощенный пример кода:
<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>
В консоли dev отсутствуют ошибки. Только журналы, которые плагин скрыт:
![Снимок экрана с сообщением dev console]()
Ответы
Ответ 1
Facebook обновил свои документы:
Веб-плагин принимает параметр user_ref
который используется в качестве идентификатора для пользователя. Когда пользователь завершит поток, мы передадим вам этот идентификатор для идентификации пользователя. Этот параметр должен быть уникальным не только для каждого пользователя, но и для каждого рендеринга плагина. Если параметр не уникален, то плагин может не отображаться.
Вы должны сгенерировать новый user_ref
для каждого рендера плагина флажка.
Контрольный список для отображения CheckBox Plugin
-
используйте идентификатор производственного приложения (не тестовый) - всегда регенерированный
user_ref
- белый список домена в
origin
- используйте правильный протокол в
origin
- http/https
Ответ 2
Привет, я пытаюсь реализовать это и получить то же самое Скрытое состояние в консоли.
Является ли ваш скрытым до тех пор, пока пользователь не подтвердит выбор или не будет ли поле флажка открыто при загрузке веб-страницы?
Спасибо, Фил
Ответ 3
Решено: проблема с Plugin was hidden
заключается в том, что приложение-мессенджер находится в режиме разработки и поэтому, когда вы вышли из FB, этот флажок не будет отображаться на странице, и он будет скрыт, потому что нет разрешенных пользовательский сеанс. Но пока вы вошли в FB как разработчик, владелец, тестер приложения, тогда этот флажок появится на странице, потому что тогда есть авторизованный сеанс.
Ответ 4
Попробуйте изменить user_ref. У меня была такая же проблема. Затем я обнаружил (случайно), что, как только пользователь Facebook включится, флажок будет скрыт, пока вы не представите другой user_ref. (Это нигде, кстати, это документ.)
Ответ 5
Здесь код @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
Возникла такая же проблема, и после нескольких часов исследований я нашел это как решение:
Чтобы это работало, вы должны создать веб-крючок для обмена сообщениями, хотя вы не будете его использовать.
Перейдите по этой ссылке, чтобы узнать, как это сделать: https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup
Ссылка: fooobar.com/questions/1264559/...
Ответ 7
Я использую эту функцию javascript, чтобы убедиться, что флажок facebook показывает, когда div скрыт.
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);
}