Membuat Views Count menggunakan Firebase - rasgane

Get Started > Details

• Details
• Install

Deskripsi.

Untuk pembahasan tentang Views Count dan Firebase seharusnya kalian sudah memahami fungsi dan kegunaannya, jadi disini tidak akan dijelaskan kembali.

Untuk demo bisa kalian lihat di beberapa template buatan Rasgane, semua template tersebut menggunakan kode dari sini dan masih di gunakan sampai sekarang.

Dalam kode Views Count ada Versi lama dan Versi Baru.

Versi lama

Untuk versi lama biasanya hanya menggunakan URL Firebase saja. Dan untuk mendapatkan URL Firebase kalian bisa melihat postingan Mengambil URL Firebase dan Config Firebase

Versi 1

<span class="box_postviews">
  <span id='postviews' data-id="[ID_POST]">0</span> Views
</span>

Name	Deskripsi
[ID_POST]	isi dengan ID, bebas asal tidak sama.

jika menggunakan Blogger bisa juga menggunakan Id postingan. dan akan menjadi seperti ini.

<span class="box_postviews">
  <span id='postviews' expr:data-id="data:post.id">0</span> Views
</span>

Dan untuk kode Javascriptnya seperti ini.

const Firebase_url = '[FIREBASE_URL]';
const loadFirebaseScript=()=>{const e=document.createElement("script");e.src="https://cdn.firebase.com/v0/firebase.js",e.type="text/javascript",document.head.appendChild(e),e.onload=runMainCode},runMainCode=()=>{document.querySelectorAll('span[id="postviews"]').forEach(e=>{const t=e.getAttribute("data-id"),a=`${Firebase_url}/Posts/${t}`,n=new Firebase(a);n.once("value",a=>{let o=a.val(),i=!1;null===o&&(o={value:0,url:window.location.href,id:t},i=!0),e.textContent=o.value++,"/"!==window.location.pathname&&(i?n.set(o):n.child("value").set(o.value))})})};loadFirebaseScript();

Name	Deskripsi
[FIREBASE_URL]	isi dengan Url Firebase.

Versi 2

Kode ini menggunakan Jquery, jadi pastikan sudah memasang Jquery.

<span class="box_postviews"><a expr:name='data:post.id'/> <span id="postviews"></span></span>

Letakan CDN Firebase ini diatas kode Firebase

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>

$.each($('a[name]'), function(i, e) {
  var elem = $(e).parent().find('#postviews');
  var blogStats = new Firebase("[FIREBASE_URL]/pages/id/" + $(e).attr('name'));
  blogStats.once('value', function(snapshot) {
    var data = snapshot.val();
    var isnew = false;
    if (data == null) {
      data = {};
      data.value = 0;
      data.url = window.location.href;
      data.id = $(e).attr('name');
      isnew = true;
    }
    elem.text(data.value);
    data.value++;
    if (window.location.pathname != '/') {
      if (isnew)
        blogStats.set(data);
      else
        blogStats.child('value').set(data.value);
    }
  });
});

Name	Deskripsi
[FIREBASE_URL]	isi dengan Url Firebase.

Referensi :
https://www.quora.com/How-can-I-add-a-view-count-for-each-post-in-Blogger

Versi baru

Untuk versi baru menggunakan Config Firebase. Dan untuk mendapatkan Config Firebase kalian bisa melihat postingan Mengambil URL Firebase dan Config Firebase

Versi 1

• Letakkan kode ini di atas </head>.

  <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-database.js"></script>

