移动网站上的 Facebook Messenger 客户聊天插件答案

【问题标题】：Facebook Messenger Customer Chat Plugin on mobile website移动网站上的 Facebook Messenger 客户聊天插件
【发布时间】：2018-04-20 17:03:22
【问题描述】：

我正在尝试在我的网站上插入自定义聊天插件。它可以完美运行，但在移动设备上看起来并不好。我只希望它具有页面宽度，但它看起来像这样：

这是我的 HTML 代码，非常简单：

<!DOCTYPE html>
<html>
  <head>
    <title>Otto Bot</title>
  </head>
  <body>
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>(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/es_LA/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

    <!-- Your customer chat code -->
    <div 
      class="fb-customerchat" 
      attribution="setup_tool" 
      page_id="<MY-PAGE-ID>" 
      logged_in_greeting="Hablemos?" 
      logged_out_greeting="Hablemos?"
      minimized='false'>
    </div>
  </body>
</html>

我刚刚复制并粘贴了我的页面设置中给出的代码。我已经尝试过https://developers.facebook.com/docs/messenger-platform/reference/web-plugins/#customer_chat中给出的说明

【问题讨论】：

首先，除了提供的配置选项允许之外，您不能以其他方式操作任何 Facebook 插件。其次，该屏幕截图看起来似乎大部分问题可能是由于您根本没有做任何事情来使这个“页面”开始对移动设备友好。甚至没有视口元标记，所以浏览器只会显示它，如果它是一个“桌面站点”并且只是缩小所有内容。
谢谢！我只需要添加视口元标记。抱歉这个愚蠢的问题，我只是想要一个显示信使插件的网站，但我从未建立过响应式网站。

标签： html css facebook facebook-messenger messenger

【解决方案1】：

只需要在头部添加一个视口元标记：

<!DOCTYPE html>
<html>
  <head>
    <title>Otto Bot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>(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/es_LA/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

    <!-- Your customer chat code -->
    <div 
      class="fb-customerchat" 
      attribution="setup_tool" 
      page_id="<MY-PAGE-ID>" 
      logged_in_greeting="Hablemos?" 
      logged_out_greeting="Hablemos?"
      minimized='false'>
    </div>
  </body>
</html>

【讨论】：