web-dev-qa-db-fra.com

Le plugin Facebook Messenger est coché

J'essaie d'implémenter le nouveau plugin Facebook Checkbox sous une forme, mais d'une manière étrange, je ne peux pas le voir apparaître à l'écran. Je ne reçois donc pas d'erreurs côté client, mais Iframe est masqué.

Voici un exemple simplifié du 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>

Il n'y a pas d'erreur dans la console de développement. Seuls les journaux que le plugin est caché:

 Screenshot of dev console message

javascriptjqueryhtmlfacebookmessenger
9
Stefanvdk

Facebook a mis à jour ses docs :

Le plug-in Web prend un paramètre user_ref qui sert d'identifiant pour l'utilisateur. Lorsque l'utilisateur aura terminé le processus, nous vous renverrons cet identifiant pour l'identifier. Ce paramètre doit être unique non seulement pour chaque utilisateur, mais pour chaque rendu du plug-in. Si le paramètre n'est pas unique, le plug-in risque de ne pas être rendu.

Vous devez générer un nouveau user_ref pour chaque rendu du plug-in de case à cocher.

Liste de contrôle pour afficher le plugin CheckBox

  • utiliser l'ID de l'application de production (pas celui de test)
  • toujours régénéré user_ref
  • liste blanche du domaine dans Origin
  • utiliser le protocole correct dans Origin - http/https
4
Amio.io

Salut, j'essaie de mettre en œuvre cela et d'obtenir le même état caché dans la console.

Le vôtre est-il masqué jusqu'à ce que l'utilisateur confirme l'activation de l'option ou la case à cocher est-elle visible au chargement de la page Web?

Merci Phil

4
Phil K

Résolu: le problème avec Plugin was hidden vient du fait que l'application de messagerie instantanée est en mode de développement. C'est pourquoi, lorsque vous vous êtes déconnecté de FB, la case à cocher n'apparaît pas sur la page et elle est masquée, car il n'y a pas de session d'utilisateur autorisé. Mais tant que vous vous êtes connecté à FB en tant que développeur, propriétaire, testeur de l'application, la case à cocher apparaîtra sur la page car il y a une session autorisée. 

1
callmejoejoe

Essayez de changer le user_ref. J'avais le même problème. Ensuite, j'ai découvert (par accident) qu'une fois que l'utilisateur de Facebook avait choisi de participer, la case à cocher serait masquée jusqu'à ce que vous soumettiez un autre user_ref. (Ce document n'est nulle part, d'ailleurs.)

0
Sskirch

Voici le 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