Cara Memasang Posts Viewed dengan Firebase di Blogspot

Diterbitkan Oleh Muaz Ramdany September 04, 2017 Loading... views 6 Komentar

Memasang posts viewed (postingan di lihat) di blogspot ini gampang-gampang sulit menurut saya hehe, sobat bisa gunakan data penyimpanan (database) dengan firebase untuk menyimpan jumlah pengunjung yang melihat postingan yang telah di terbitkan di blog pribadi sobat secara realtime.

Sebelum memulai pemasangan di blog sobat, saya merekomendasikan untuk memahami tulisan yang saya tuliskan di bawah ini agar di blog sobat bisa berjalan secara efektif dan tidak terjadi error atau kasus tidak tampil (not work).

Baik saya akan langsung saja.

Pertama kunjungi https://firebase.google.com/?hl=id dan lakukan pendaftaran jika belum memiliki akun atau sebaliknya.

Selanjutnya tambahkan proyek di halaman selamat datang dan isi sesuai yang di ingikan sobat. seperti contoh gambar di bawah ini :


Dan lakukan pengaturan untuk akses database sobat, seperti gambar di bawah ini :


Atau sobat bisa copy dan paste kode di bawah ini

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

Jika persiapan sudah siap, sekarang tinggal pemasangan di blog.

Sekarang sobat beralih ke Tema > Edit HTML dan lompati ke Widget Blog1 terus temukan dimana postingan sobat di looping seperti contoh di bawah ini pada template saya  


Lihat contoh gambar di atas terdapat class posts, itu adalah element pertama untuk tampilan posting yang nantinya di tampilkan lebih dari satu seperti contoh di gambar di bawah ini


Jika sudah memahaminya, selanjutnya sobat menentukan dimana posisi element Posts Viewed yang ingin sobat tampilkan di postingan, contoh kasus pada template saya, saya memasang nya di bawah judul postingan dengan tampilan seperti contoh di bawah ini

Dan kode html nya seperti di bawah ini


Lihat gambar di atas terdapat id="js-post-viewer" itu adalah element yang nanti nya di eksekusi oleh javascript dan jquery untuk menampilkan Posts Viewed. sobat bisa menyamakan element tersebut di template pribadi sobat atau bisa copy dan paste di bawah ini

<span id='js-post-viewer'> <i class='fa fa-eye'/> <abbr class='posts-viewer'>Loading...</abbr> views</span>

Sekarang  copy dan paste kode dibawah ini di dalam <head> atau di dalam <body> satu saja bebas mau di <head> atau di <body>

<!--Firebase Posts Views-->
<script defer="defer" type="text/javascript">//<![CDATA[
/* Firebase URL untuk menampilkan posts views */
var firebaseInit = false; // set true || false
var firebaseHost = "https://url-firebase-sobat/bebas/";
//]]></script>

<b:if cond='data:blog.pageType in {"item", "index"}'>
 <script defer="defer" type="text/javascript">//<![CDATA[
  if(firebaseInit == true) {
   document.write('<scr'+'ipt defer="defer" src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></scr'+'ipt>')
  }
  else {
   window.addEventListener('DOMContentLoaded',function(){(function($){$(document).ready(function(){
    $('.posts').each(function(){
     $(this).find('#js-post-viewer').remove();
    });
   })})(jQuery)})
  }
 //]]></script>
</b:if>

<b:if cond='data:blog.pageType in {"item"}'>
 <script defer="defer" type="text/javascript">//<![CDATA[
 if(firebaseInit == true) {
 window.addEventListener('DOMContentLoaded',function(){(function($){$(document).ready(function(){
  /* In Items */
  $('.posts').each(function() {
   var _this = $(this),
    title = _this.find('.entry-title > a').text().trim(),
    firebasURL = firebaseHost,
    firebase = new Firebase(firebasURL + title);
   firebase.transaction(function(data) {
    if(data == null) {
     return data = 1;
    }
    else {
     return data +1;
    }
   });
   firebase.on('value', function(data) {
    if(data.val() == null) {
     var count = 0;
    }
    else {
     var count = data.val();
    }
    setTimeout(function(){
     _this.find('.posts-viewer').html(count);
    }, 500);
   });
  });
 })})(jQuery)})
 }
 //]]></script>
 
<b:else/>

 <b:if cond='data:blog.pageType in {"index"}'>
 <script defer="defer" type="text/javascript">//<![CDATA[
 if(firebaseInit == true) {
 window.addEventListener('DOMContentLoaded',function(){(function($){$(document).ready(function(){
  /* In Index */
  $('.posts').each(function(){
   var _this = $(this),
    title = _this.find('.entry-title > a').text().trim(),
    firebasURL = firebaseHost,
    firebase = new Firebase(firebasURL + title);
   firebase.transaction(function(data) {
    if(data == null) {
     return data = 0;
    }
    else {
     return data;
    }
   });
   firebase.on('value', function(data) {
    if(data.val() == null) {
     var count = 0;
    }
    else {
     var count = data.val();
    }
    setTimeout(function(){
     _this.find('.posts-viewer').html(count);
    }, 500);
   });
  });
 })})(jQuery)})
 }
 //]]></script>
 </b:if>
 
</b:if>

Ganti kode var firebaseInit = false menjadi TRUE
Ganti kode var firebaseHost = URL FIREBASE HOST yang terdapat di situs firebase

Perhatian : bahwa kode di atas sudah saya sesuaikan antara halaman "item" dan "index" yang dimana pada halaman "item" itu adalah penambahan data ke database dan selain itu hanya membaca data dari database dengan auto penambahan data pada judul postingan ke database dengan nilai 0. Sedangkan halaman "static_page" dan "error_page" tidak saya pasang. Jadi inti nya pada halaman "item", sobat harus menyamakan element html pada halaman "index" untuk penambahan data setiap pengguna yang melihat postingan sobat secara keseluruhan.

Selamat Mencoba. Jika tulisan singkat ini kurang jelas jangan segan untuk bertanya terima kasih telah berkunjung.

Pos Terkait

Komentar Pada `Cara Memasang Posts Viewed dengan Firebase di Blogspot`

6 Komentar Pada `Cara Memasang Posts Viewed dengan Firebase di Blogspot`

  1. Rumit amat bos tutorial nya kurang jelas caranya

    ReplyDelete
    Replies
    1. rumit nya dari mana nya bos ? tolong jelaskan

      Delete
  2. Agak bingung memahami penjelasan diatas Bang. Saya bingung mengurutkan tahap demi tahaPnya. Apa ada video tutorialnya Bang ? Salam dari saya, blogger pemula

    ReplyDelete
    Replies
    1. iya bang memang bingung, hehe soalnya artikel ini di khususkan untuk yang sudah paham bahasa HTML sama JS dan XML blogger. insya allah diperbarui artikelnya
      kebetulan gak buat videonya eyy

      Delete
  3. Mas ada tutorial untuk web push notif realtime di blogger gak? kalau onesignal kan manual send notif. nah kalau dibuat setiap posting artikel baru dan publish maka otomatis mengrim notif ke yang subscribe. Kalau ada buat panduannya y mas

    ReplyDelete
    Replies
    1. itu kayak auto share post, sobat bisa gunakan situs IFTTT : https://ifttt.com/ jadi setiap post baru, post tersebut akan langsung terkirim ke email subscriber via email yang sudah terintegrasi dengan feedburner. dan ane kagak paham maksud ente format notif nya kayak apa dulu terus subscriber bisa melihat notif nya dari mana ?

      Delete