Send-to-messenger插件没有显示

Question

我的Send-to-messenger插件没有出现在我的网站上。这是我的配置：

<script>
window.fbAsyncInit = function() {
FB.init({
  appId            : 'xxxxx',
  autoLogAppEvents : true,
  xfbml            : true,
  version          : 'v3.0'
});
};

(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 = "https://connect.facebook.net/en_US/sdk.js";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-send-to-messenger"
  messenger_app_id="xxxxx"
  page_id="vvvvv"
  color="blue"
  size="large">
</div>

此代码在此页面上生成的html：https://www.weekendr.eu/bonsplans似乎没问题，但按钮仍然不会出现。

一些可能有用的元素：

• 我在prod env
• 我的网站有https：https://www.weekendr.eu
• 我的应用程序已发布并在线
• 我是管理员，除了连接到FB
• 我允许第三方cookie

谢谢 ！

Answer 1

我可以看到你的代码，发现你缺少订阅活动。

FB.Event.subscribe('send_to_messenger', function(e) {
      // callback for events triggered by the plugin
});

请在下面找到完整代码：

  <script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v3.2'
    });

      FB.Event.subscribe('send_to_messenger', function(e) {
      // callback for events triggered by the plugin
            console.log(e);
      });
  };

  (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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>


<div class="fb-send-to-messenger" 
  messenger_app_id="<Your App ID>" 
  page_id="<Your Page ID>" 
  data-ref="1" 
  color="blue" 
  size="large">
</div>

另外，在编写上述代码之前，您需要按照以下步骤操作：

1）将您的域添加到白名单（转到您的Facebook页面 - >设置）2）在您的服务器中创建webhook并在下面编写代码（代码在PHP中。您可以使用任何语言）对于节点js：https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup

<?php


    if($_SERVER["REQUEST_METHOD"] == "POST") {
        //Write code to listen webhook request

    } else {
        $VERIFY_TOKEN = '1234';
        $mode = $_REQUEST['hub_mode'];
        $token = $_REQUEST['hub_verify_token'];
        $challenge = $_REQUEST['hub_challenge'];

        if ($mode && $token) {

            // Checks the mode and token sent is correct
            if ($mode === 'subscribe' && $token === $VERIFY_TOKEN) {

                // Responds with the challenge token from the request
                console.log('WEBHOOK_VERIFIED');
                echo $challenge;
                http_response_code(200); 

            } else {
                // Responds with '403 Forbidden' if verify tokens do not match
                http_response_code(403); 
            }
        } else {
            http_response_code(403); 
        }
    }
?>

3）转到应用设置并验证您的webhook设置URL：

https://developers.facebook.com/apps/<Your App ID>/messenger/settings/

现在您应该可以查看“发送到Messenger”按钮

注意：如果应用程序正在开发中，那么管理员，开发人员和测试人员只能看到此按钮。

Answer 2

您需要在您的页面的Messenger配置文件中将您的域（https://www.weekendr.eu）列入白名单：

https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting

我假设您正在用您的实际应用ID和页面ID替换所有xxx和vvv。

Answer 3

在我的情况下，问题是因为我的广告拦截器（uBlock）阻止了对facebook的调用。禁用uBlock可以解决问题。