发送至信使插件未显示答案

【问题标题】：Send-to-messenger plugin not showing发送至信使插件未显示
【发布时间】：2018-05-18 16:29:41
【问题描述】：

我的 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

谢谢！

【问题讨论】：

您是否正确地将您的域列入白名单...？
我使用相同的方式，按钮对我来说也不可见。我需要让应用上线吗？注意：我使用的是子域，我是管理员

标签： facebook facebook-javascript-sdk facebook-messenger messenger facebook-messenger-bot

【解决方案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 设置网址：

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

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

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

【讨论】：

可以确认需要已经创建 webhook 才能显示“发送到 Messenger”按钮。
我想在 Angular 8 中实现这个。你知道如何实现吗？ @Bhavesh Vavadiya
是的，我可以在 Angular 8 @KinjalVithalani 中实现
好的，谢谢！你能和我分享一个例子吗？ @Bhavesh Vavadiya

【解决方案2】：

您需要在页面的 Messenger 个人资料中将您的域 (https://www.weekendr.eu) 列入白名单：

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

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

【讨论】：

【解决方案3】：

就我而言，问题是因为我的广告拦截器 (uBlock) 阻止了对 facebook 的调用。禁用 uBlock 解决问题。

【讨论】：