• Dan letakkan kode javascript dibawah diatas </body>

  // Konfigurasi Firebase Anda
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxx",
    authDomain: "xxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxx",
    projectId: "xxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxx",
    appId: "xxxxxxxxxxx"
  };
  
  firebase.initializeApp(firebaseConfig);
  
  // Dapatkan ID post dari URL atau tempat lain
  var postId = document.querySelector('#viewsCount').dataset.id; // Ganti dengan ID post yang sesuai
  
  // Referensi ke path yang ingin Anda lacak (misalnya, "posts/{postId}/views")
  var viewsCountRef = firebase.database().ref('posts/' + postId + '/views');
  
  // Fungsi untuk menambah jumlah tampilan saat halaman dimuat
  viewsCountRef.transaction(function(currentViews) {
    // Menambah jumlah tampilan
    return (currentViews || 0) + 1;
  });
  
  // Memperbarui tampilan jumlah tampilan saat halaman dimuat
  viewsCountRef.on('value', function(snapshot) {
    var views = snapshot.val();
  
    // Konversi views lebih dari 1000 menjadi format "rb"
    if (views >= 1000000000) {
      var formattedViews = (views / 1000000000).toFixed(0) + "m";
      document.getElementById('viewsCount').textContent = formattedViews;
    } else if (views >= 1000000) {
      var formattedViews = (views / 1000000).toFixed(0) + "jt";
      document.getElementById('viewsCount').textContent = formattedViews;
    } else if (views >= 1000) {
      var formattedViews = (views / 1000).toFixed(0) + "rb";
      document.getElementById('viewsCount').textContent = formattedViews;
    } else {
      document.getElementById('viewsCount').textContent = views;
    }
  });

• Pada firebaseConfig diatas kalian ganti dengan punya kalian.

  var firebaseConfig = {
    apiKey: "xxxxxxxxxxx",
    authDomain: "xxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxx",
    projectId: "xxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxx",
    appId: "xxxxxxxxxxx"
  };

• Dan letakan kode HTML ini di mana saja tapi harus di dalam postingan atau artikel.

  <div>Jumlah Tampilan: <span id="viewsCount" data-id="[kode_id]">0 Views</span></div>

• pada data-id kalian bebas ini dengan id apa saja dengan syarat tiap postingan tidak boleh sama. tapi kalian juga bisa menggunakan postingan id blogger yaitu data:post.id dan jadinya akan seperti ini.

  <div>Jumlah Tampilan: <span id='viewsCount' expr:data-id='data:post.id'>0 Views</span></div>

Referensi :
https://firebase.google.com/
https://id.quora.com/Apa-maksud-dari-simbol-k-dalam-penulisan-angka-ribuan-misal-10-000-10K
https://www.dimassetiawan.com/finance/153/arti-mio-dan-bio-istilah-mata-uang-untuk-valuasi-startup
*[-_-]*

Versi 2

Versi ini sudah menggunakan SDK Firebase versi yang terbaru.

• Letakkan kode javascript dibawah diatas </body>

  <script type='module'>
    // Import Firebase SDK
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js';
    import { getDatabase, ref, update, get } from 'https://www.gstatic.com/firebasejs/10.11.1/firebase-database.js';
  
    // Your Firebase Config
    const firebaseConfig = {
      apiKey: "xxxxxxxxxxx",
      authDomain: "xxxxxxxxxxx",
      databaseURL: "xxxxxxxxxxx",
      projectId: "xxxxxxxxxxx",
      storageBucket: "xxxxxxxxxxx",
      messagingSenderId: "xxxxxxxxxxx",
      appId: "xxxxxxxxxxx"
    };
    const app = initializeApp(firebaseConfig);
  
    // Function to add views to a post
    async function addViews() {
      const postId = document.getElementById('viewsCount').dataset.idpost;
      const postRef = ref(getDatabase(app), 'posts/' + postId);
  
      // Get current views data
      const snapshot = await get(postRef);
      let views = (snapshot.val() && snapshot.val().views) || 0;
  
      // Increment views by 1
      views++;
  
      // Update the new views count
      await update(postRef, { views: views });
  
      // Update the views count on the page
      document.getElementById('viewsCount').innerText = 'Views: ' + views;
    }
  
    // Example usage: Add views for a post with a specific ID
    addViews();
  </script>

• Pada firebaseConfig diatas kalian ganti dengan punya kalian.

  const firebaseConfig = {
    apiKey: "xxxxxxxxxxx",
    authDomain: "xxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxx",
    projectId: "xxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxx",
    appId: "xxxxxxxxxxx"
  };

• Dan letakan kode HTML ini di mana saja tapi harus di dalam postingan atau artikel.

  <span id="viewsCount" data-idpost="[ID_POST]">Views: Loading...</span>

• pada data-id kalian bebas ini dengan id apa saja dengan syarat tiap postingan tidak boleh sama. tapi kalian juga bisa menggunakan postingan id blogger yaitu data:post.id dan jadinya akan seperti ini.

  <span id="viewsCount" expr:data-idpost="data:post.id">Views: Loading...</span>