rasgane

Cara Membuat Views dan Like Menggunakan Firebase

Cara Membuat Views dan Like Menggunakan Firebase

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
*[-_-]*
pin
Comment Yukine
Yukine Juni 04, 2023
Test Pin Comment Blogger

Komentar

  1. MAGIC Reincarnated
    bang Kodeku outputnya aneh,
    10.000 output jadi 10.0K, yang kuharapkan itu 100K, tetapi ketika ada angka 1-9 diangka decimal nya.

    contoh
    10.100 menjadi 10.1K
    function NFrtBookmark(nZeroBook) {
    if (nZeroBook >= 1000000000) {
    return (nZeroBook / 1000000000).toFixed(1) + 'Miliar';
    } else if (nZeroBook >= 1000000) {
    return (nZeroBook / 1000000).toFixed(1) + 'Juta';
    } else if (nZeroBook >= 1000) {
    return (nZeroBook / 1000).toFixed(1) + 'K';
    } else {
    return nZeroBook.toString();
    }
    }
    console.log(NFrtBookmark(10000));
    1. MAGIC Reincarnated
      angka 0 harus hilang dan angka 1-9 gak hilang

      100.000 jadi 100K
      10.000 jadi 10K

      100.100 jadi 100.1K
      10.100 jadi 10.1K

      gimana caranya ya?
    2. Yukine
      mungkin seperti ini function NFrtBookmark(nZeroBook) {
      if (nZeroBook === 0) {
      return 0;
      } else if (nZeroBook >= 1000000000) {
      const formatted = (nZeroBook / 1000000000).toFixed(1);
      return formatted.endsWith('.0') ? formatted.slice(0, -2) + 'M' : formatted + 'M';
      } else if (nZeroBook >= 1000000) {
      const formatted = (nZeroBook / 1000000).toFixed(1);
      return formatted.endsWith('.0') ? formatted.slice(0, -2) + 'JT' : formatted + 'JT';
      } else if (nZeroBook >= 1000) {
      const formatted = (nZeroBook / 1000).toFixed(1);
      return formatted.endsWith('.0') ? formatted.slice(0, -2) + 'K' : formatted + 'K';
      } else {
      return nZeroBook;
      }
      }

      console.log(NFrtBookmark(0)); // Output: 0
      console.log(NFrtBookmark(1000)); // Output: 1K
      console.log(NFrtBookmark(1100)); // Output: 1.1K
      console.log(NFrtBookmark(10000)); // Output: 10K
      console.log(NFrtBookmark(10500)); // Output: 10.5K
      console.log(NFrtBookmark(100900)); // Output: 100.9K
      console.log(NFrtBookmark(100000)); // Output: 100K
      console.log(NFrtBookmark(100100)); // Output: 100.1K
      console.log(NFrtBookmark(1000000)); // Output: 1JT
      console.log(NFrtBookmark(1100000)); // Output: 1.1JT
    3. MAGIC Reincarnated
      yep seperti itu, berhasil. makasih bang
  2. Wernayasa
    Makasih dah dibuatkan.
  3. Kai Haruto
    Trima kasih @Yukine
    Codenya udah kucoba

Untuk Tutorial Pemasangan License bisa gunakan <i rel='Tutor1'>Tutor</i>
Untuk Cek Member bisa gunakan <i rel='CekMember'>Cek Member</i>
Untuk Menyisipkan Gambar bisa gunakan <i rel='img'>URL_IMAGE</i>
Untuk Menyisipkan Video/Iframe bisa gunakan <i rel='video'>URL_video</i>
Untuk Menyisipkan syntax highlighter bisa gunakan <i rel='kode'>Kode yang sudah di parse</i>