it-swarm.com.de

Das Facebook Messenger Checkbox Plugin ist ausgeblendet

Ich versuche, das neue Facebook Checkbox-Plugin in einem Formular zu implementieren, aber auf seltsame Weise kann ich es nicht auf dem Bildschirm anzeigen. Ich bekomme also keine Fehler auf der Clientseite, aber Iframe ist versteckt.

Hier ist ein vereinfachtes Beispiel für den 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>

Es gibt keine Fehler in der Entwicklungskonsole. Nur protokolliert, dass das Plugin versteckt ist:

 Screenshot of dev console message

9
Stefanvdk

Facebook hat seine docs aktualisiert:

Das Web-Plugin verwendet einen user_ref -Parameter, der als Kennung für den Benutzer verwendet wird. Wenn der Benutzer den Ablauf beendet hat, geben wir diese Kennung an Sie zurück, um den Benutzer zu identifizieren. Dieser Parameter sollte nicht nur für jeden Benutzer eindeutig sein, sondern für jedes Mal, wenn das Plugin gerendert wird. Wenn der Parameter nicht eindeutig ist, wird das Plugin möglicherweise nicht gerendert.

Sie müssen für jedes Rendering des Checkbox-Plugins einen neuen user_ref generieren.

Checkliste CheckBox Plugin anzeigen

  • produktions-App-ID verwenden (nicht die Test-ID)
  • immer regenerierter user_ref
  • whitelist der Domain in Origin
  • verwenden Sie das richtige Protokoll in Origin - http/https
4
Amio.io

Hallo, ich versuche, dies zu implementieren und den gleichen versteckten Zustand in der Konsole zu erhalten.

Ist Ihre verborgen, bis der Benutzer die Anmeldung bestätigt, oder ist das Kontrollkästchen beim Laden der Webseite sichtbar?

Danke, Phil

4
Phil K

Behoben: Das Problem mit Plugin was hidden liegt darin, dass sich die Messenger-App im Entwicklungsmodus befindet. Wenn Sie sich von FB abgemeldet haben, wird das Kontrollkästchen nicht auf der Seite angezeigt und ausgeblendet, da keine autorisierte Benutzersitzung vorhanden ist. Wenn Sie sich jedoch als Entwickler, Eigentümer und Tester der App bei FB angemeldet haben, wird das Kontrollkästchen auf der Seite angezeigt, da dann eine autorisierte Sitzung stattfindet.

1
callmejoejoe

Ich benutze diese Javascript-Funktion, um sicherzustellen, dass das Facebook-Kontrollkästchen angezeigt wird, wenn das Div versteckt ist.

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

Hatte das gleiche Problem und nach stundenlanger Recherche fand ich dies als Lösung heraus:

Damit dies funktioniert, müssen Sie einen Messaging-Webhook erstellen, den Sie jedoch nicht verwenden würden.

Folgen Sie diesem Link für Schritte, um dies zu erreichen: https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup

Referenz: https://stackoverflow.com/a/42411068/36977

0
nacojohn

Versuchen Sie, die user_ref zu ändern. Ich hatte das gleiche Problem. Dann habe ich (aus Versehen) festgestellt, dass das Kontrollkästchen ausgeblendet wird, sobald der Facebook-Benutzer sich angemeldet hat, bis Sie eine andere user_ref eingeben. (Das ist übrigens nirgendwo dokumentiert.)

0
Sskirch

Hier ist der Code @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