Realtime View Counter untuk GitHub Page / Web Non Blogger

Cara Membuat Tulisan Artikel ini telah dibaca xxx kali - Realtime view counter untuk Blogger, sudah saya tulis pada artikel Membuat Blogger Realtime View Counter dengan Firebase. Akan tetapi ini tidak bisa digunakan untuk Non Blogger.

Realtime View Counter untuk GitHub Page / Web Non Blogger

DEMO

Untuk blog WordPress self hosted, sudah tersedia view counter ini, tinggal install plugin nya. Sesuai permintaan Mas Risky Badru, disini saya aplikasikan untuk Non Blogger. Bisa digunakan untuk GitHub Page, WordPress, JEckyll, PHP dan lain-lain.

Pertama, kalian harus sudah membuat Projek di Firebase, seperti pada postingan INI.

Kedua, template harus sudah tersimpan jQuery Library. Kalau belum silahkan simpan jQuery lib ini di atas </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js' type='text/javascript'/>

Ketiga, simpan kode ini di atas </body>.

<script>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://cdn.firebase.com/js/client/2.4.2/firebase.js\"></scr" + "ipt>");
//]]>
</script>	
<script>
    $.each($(".post-view[data-id]"), function(a, e) {
        var l = $(e).parent().find("#postviews").addClass("view-load"),
            i = new Firebase("https://sample.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 Firebase Projek yang sudah dibuat sebelumnya.

Keempat, untuk menampilkan penghitung simpan kode ini dimana saja. Terserah kalian menempatkannya.

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

Tiap halaman harus mempunyai data-id yang berbeda. Misalkan 1, 2,3 dst. Apabila masih ada pertanyaan silahkan share di kolom komentar.