单击链接而不是自动加载时启动 Facebook Livechat？答案

【问题标题】：Start Facebook Livechat upon clicking a link instead of autoload?单击链接而不是自动加载时启动 Facebook Livechat？
【发布时间】：2018-03-10 13:41:37
【问题描述】：

FB 几个月前推出了 Livechat API。添加以下代码后，右下角会弹出一个小图标。

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
  (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-customerchat" page_id="PAGE_ID"></div>

这意味着，当访问者访问该网站时，它会自动加载。

我的问题是，是否可以点击链接打开此实时聊天而不是自动加载？

<a href="#">Click here to start FB livechat!</a>   // something like this

【问题讨论】：

标签： php facebook facebook-javascript-sdk facebook-php-sdk

【解决方案1】：

将 FB.init 包装在按钮单击事件中。这样，在您单击其他内容之前，它不会启动聊天元素。

普通的javascript方法：

<script>
  var narf = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
  (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-customerchat" page_id="PAGE_ID"></div>
<button onclick="narf();">Start Chat</button>

jQuery 方法：

<script>
  $(function() {
      $("#openchat").click(function(){
          FB.init({
              appId            : 'your-app-id',
              autoLogAppEvents : true,
              xfbml            : true,
              version          : 'v2.11'
          });
      });
  });
  (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-customerchat" page_id="PAGE_ID"></div>
<button id="openchat">Start Chat</button>

标准 javascript 中的延迟 XFBML parse 方法（如 CBroe 所述）：

<script>
  var narf = function() {
      FB.XFBML.parse(document.getElementById('chat-wrapper'));
  };
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : false,
      version          : 'v2.11'
    });
  };
  (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 id="chat-wrapper">
    <div class="fb-customerchat" page_id="PAGE_ID"></div>
</div>
<button onclick="narf();">Start Chat</button>

【讨论】：

你也可以像以前一样初始化它，但是用xfbml: false，然后再调用FB.XFBML.parse()。如果页面上可能同时存在其他社交插件（例如按钮）会很有帮助 - 通过将 DOM 元素传递给 parse，可以使其仅在特定的 DOM 子树中查找。