widget like post blogger

update membuat tombol like artikel di blogger dengan firebase realtime database

Hallo semua pada kesempatan kali ini saya akan membagikan widget like post untuk platfrom blogger.

widget ini berfungsi untuk menampilkan jumlah suka pada artikel yang telah kita buat, widget ini sebelumnya saya menggunakan api dari https://countapi.xyz/ namun karena server api sekarang tidak dapat di akses kini saya update menggunakan firebase realtime database.

widget ini saya juga menambahkan localStorage agar yang sudah like tidak dapat like berulang kali, namun apa bila cookie browser di hapus maka bisa di like kembali.

widget ini hanya bisa menambahkan jumlah like / klik dan tidak bisa unlike atau membatalkan like, untuk demonya silakan klik tombol di bawah ini, ok buat kalian yang ingin mencobanya mari simak caranya.

Widget Like Post For Blogger

catatan:
widget ini hanya untuk platfroam blogger / blogspot

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

/* widget like shared by www.wendycode.com */
.wc-like-btn{position:relative;padding:20px 20px;background:#f89000;font-size:18px;border-radius:5px;color:#fff;outline:none;border:none;display:flex;align-items:center;justify-content:center;cursor:default}
.wc-like-btn::after{content:'';position:absolute;padding:20px 20px;background:#f89000;bottom:-15px;transform:rotate(45deg)}
.wc-like-btn svg{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:25px;height:25px;margin-right:5px;z-index:2}
.wc-like-btn svg.like{fill:#fff;stroke:#fff}
#wc-liked{margin-top:5px;z-index:2}
#wc-liked::before{content:attr(data-klik)}
#wc-liked::after{content:attr(data-teks);margin-left:5px}
.wrap-center{display:flex;justify-content:center}

terakhir salin kode di bawah ini dan letkkan di bawah kode <data:post.body/> median ui 1.7 bisa letakkan di bawah kode <b:include data='post' name='postBody'/> jika sudah klik simpan.

<div class="wrap-center">
<button class="wc-like-btn" expr:data-like="data:blog.blogId + &quot;/&quot; + data:post.id + &quot;/likepost&quot;">
<svg viewBox="0 0 24 24"><path d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z" /></svg>
<span id="wc-liked" data-klik="0" data-teks="Like" data-after="Liked"></span>
</button>
</div>

<script>
/*<![CDATA[*/
const wcLikeFbase = {
  firebaseUrl: 'https://choipan-wendy-default-rtdb.firebaseio.com/',
  abbreviation: '1',  // 0 or 1 or 2
  sharedBy: 'www.wendycode.com' // credit
};

function likePostLoad(){var script=document.createElement('script');script.async= true;script.src='https://cdn.wendycode.com/blogger/widget/like.js';document.body.appendChild(script)}function vcDtcLzy(){likePostLoad(),localStorage.setItem("likePostJs","true")}var wcLdStorage=localStorage.getItem("likePostJs");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&&likePostLoad();
/*]]>*/</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

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 like post blogger yang bisa saya bagikan kali ini, terima kasih telah berkunjung dan semoga bermanfaat.