Membuat Blogger Realtime View Counter dengan Firebase

Setelah hampir 2 Minggu Count API tidak kunjung ada penyelesaian, tentunya harus ada solusi bagi yang inin memasang Visitor Counter atau View Conter pada Postingan Blog

Pada postingan kali ini saya akan menjelaskan Bagaimana Cara Memasang View Counter pada Postingan Blog dengan menggunakan Firebase. Disini saya akan menjelaskan 3 Hal, yaitu Cara pembuatan database di Firebase, Cara Edit Template dan Cara Kustomisasi JavaScript.

Cara Membuat akun Firebase untuk Visitor (View) Counter

Sebetunya ketika sudah memiliki email dari GMail dan login di browser, otomatis sudah punya akun Firebase. Anda tinggal membuka Konsol saja. Berikut ini langkah demi langkah pembuatan database

Pembuatan Projek

1. Login ke firebase.google.com
2. Klik Mulai atau Buka Konsol
3. Klik Add Project

firebase

4. Beri nama Projek, silahkan bebas kasih nama apa saja

firebase

5. Klik Continue

firebase

6. Boleh menggunakan akun yang ada, atau Create new account

firebase

7. Centang I accept Google Analytic term kemudian Create project (untuk nama negara boleh ganti atau tidak)

firebase

8. Pembuatan Projek selesai, lanjut ke pembuatan Database

firebase

Pembuatan Database Firebase

1. Klik Build > Realtime Database

firebase

2. Klik Create Database

firebase

3. Klik Next (server tidak usah dirubah US-central-1)

firebase

4. Klik Start in test mode klik Enable

firebase

5. Klik Rules dan tampilan akan seperti gambar

firebase

6. ganti Rules dengan kode ini

{
  "rules": {
    ".read": "true",
    ".write": "true",
  }
}

Sehingga tampilan seperti gambar kemudian klik Publish

firebase

7. Copy URL Firebase Anda (atau boleh copy nanti)

firebase

Sampai di sini pembuatan Database selesai. Lanjut ke Template Blogger

Edit Template Blogger

1. Simpan JavaScript ini di atas </body>

<script src='//cdn.firebase.com/js/client/2.4.2/firebase.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js' type='text/javascript'/>    
    <script async='async' type='text/javascript'>
    //<![CDATA[
    $.each($(".post-view[data-id]"), function(a, e) {
        var l = $(e).parent().find("#postviews").addClass("view-load"),
            i = new Firebase("https://link-anda-default-rtdb.firebaseio.com/pages/id/" + $(e).attr("data-id"));
        i.once("value", function(a) {
            var n = a.val(),
                t = !1;
            null == n && (n = {}, n.value = 0, n.url = window.location.href, n.id = $(e).attr("data-id"), t = !0), l.removeClass("view-load").text(n.value), n.value++, "/" != window.location.pathname && (t ? i.set(n) : i.child("value").set(n.value))
        })
    });
    //]]>
</script> 

Ganti yang saya tandai dengan URL Database Firebase yang tadi di copy, atau kembali ke halaman Firebase kemudian copy

2. Simpan kode HTML ini, dimana View Counter akan di tampilkan. (Bisa gunakan inspect element, untuk penempatan kode yang tepat)

<span class='post-view' expr:data-id='data:post.id' style='margin-left:40px'>
    <svg class='line' fill='none' height='20px' stroke='gray' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25' viewBox='0 0 27 13' width='20px' xmlns='http://www.w3.org/2000/svg'><g transform='translate(2.000000, 4.000000)'><path d='M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z'/><path d='M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z'/></g></svg>
    <span class='view-load' id='postviews'/> Views
</span>

Kalau ingin menghilangkan icon Mata dan diganti dengan teks, tinggal ubah seperti ini

<span class='post-view' expr:data-id='data:post.id'>
    Artikel ini telah dibaca sebanyak
    <span class='view-load' id='postviews'/> kali
</span>

Pemasangan selesai, selanjutnya sering ada beberapa pertanyaan mengenai View Counter ini (FAQ)

