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:
Facebook chat plugin "kills" Pagespeed to 33
. I followed the instructions and it worked fine, until the function FB.Event.subscribe ("xfbml.render", function() {.....} didn't work.
i'm a novice, am i missing the code, or something? Please help. thank
here is my html and js code
<button id="fb-messenger-fake-button">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 1024 1024" aria-hidden="true">
<circle fill="#00B2FF" style="fill: var(--msgr-color, #00B2FF)" cx="512" cy="512" r="512"/>
<g id="spinner" fill="#fff"><circle cx="512" cy="239" r="47"/><circle cx="375" cy="275" r="47" fill-opacity="0.9"/><circle cx="275" cy="375" r="47" fill-opacity="0.8"/><circle cx="239" cy="512" r="47" fill-opacity="0.7"/><circle cx="275" cy="649" r="47" fill-opacity="0.6"/><circle cx="375" cy="749" r="47" fill-opacity="0.5"/><circle cx="512" cy="785" r="47" fill-opacity="0.4"/><circle cx="649" cy="749" r="47" fill-opacity="0.3"/><circle cx="749" cy="649" r="47" fill-opacity="0.2"/><circle cx="785" cy="512" r="47" fill-opacity="0.1"/></g>
<path id="logo" fill="#fff" d="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"/>
</svg>
</button>
<!-- Messenger Chat plugin Code -->
<div id="fb-root"></div>
<div id="fb-customer-chat" class="fb-customerchat">
</div>
<script>
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute("page_id", "...( my id ).... ");
chatbox.setAttribute("attribution", "biz_inbox");
// Facebook SDK for JavaScript inject code
// Change language part to yours, e.g.: en_US > 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, "script", "facebook-jssdk");
// 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("xfbml.render", function () {
// Opening the Facebook Messenger
FB.CustomerChat.show(true);
// Hide the fake button, so that only the real one remains!
fbMessengerFakeButton.style.display = 'none';
});
};
});
</script>
