web-dev-qa-db-ja.com

Facebookメッセンジャーチェックボックスプラグインは非表示です

新しいFacebookチェックボックスプラグインをフォームに実装しようとしていますが、奇妙な方法で画面に表示されません。そのため、クライアント側でエラーは発生しませんが、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

javascriptjqueryhtmlfacebookmessenger
10
Stefanvdk

Facebookが更新しました docs ：

Webプラグインは、ユーザーの識別子として使用されるuser_refパラメーターを取ります。ユーザーがフローを終了すると、ユーザーを識別するためにこの識別子が返されます。このパラメーターは、すべてのユーザーだけでなく、プラグインがレンダリングされるたびに一意である必要があります。パラメータが一意でない場合、プラグインはレンダリングされない可能性があります。

チェックボックスプラグインのレンダリングごとに、新しいuser_refを生成する必要があります。

チェックリスト チェックボックスプラグインを表示する

  • production App IDを使用します（テスト用ではありません）
  • 常に再生成されますuser_ref
  • Originのドメインをホワイトリストに登録します
  • Origin-http/httpsで正しいプロトコルを使用する
4
Amio.io

こんにちは私はこれを実装しようとしていて、コンソールで同じ非表示状態を取得しようとしています。

ユーザーがオプトインを確認するまで非表示になりますか、それともWebページの読み込み時にチェックボックスが表示されますか？

ありがとう、フィル

4
Phil K

解決済み：Plugin was hiddenの問題は、メッセンジャーアプリが開発モードであるためです。そのため、FBからログアウトすると、チェックボックスがページに表示されず、許可されたユーザーがいないために非表示になります。セッション。ただし、アプリの開発者、所有者、テスターとしてFBにログインしている間は、承認されたセッションがあるため、チェックボックスがページに表示されます。

1
callmejoejoe

このjavascript関数を使用して、divが非表示のときにFacebookチェックボックスが表示されていることを確認しています。

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);
}
0
Yuda Prawira

同じ問題があり、何時間も調査した後、私はこれを解決策として見つけました：

これを機能させるには、使用しない場合でもメッセージングWebhookを作成する必要があります。

それを達成するためのステップについては、このリンクをたどってください： https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup

参照： https://stackoverflow.com/a/42411068/36977

0
nacojohn

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