Demo View Counter

FAQ

Sama tidak jumlah view, dengan view yang ada di dashboard Blogger?
Tidak, karena berbeda database. Penghitungan akan dimuali dari ketika Anda memasang Script ini
Bisa tidak disamakan dengan dashboard Blogger?
Bisa saja, dengan beberapa pengaturan. Artinya kita buat manual dulu, baru nanti diotomatiskan.
Ketika Script ini baru dipasang, postingan yang baru kita buka menunjuk angka 0. Bisa dirubah?
Bisa. Pada Script di atas, ganti kode n.value = 0 dengan angka yang diinginkan. Misal menjadi n.value = 8, maka setiap postingan yang baru dibuka View-nya menunjukan angka 8.
Setiap kita buka postingan akan menambah view 1. Bisa dirubah?
Bisa, inilah maksud saya untuk menyesuaikan dengan dashboard Blogger. Yang perlu di rubah adalah n.value++. Sedikit pengatahuan saja, dalam bahasa C++ ketika membaca n.value++ artinya n.value + 1. Maka untuk merubahnya gunakan kode n.value += 5 artnya ditambahkan 5.

Penjelasannya seperti ini, ketika kita set n.value = 10 dan n.value += 5, maka ketika halaman itu kita buka untuk pertama kalinya akan menunjukan angka 10, ketika di reload bertambah 5, menjadi 15, reload menjadi 20 dst. Silahkan gunakan cara ini untuk menyesuakan dengan View yang ada di Dashboard Blogger. Setelah sesuai, kembalikan kode ke default untuk penambahan 1 view saja.

Ada yang lebih simple tidak untuk menyamakan dengan dashboard Blogger?
Ada, masuk ke Konsol. Kemudian buka Realtime Database, lihat Data dan sesuaikan id Postingan... Rubah angka Value, kemudian enter.

firebase
Saya malas membuat Database di Firebase. Bisa tidak menggunakan database orang lain?
Bisa saja, tetapi Anda tidak bisa edit Database. Dan ketika pemilik database menghapus databasenya, atau merubah pengaturan, maka counter view anda akan hilang.

Apabila masih ada kekurangan, masukan atau pertanyaan, silahkan share di kolom komentar....

