Плагин флажка 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);
}