it-swarm.com.ru

Плагин 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>

В консоли разработчика нет ошибок. Только логи, что плагин скрыт:

 Screenshot of dev console message

9
Stefanvdk

Facebook обновил свои документы :

Веб-плагин принимает параметр user_ref, который используется в качестве идентификатора для пользователя. Когда пользователь завершит поток, мы передадим вам этот идентификатор для идентификации пользователя. Этот параметр должен быть уникальным не только для каждого пользователя, но и для каждого рендеринга плагина. Если параметр не уникален, то плагин может не отображаться.

Вы должны сгенерировать новый user_ref для каждого рендера плагина checkbox.

Контрольный список для отображения CheckBox Plugin

  • используйте идентификатор производственного приложения (не тестовый)
  • всегда обновляется user_ref
  • белый список домена в Origin
  • используйте правильный протокол в Origin - http/https
4
Amio.io

Привет я пытаюсь реализовать это и получить то же скрытое состояние в консоли.

Ваш скрыт до тех пор, пока пользователь не подтвердит подписку или флажок виден при загрузке веб-страницы?

Спасибо фил

4
Phil K

Решено: Проблема с Plugin was hidden заключается в том, что приложение мессенджера находится в режиме разработки, и поэтому, когда вы вышли из FB, флажок не будет отображаться на странице и будет скрыт, потому что нет авторизованного сеанса пользователя. Но если вы вошли в FB как разработчик, владелец, тестер приложения, то на странице появится флажок, потому что тогда будет авторизованный сеанс. 

1
callmejoejoe

Попробуйте изменить user_ref. У меня была такая же проблема. Затем я обнаружил (случайно), что, как только пользователь Facebook включил, флажок будет скрыт, пока вы не отправите другой user_ref. (Кстати, это нигде не документ)

0
Sskirch

Вот код @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>
0
Phil K