延迟或异步 fb 聊天答案

【问题标题】：Defer or Async fb chat延迟或异步 fb 聊天
【发布时间】：2020-04-25 14:20:57
【问题描述】：

我用这个短代码在我的网站上添加了 FB 聊天：

<!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml            : true,
        version          : 'v6.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/fr_FR/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your customer chat code -->
  <div class="fb-customerchat"
    attribution=setup_tool
    page_id="366112410637632"
    theme_color="#44bec7"
    logged_in_greeting="Bonjour, si vous avez la moindre question, je suis disponible pour vous aider !"
    logged_out_greeting="Bonjour, si vous avez la moindre question, je suis disponible pour vous aider !">
  </div>

但是在加载过程中它有点重，并且 yslow 告诉我应该延迟或异步它，我尝试将延迟添加到但它似乎不起作用。我对 js 有点陌生，我该怎么做？

提前致谢，

【问题讨论】：

以与普通 SDK 相同的方式嵌入它应该可以工作，developers.facebook.com/docs/javascript/quickstart#loading（请注意，脚本来源不同。）Facebook 曾经建议为普通 SDK 提供类似于上述代码的代码，但这还包括显式设置异步属性 IIRC。他们现在似乎已经切换到更简单的版本，可能是因为现在浏览器对 async/defer 的支持比以前更广泛了。
所以我应该在
这似乎甚至不是 SDK 本身，而是它作为回报加载的附加脚本。也许稍后使用超时来触发初始嵌入代码可能会有所帮助？
我做到了，没关系！谢谢:)

标签： javascript facebook asynchronous deferred

【解决方案1】：

我的问题有点晚了，但在 2020 年（以及使用 facebook 像素）对我有用的解决方案是将 facebook 脚本包装在超时函数中：

所以 facebook 为您的聊天插件提供的代码是：

<!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml            : true,
        version          : 'v8.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_GB/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your Chat Plugin code -->
  <div class="fb-customerchat"
    attribution=setup_tool
    page_id="xxxxxxx" theme_color="#BB1C1C">
  </div>

然后我像这样包装它：

<div id="fb-root"></div>
<script>
setTimeout(function(){
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version: 'v8.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_GB/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}, 4500);
</script>
<div class="fb-customerchat" attribution=setup_tool page_id="1429606483967175" 
theme_color="#BB1C1C"></div>

【讨论】：

感谢您的回答！你的意思是上面的解决方案可能会导致像素问题？