Membuat Page View Counter di Postingan Blog

Table of Contents

Page view counter adalah menghitung semua pengunjung yang membaca artikel Anda. Page view counter sebenarnya sudah ada pada dashboard blogger, yakni terletak pada menu tata letak blog. Page view counter sendiri sering digunakan pada WordPress.

Namun, artikel berikut saya akan berbagi tutorial membuat page view counter di blogger dan dibantu dengan data base dari firebase.

Karena template saya menggunakan blogger dan firebase merupakan salah satu produk dari google yang nantinya bisa Anda dapatkan scriptnya melalui email Anda.

Membuat dan memasang auto page view counter di blogger.

Langkah pertama yang harus Anda lakukan adalah membuat Firebase. Buka firebase > Kemudian buat project > Akan muncul Pop-up > Isikan

1. Nama proyek: Isi sesuai nama project
2. ID Proyek: Akan otomatis menyesuaikan dengan nama proyek
3. Pilih negara/wilayah: Indonesia
4. Perjanjian Lisensi: pilih semua
5. Kemudian buat project

Jika sudah menerapkan langkah ke 4, selanjutnya Database, Create dan pilih start and test mode.

Jika sudah pilih menu Database, klik scroll ke realtime, Database, Data, kemudian salin. Isikan value databasenya pada langkah ke 4

// These rules require authentication
{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Selanjutnya, memasang firebase di blogger

• Buka blogger
• Masuk dashboard, Tema, Edit HTML
• Copy script dibawah ini, lalu pastekan diatas ]]></b:skin>

.post-view{font-size: 12px;}
.post-view>i{padding-right:5px;font-size:98%;}

Kemudian salin script dibawah ini, pastekan diatas </body> atau gunakan CTRL+F agar lebih mudah.

<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>
<script 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://my-website-id.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>

Note: Ganti yang bertanda merah dengan ID firebase Anda yang sebelumnya Anda buat.

Selanjutnya letakan script dibawah ini sesuai keinginan Anda:

<span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> Dilihat <span class='view-load' id='postviews'>0</span> kali</span>

Biasanya page view counter terletak di bagian Post, Comment, Autor dan lainnya. Itulah cara membuat page view counter di postingan blog. Kurang dan lebihnya artikel ini akan kami update di lain waktu. Semoga bermanfaat.