Facebook Chat eklentisini Javascript koduyla geciktirmek

Facebook Chat eklentisi, ziyaretçilerine Facebook Messenger üzerinden hizmet sunmak isteyen geliştiriciler ve eticaret sayfaları için bire bir. Facebook Chat eklentisi, direkt olarak Facebook Sayfa yöneticisi üzerinden eklenebildiği gibi Facebook Developer üzerinden App oluşturarak da kullanılabiliyor. Facebook Chat eklentisini sayfa yöneticisinden eklemek;

Messenger'i internet sitesine ekle seçeneği ile, adımları takip ederek web sitenize eklentiyi kurabilirsiniz. Adımları tamamladığınızda;

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_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

yukarıdaki gibi bir kod öbeği alacaksınız. Bu öbek, Facebook Messenger Chat Eklentisini web sitenize ekleyebilmeniz için gereken kodlardır. Bu kod öbeğini tag manager üzerinden web sitenize ekleyemiyorsunuz. Tag manager üzerinden Facebook Chat eklentisini ekleyebilmeniz için Facebook Developer üzerinden uygulama oluşturmanız ve o uygulamayı entegre etmeniz gerekiyor. Şuan Covid nedeniyle Facebook uygulamalarında gecikmeler olduğunu düşünecek olursanız, uygulama oluşturarak chat eklentisini eklemeniz biraz uzun sürebilir. Bu nedenle en hızlı ve en basit yöntem; sayfa ayarları üzerinden chat eklentisini eklemeniz olacaktır. Ancak bu durumda bir handikap oluşuyor. Facebook tarafından size verilen kod eklentisini sitenize eklediğiniz an, otomatik olarak web sitenizin extrenal bir javascript çalıştırmasına neden oluyorsunuz ve web sitenizin açılış hızlarında gecikmelere sebep oluyor ister istemez. Tag Manager üzerinden eklediğiniz her hangi bir kod öbeği veya bağlantılara geciktirici ekleyerek bu durumu aşabilirsiniz ancak direkt olarak kod eklediğinizde bu durum biraz can sıkıyor. Facebook tarafından size sağlanan kod'a ekstra bir satır kod ekleyerek dilediğiniz kadar Facebook Chat Eklentisini geciktirebilirsiniz. Facebook Chat eklentisini geciktirmek için gereken kod;

var delayInMilliseconds = 7500;

Yukarıdaki kod içerisinde yer alan 7500 milisaniyelik bir gecikme, web sitenizin yükleme başlanmasından sonra geçecek olan 7.5 saniyeyi temsil eder. 5 saniyelik bir gecikme isterseniz 5000, 10 saniyelik bir gecikme isterseniz 10000 olarak değiştirerek kodlarınızın arasına eklemeniz yeterli gelecektir. Yukarıdaki kodun yaptığı tek şey; mevcut Facebook javascriptinin belirlediğiniz oranda gecikmeli olarak çalışmasını sağlamak. Peki nereye ve nasıl ekleyeceksiniz; Öncelikle yukarıdaki kod tek başına çalışmayacaktır. Kod ile birlikte fonksiyon belirlenmesi gereklidir.

var delayInMilliseconds = 7500; setTimeout(function()

Fonksiyonun içerisine komple Facebook Chat eklenti kodlarını almalıyız ki, otomatik olarak tüm Facebook fonksiyonu doğru olarak çalışsın. Toparlamak gerekirse; Facebook'tan aldığımız kodları yeni oluşturduğumuz fonksiyonun içerisine alıyoruz. Böylelikle oluşturduğumuz fonksiyon, belirlediğimiz gecikme sonrasında çalışacak ve web sitemizin açılma sürelerine etki etmeyerek, Google PageSpeed ve GTMetrix gibi hız ölçümlerinde puan düşüklüklerine sebep olmayacak.

var delayInMilliseconds = 7500; 
setTimeout(function() {  { köşeli parantez ile açtık 
        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_US/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
      }, delayInMilliseconds);