Cara Membuat Live Counter Visitor dengan firebase

Live counter atau penghitung pengunjung aktif adalah fitur keren yang sering kita lihat di template premium seperti Plus UI. Kali ini kita akan membuat live visitor counter sendiri menggunakan Firebase Realtime Database dengan pengaturan aman.

Persiapan Project Firebase

1. Buat Project di Firebase

1. Buka Firebase Console dan buat project baru.
2. Pada menu Build → Realtime Database, buat database baru.
3. Pilih lokasi server (contoh: asia-southeast1) lalu klik Enable.

---

2. Atur Rules Database (Aman)

Masuk ke tab Rules dan gunakan aturan berikut:

{
  "rules": {
    "presence": {
      "$room": {
        "$uid": {
          ".read": true,
          ".write": "auth != null && auth.uid === $uid"
        }
      }
    },
    ".read": true,
    ".write": true
  }
}

Artinya:

• Hanya user yang login (auth != null) yang boleh menulis.
• Setiap user hanya bisa menulis di child miliknya (auth.uid === $uid).

---

3. Aktifkan Anonymous Authentication

1. Masuk ke menu Build → Authentication.
2. Klik Sign-in method → Aktifkan Anonymous.

Baca juga:

• 10 Aplikasi Wajib untuk Blogger
• Download Template Blogger Median UI
• Download Template Apmodi V2 Terbaru

---

4. Tambahkan Konfigurasi Firebase di Blog

Buka Theme → Edit HTML dan cari script konfigurasi. Tambahkan ini sebelum </body>:

<script>
  const plusConfig = {
    realViews: {
      databaseUrl: "https://NAMA-PROJECT-ID-default-rtdb.asia-southeast1.firebasedatabase.app/",
      abbreviation: "true"
    }
  };
</script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js"></script>
<script>
(function(){
  if(typeof plusConfig === 'undefined' || !plusConfig.realViews) return;
  const rv = plusConfig.realViews;
  const dbURL = rv.databaseUrl;
  const useAbbr = rv.abbreviation === "true";

  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    databaseURL: dbURL,
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);
  var db = firebase.database();

  // Sign in anonymously
  firebase.auth().signInAnonymously().catch(console.error);

  firebase.auth().onAuthStateChanged(function(user){
    if(!user) return;
    var uid = user.uid;
    var room = 'site-wide'; // bisa diganti per-post
    var userRef = db.ref('presence/' + room + '/' + uid);
    userRef.onDisconnect().remove();

    function heartbeat(){
      userRef.set({ uid: uid, lastSeen: firebase.database.ServerValue.TIMESTAMP });
    }
    heartbeat();
    setInterval(heartbeat, 20000);

    var presenceRef = db.ref('presence/' + room);
    presenceRef.on('value', function(snapshot){
      var val = snapshot.val() || {};
      var cutoff = Date.now() - 60000;
      var count = 0;
      for(var k in val){
        if(val[k].lastSeen >= cutoff) count++;
      }
      var el = document.getElementById('onlineCount');
      if(el) el.textContent = useAbbr ? abbreviateNumber(count) : count;
    });
  });

  function abbreviateNumber(num){
    if(num >= 1e6) return (num/1e6).toFixed(1)+'M';
    if(num >= 1e3) return (num/1e3).toFixed(1)+'K';
    return num;
  }
})();
</script>

5. Tambahkan Elemen Penampil Counter

Misal di bagian header atau sidebar:

<span id="onlineCount">0</span> Pengunjung Online

Catatan!

• Jangan pakai aturan .read: true dan .write: true di produksi.
• Pakai Anonymous Auth atau metode auth lain agar tidak ada penyalahgunaan.
• Gunakan node presence terpisah dari data sensitif lain.

Dengan cara ini, kamu punya Live Visitor Counter ala Plus UI yang lebih aman dan scalable. Selamat mencoba!

Faq post

Apakah Live Counter ini gratis?

Ya, kita menggunakan Firebase Realtime Database versi gratis (Spark Plan). Selama tidak melewati batas kuota gratis, layanan ini tidak dikenakan biaya.

Apakah aman menggunakan Anonymous Authentication?

Aman selama hanya digunakan untuk fitur ini dan tidak mengakses data sensitif. Anonymous Auth membantu mencegah siapa saja menulis data tanpa login.

Bisakah menghitung visitor per posting?

Bisa, cukup ubah nilai var room = 'site-wide'; menjadi var room = 'post-' + data:post.id; agar setiap posting memiliki ruang presence sendiri.

Apakah ini bisa dipasang di semua template Blogger?

Ya, selama template mendukung penambahan script JavaScript sebelum tag </body> dan Anda menambahkan elemen HTML <span id="onlineCount"> di tempat yang diinginkan.

---