Berita Lebih Baru Berita Lebih Lama
  • Amir
    Profil: https://www.blogger.com/profile/05062274712424026395
    12 Mei, 2023

    nice tutorial kang, di blogspot juga jadi bisa menambah fitur view counter layaknya web hosting independen

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      12 Mei, 2023

      iya mas... lumayan buat nambah semangar aja biar viewnya banyak

  • Komptik.
    Profil: https://www.blogger.com/profile/12539447420583352703
    18 Mei, 2023

    Kang, saya udah berhasil create dan taro di postingan blog, tapi View counter saya belum ada datanya, masih tulisan views aja. Apa perlu waktu ya kang buat muncul data?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      19 Mei, 2023

      Komentar ini telah dihapus oleh Kang Ismet sebagai penulis.

    • Komptik.
      Profil:https://www.blogger.com/profile/12539447420583352703
      19 Mei, 2023

      Sudah bisa kang, terima kasih. :)
      Ada salah pasang id firebasenya

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      19 Mei, 2023

      Oke siap mas

  • Milaffy
    Profil: https://www.blogger.com/profile/14932386651175124805
    08 Juni, 2023

    bang, kl kita mau taruh di hompage saja bgmn... bukan di postingannya...

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Maret, 2024

      pake tag kondisonal aja

    • Jarot
      Profil:https://www.blogger.com/profile/03131182640227154198
      18 April, 2024

      Ccaranya gimana kang

  • San Muliadi
    Profil: https://www.blogger.com/profile/08757814308951407798
    13 Juni, 2023

    Kodenya kurang lengkap Kang, jquery dan Sdk firebasenya tidak dicantumkan

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Maret, 2024

      oh iya.. makasih mas... sya udah update

  • Han Farhan
    Profil: https://www.blogger.com/profile/05826918822005935931
    18 Agustus, 2023

    lengkap banget pembahasannya, mantap kang

  • Abu Sa'ad
    Profil: https://www.blogger.com/profile/17871062101098813340
    11 September, 2023

    Mas aku udah bikin. Tapi kok tampilannya hanya Views; tidak ada angkanya. Masalahnya dimana ya?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Maret, 2024

      sudah saya update, ada yang ketinggalan

  • Risky Badru
    Profil: https://www.blogger.com/profile/05579029023215425612
    09 Maret, 2024

    Kalau untuk di Blogger work kang, saya punya Github page, saya coba script ini ga bisa ya? ada solusi?

  • Balikpapanbuzz
    Profil: https://www.blogger.com/profile/06790850531342585583
    17 Maret, 2024

    padahal sudah muncul tapi thumbnail gambar malah pada hilang

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      17 Maret, 2024

      cek lagi kode penempatan

    • Balikpapanbuzz
      Profil:https://www.blogger.com/profile/06790850531342585583
      18 Maret, 2024

      kodemya sudah benar diatas body bang

    • Jarot
      Profil:https://www.blogger.com/profile/03131182640227154198
      18 April, 2024

      Komentar ini telah dihapus oleh Jarot sebagai penulis.

  • Yandi Mulyadi
    Profil: https://www.blogger.com/profile/05345801809802904880
    20 April, 2024

    Kang,saya pakai template Median. Tapi komentar blogger kadang muncul kadang ngga, kira-kira kenapa ya kang?

  • Yandi Mulyadi
    Profil: https://www.blogger.com/profile/05345801809802904880
    20 April, 2024

    Kang, counternyta ngga jalan d website saya euy

    • Yandi Mulyadi
      Profil:https://www.blogger.com/profile/05345801809802904880
      20 April, 2024

      Ini webnya kang, chimul.my.id

  • OKAYIM COM
    Profil: https://www.blogger.com/profile/07681409783842577579
    25 April, 2024

    Gan rekes tutorial membuat page login dan register mirip kaya fitur di blog wendicode

    Salam dari saya Okayim.com

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      26 April, 2024

      kayaknya penjelasan di wendycode udah jelas ya

  • Sodikin Kurniawan
    Profil: https://www.blogger.com/profile/09325774355575553519
    10 Mei, 2024

    Bisa gak kalau ditampilkan di widget HTML bukan di dalam post, untuk panggilan postID ?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      02 September, 2024

      Berarti pake ID Blog, dicoba aja

  • Saiful Afrirudin
    Profil: https://www.blogger.com/profile/07747096298436484627
    03 September, 2024

    bisa gak diterapin ke wordpress?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      03 September, 2024

      kalau self hosted pasti bisa, tinggal menentukan data-id

    • Saiful Afrirudin
      Profil:https://www.blogger.com/profile/07747096298436484627
      03 September, 2024

      data-id ini mksdnya gimana bang? masih belum paham sya

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      03 September, 2024

      Kalau di blogger kan ada ID post / page. bisa dimunculkan dengan data:post.id, nah kalau WP saya belum faham id halaman, lengkapnya tinggal mendapatkan ID nya <span class='post-view' data-id='data:post.id'>
      Artikel ini telah dibaca sebanyak
      <span class='view-load' id='postviews'/> kali
      </span>

  • Tio_DP
    Profil: https://www.blogger.com/profile/08797266169450621141
    20 Oktober, 2024

    sudah saya coba dan work.. makasih broo..

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      20 Oktober, 2024

      Sip.... mantap mas :top

  • Erwin Widianto
    Profil: https://www.blogger.com/profile/10616962578702375720
    30 Oktober, 2024

    Bang saat gimana caranya supaya tampilan mata sama nomornya itu sejajar, ini hasilnya jadi icon matanya agak kebawah tidak sejajar dengan nomor

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      04 November, 2024

      kayaknya ada CSS yang bentrok... bisa diakali, angkat dikit dengan margin mas.. .post-view svg {width:16px;height:16px;margin-bottom:1px;}

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
34 Komentar