Cara Membuat Views dan Like Menggunakan Firebase - rasgane

Penjelasan

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.

• Results
• Code

Views Post V1.0.0

V1.0.0

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

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>

2. 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;
  }
});

3. 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 mengambil firebaseConfig kalian bisa perhatikan video ini.

https://www.youtube.com/embed/5cTis_1-ulA

4. 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
*[-_-]*

• Results
• Code

Buttom Like Post V2.0.0

V2.0.0

• Multi buttom (Bisa Lebih dari 2 dalam 1 tempat).

V1.0.0

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

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>

2. 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;
    });
  });
});

3. 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 mengambil firebaseConfig kalian bisa perhatikan video ini.

https://www.youtube.com/embed/5cTis_1-ulA

4. 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" 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
*[-_-]*