title: Custom Facebook chat flugin
body: <p>t am having performance issues the site loads, it's the facebook chat I integrated into taking a lot of time to start. I have a reference to the article:</p>
  <p><a href="https://stackoverflow.com/questions/53500211/facebook-chat-plugin-kills-pagespeed-to-33">Facebook chat plugin &quot;kills&quot; Pagespeed to 33</a></p>
  <p>. I followed the instructions and it worked fine, until the function FB.Event.subscribe (&quot;xfbml.render&quot;, function() {.....} didn't work.</p>
  <p>i'm a novice, am i missing the code, or something? Please help. thank</p>
  <p>here is my html and js code</p>
  <pre><code>&lt;button id=&quot;fb-messenger-fake-button&quot;&gt;
  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 1024 1024&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;circle fill=&quot;#00B2FF&quot; style=&quot;fill: var(--msgr-color, #00B2FF)&quot; cx=&quot;512&quot; cy=&quot;512&quot; r=&quot;512&quot;/&gt;
      &lt;g id=&quot;spinner&quot; fill=&quot;#fff&quot;&gt;&lt;circle cx=&quot;512&quot; cy=&quot;239&quot; r=&quot;47&quot;/&gt;&lt;circle cx=&quot;375&quot; cy=&quot;275&quot; r=&quot;47&quot; fill-opacity=&quot;0.9&quot;/&gt;&lt;circle cx=&quot;275&quot; cy=&quot;375&quot; r=&quot;47&quot; fill-opacity=&quot;0.8&quot;/&gt;&lt;circle cx=&quot;239&quot; cy=&quot;512&quot; r=&quot;47&quot; fill-opacity=&quot;0.7&quot;/&gt;&lt;circle cx=&quot;275&quot; cy=&quot;649&quot; r=&quot;47&quot; fill-opacity=&quot;0.6&quot;/&gt;&lt;circle cx=&quot;375&quot; cy=&quot;749&quot; r=&quot;47&quot; fill-opacity=&quot;0.5&quot;/&gt;&lt;circle cx=&quot;512&quot; cy=&quot;785&quot; r=&quot;47&quot; fill-opacity=&quot;0.4&quot;/&gt;&lt;circle cx=&quot;649&quot; cy=&quot;749&quot; r=&quot;47&quot; fill-opacity=&quot;0.3&quot;/&gt;&lt;circle cx=&quot;749&quot; cy=&quot;649&quot; r=&quot;47&quot; fill-opacity=&quot;0.2&quot;/&gt;&lt;circle cx=&quot;785&quot; cy=&quot;512&quot; r=&quot;47&quot; fill-opacity=&quot;0.1&quot;/&gt;&lt;/g&gt;
      &lt;path id=&quot;logo&quot; fill=&quot;#fff&quot; d=&quot;M512 171c192 0 341 141 341 331S704 833 512 833c-35 0-68-5-99-13-6-2-12-1-18 1l-68 30c-17 8-37-5-38-24l-2-61c0-7-4-14-9-19a324 324 0 01-107-245c0-190 149-331 341-331zM307 599c-10 15 9 32 24 21l107-82c8-5 18-5 25 0l80 60c24 18 58 12 74-14l100-159c10-15-9-32-24-21l-107 82c-8 5-18 5-25 0l-80-60a51 51 0 00-74 13L307 599z&quot;/&gt;
  &lt;/svg&gt;
  &lt;/button&gt;
  
  
  
  &lt;!-- Messenger Chat plugin Code --&gt;
  &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
  
  &lt;div id=&quot;fb-customer-chat&quot; class=&quot;fb-customerchat&quot;&gt;
  &lt;/div&gt;
  
  
  
  &lt;script&gt;
    var chatbox = document.getElementById('fb-customer-chat');
        chatbox.setAttribute(&quot;page_id&quot;, &quot;...( my id )....  &quot;);
        chatbox.setAttribute(&quot;attribution&quot;, &quot;biz_inbox&quot;);
        
  // Facebook SDK for JavaScript inject code
  // Change language part to yours, e.g.: en_US &gt; pl_PL
  function injectFbSdkAsync(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/vi_VN/sdk/xfbml.customerchat.js';
          fjs.parentNode.insertBefore(js, fjs);
        }
  
  var fbMessengerFakeButton = document.getElementById('fb-messenger-fake-button');
  fbMessengerFakeButton.addEventListener('click', function() {
      
      
    // Once #fb-messenger-fake-button is clicked triggers animated spinner inside it 
    // See CSS, and SVG structure inside the button
    this.classList.add('active');
      
    // Inject the Facebook SDK in async manner:
    injectFbSdkAsync(document, &quot;script&quot;, &quot;facebook-jssdk&quot;);
  
    // Callback on Facebook SDK init, that fires up the Messenger plugin
    window.fbAsyncInit = function () {
       FB.init({
            xfbml            : true,
            version          : 'v11.0',
          });
          
  
      // Callback when Facebook SDK finish up with rendering
      FB.Event.subscribe(&quot;xfbml.render&quot;, function () {
      
        // Opening the Facebook Messenger
        FB.CustomerChat.show(true);
       
        // Hide the fake button, so that only the real one remains!
        fbMessengerFakeButton.style.display = 'none';
      });
    };
  });
  &lt;/script&gt;
  </code></pre>