widget visitor counter dengan firebase

membuat visitor counter di blogger dengan firebase realtime database

Hallo semua pada kesempatan kali ini saya akan membagikan widget visitor counter atau penghitung pengunjung dengan firebase database.

sebenarnya saya sudah pernah membuat artikel serupa menggunakan api dari api.countapi.xyz namun saat ini tidak berfungsi lagi karena server api tidak dapat diakses / down.

jadi alternatif lain saat ini hanyalah menggunakan database firebase, karena saya sudah mencari api yang serupa dengan api.countapi.xyz namun tidak ketemu.

buat kalian yang sebelumnya menggunakan tutorial ini karena server api tidak dapat diakses dengan waktu yang cukup lama kalian bisa mengguanakan alternatif ini.

widget ini dibuat menggunakan javascript murni tanpa menggunakan jquery dan sudah dikombinasikan dengan script lazyload asynchronous agar tidak menggangu performa blog.

Widget Visitor Counter Dengan Firebase

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* visitor counter shared by www.wendycode.com */
.separator{position:relative}
.wendy-view-post.hidden{display:none}
.wendy-view-post.psVcActive{position:absolute;top:10px;right:5px;opacity:.8;font-size:14px;}
.wendy-view-post{display:flex;align-items:center;margin:0 5px;padding:1px 5px;gap:3px;border-radius:12px;color:#0e2045!important;background-color:#fffdfc!important;box-shadow:5px 5px 15px 0 rgb(0 0 0 / 10%)}
.wendy-view-post:before{content:attr(data-text);text-indent:2px;opacity:.8}
.wendy-view-post svg{fill:none!important;stroke:#0e2045!important;stroke-linecap:round;stroke-linejoin:round; stroke-width:1;width:16px;height:16px;opacity:.8}

lanjut salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>/*<![CDATA[*/
const wcViewCountFbase = {
  firebaseUrl: 'https://choipan-wendy-default-rtdb.firebaseio.com/',
  abbreviation: '1', // 0 or 1 or 2
  type: '1', // 0 or 1
  sharedBy: 'www.wendycode.com' // credit
};
  
function viewCountLoad(){var script=document.createElement('script');script.async= true;script.src='https://cdn.wendycode.com/blogger/widget/viewcount.js';document.body.appendChild(script)}function vcDtcLzy(){viewCountLoad(),localStorage.setItem("viewCountJs","true")}var wcLdStorage=localStorage.getItem("viewCountJs");if("true"!=wcLdStorage){var t=!1,e=!1;window.addEventListener("scroll",()=>{(0!=document.documentElement.scrollTop&&!1===t||0!=document.body.scrollTop&&!1===t)&&(vcDtcLzy(),t=!0,e=!0)},!0),window.addEventListener("click",()=>{!1===e&&!1===e&&(vcDtcLzy(),e=!0,t=!0)},!0)}"true"===wcLdStorage&&viewCountLoad();"undefined"!= typeof infinite_scroll&&infinite_scroll.on("load",function(){viewCountLoad();});
/*]]>*/</script>

keterangan
- firebaseUrl: isi dengan url firebase realtime databse milik kalian atau biarkan menggunakan database kami

- abbreviation: isi 0 atau 1 atau 2, kalian akan melihat perbedaannya jika viewcount telah mencapai di atas 1000

- type: isi 0 maka viewcount tidak akan bertambah saat halaman di refersh

letakkan kode ini di mana kalian ingin menampilkan visitor counter, kalian harus bisa atau paham cara inspek element agar bisa meletakkan kode ini di tempat yang sesuai, karena setiap template memiliki kode yang berbedah maka bagian ini harus bisa kalian sesuaikan sendiri peletakkannya.

jika kamu menggunakan template median ui 1.7 bisa meletakkan di bawah kode <div class='bar flexIn'> ada 4 kode seperti itu kalian bisa meletakkan di setiap kode tersebut

<div class='wendy-view-post hidden' expr:data-view='data:blog.blogId + &quot;/&quot; + data:post.id + &quot;/viewpost&quot;' expr:view-ispost='data:view.isPost ? &quot;true&quot; : &quot;false&quot;'><svg viewBox='0 0 24 24' 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></div>

OPSIONAL
jika kalian bingung meletakkan kode di atas kalian bisa menggunakan kode ini jika ingin mengaktifkan visitor counter di thumbnail pada artikel seperti situs ini kalian cukup pasang kode ini di bawah kode <data:post.body/> median ui 1.7 bisa letakkan di bawah kode <b:include data='post' name='postBody'/>

<b:if cond='data:view.isPost and !data:view.isPage'>
<script>
var wcVcThumbActive = {
  id: '<data:blog.blogId/>/<data:post.id/>/viewpost',
  selector: '.separator'
}
</script>
</b:if>

bagian yang saya tandai .separator adalah selector pebungkus dari gambar thumbnail dipostingan, pastikan artikel thumbnail pertama di tulis dengan begini.

<div class="separator"><img alt="title" src="https://blogger.googleusercontent.com/img/b/xxxxxx.jpg" title="title" /></div>

Cara Membuat Realtime Database Difirebase

untuk mendapatkan url seperti ini https://choipan-wendy-default-rtdb.firebaseio.com/ kalian harus membuat proyek di firebase dan membuat realtime database.

jika kalian malas atau tidak mau ribet dapat gunakan database kami, tetapi menggunakan database milik kalian sendiri akan lebih baik karena firebase versi gratis memiliki limit dapat kamu baca di https://firebase.google.com/docs/database/usage/limits?hl=id

jika database kami banyak yang menggunakannya dan terkena limit maka widget tidak berfungsi maka itu lebih disarankan membuat database sendiri.

1. buka firebase console di https://console.firebase.google.com
2. pilih proyek firebase yang ingin digunakan atau buat proyek baru
3. klik menu Build dan pilih Realtime Database
4. lanjut klik Rules dan ganti semua isi kode menjadi

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

ok jadi sekian widget visitor counter dengan firebase yang bisa saya bagikan kali ini, terima kasih telah berkunjung dan semoga bermanfaat.