Cara Membuat Views dan Like Menggunakan Firebase - rasgane

Get Started > Details

• Details
• Install

Deskripsi.

Views count merupakan metrik yang digunakan untuk mengukur seberapa sering halaman atau postingan yang diakses oleh pengunjung. dan Bottom Like mungkin merujuk pada elemen atau tombol "Like" yang ditempatkan di suatu postingan atau artikel yang bertujuan untuk meyampaikan renpon positif dari pengunjung.

Yang Minta kemarin.

Views Post V1.0.0

Menambahkan satuan rb(Ribu), jt(Juta), m(Miliar).

• 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"
  };

• Untuk untuk mendapatkan Config Firebase kalian bisa melihat postingan Mengambil URL Firebase dan Config Firebase.

• 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 post tidak boleh sama. tapi kalian juga bisa menggunakan post 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
*[-_-]*

Buttom Like Post V2.0.0

• 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>.

  const firebaseConfig = {
    apiKey: "xxxxxxxxxxx",
    authDomain: "xxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxx",
    projectId: "xxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxx",
    appId: "xxxxxxxxxxx"
  };
  
  firebase.initializeApp(firebaseConfig);
  const database = firebase.database();
  
  // Mendapatkan semua tombol "Like"
  const likeButtons = document.querySelectorAll('.like-button');
  
  // Menambahkan event listener ke setiap tombol "Like"
  likeButtons.forEach(button => {
    const dataId = button.getAttribute('data-id');
    const likeCount = button.querySelector('.like-count');
  
    // Mendapatkan jumlah like dari Firebase dan menampilkannya
    database.ref(`posts/${dataId}/likes`).on('value', snapshot => {
      const likes = snapshot.val() || 0;
  
      // Konversi likes lebih dari 1000 menjadi format "rb"
      if (likes >= 1000000000) {
        let likes_ = (likes / 1000000000).toFixed(0) + "m";
        likeCount.textContent = likes_;
      } else if (likes >= 1000000) {
        let likes_ = (likes / 1000000).toFixed(0) + "jt";
        likeCount.textContent = likes_;
      } else if (likes >= 1000) {
        let likes_ = (likes / 1000).toFixed(0) + "rb";
        likeCount.textContent = likes_;
      } else {
        likeCount.textContent = likes;
      }
    });
  
    // Menambahkan event click untuk menambahkan like
    button.addEventListener('click', () => {
      database.ref(`posts/${dataId}/likes`).transaction(currentLikes => {
        return (currentLikes || 0) + 1;
      });
    });
  });

• Pada firebaseConfig diatas kalian ganti dengan punya kalian.

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

• Untuk untuk mendapatkan Config Firebase kalian bisa melihat postingan Mengambil URL Firebase dan Config Firebase.

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

  <div class="like-button" data-id="[kode_id]">
    <div class="like-count">0</div> Like
  </div>

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

  <div class="like-button" expr:data-id="data:post.id">
    <div class="like-count">0</div> Like
  </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
*[-_-]*