Cara Membuat Views dan Like Menggunakan Firebase

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>
```

Comments

MAGIC ReincarnatedOctober 21, 2023
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));
ReplyDelete
Replies
WernayasaOctober 23, 2023
Makasih dah dibuatkan.
ReplyDelete
Replies
Kai HarutoOctober 24, 2023
Trima kasih @Yukine
Codenya udah kucoba
ReplyDelete
Replies
WernayasaDecember 19, 2023
Koreksi.
Kurang expr di tombol like: data-id="data:post.id"
Untuk like button tidak ada event. Bisa tolong cek apa masalahnya.
Demo
ReplyDelete
Replies

Add comment