Demo bisa kalian cek di post/comment forum ini.
disini ada 2 category yg mau ku kasih dan sebelumnya saya minta maaf kalo tampilan btn nya biasa aja.karena saya malas buat style2 begini karena setiap theme structurenya beda jadi saya menghindari hal ini :D.
Untuk Style sama semua yg beda ada dipemanggil dan JSnya.
Style:
/* Like */
#footer-article{display: flex;justify-content: space-between;align-items: center;margin-top: 12px;}
.like{display: flex;align-items: center;cursor: pointer;}
.like svg{width: 36px;height: 36px;stroke: #4f4d4d;fill: #4f4d4d;}
.liked svg{fill:red !important;stroke:red !important;}Pasang diatas </head>:
<script src='https://cdn.firebase.com/js/client/2.3.2/firebase.js' type='text/javascript'></script>Category 1 (Hanya untuk Post):
Markup Button HTML :
<div class='btn-likes'>
<div class='like' expr:data-id='data:post.id'><svg class='icon icon-tabler icon-tabler-heart' fill='none' height='44' stroke='#2c3e50' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24' width='44' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0z' fill='none' stroke='none'></path><path d='M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572'></path></svg></div>
<div class='text'><i></i><span></span></div>
</div>Script.js :
function UID(){
var resnumb = '';
var numbres = '1234567890';
var numbreslength = numbres.length;
for ( var i = 0; i < 12; i++ ) {
resnumb += numbres.charAt(Math.floor(Math.random() *
numbreslength));
}
return resnumb;
}
var setUID =(function(){
set=[];
function Item(id){
this.key = id;
}
function setBookmark(){
localStorage.setItem('UID', JSON.stringify(set));
}
function loadBookmark() {
set = JSON.parse(localStorage.getItem('UID'));
}
if (localStorage.getItem("UID") != null) {
loadBookmark();
}
obj = {};
obj.pushUID = function(id) {
var item = new Item(id),
itemList = set;
if(itemList != null){
same = itemList.find(item =>{return item.key == id;});
if(set.length<1){
if(!same){
set.push(item);
setBookmark();
}
}
}else{
set.push(item);
setBookmark();
}
}
return obj;
})();
setUID.pushUID(UID());
$.each($('.like'),function(){
const data = $(this).data('id'),
getUID = JSON.parse(localStorage.getItem('UID')),
urlFirebase = 'https://pxclikes-default-rtdb.firebaseio.com/';
for(var item in getUID){
var match = getUID[item].key;
}
const firebase = new Firebase(urlFirebase + 'like/' +data+'/'+match);
function it(){
fetch(urlFirebase + 'like/' +data+'.json')
.then(res => res.json())
.then(res =>{
let num = 0;
var text;
for(var item in res){
if(res[item] != null){
num += res[item].value;
if(res[item].key == match){
$('.like').addClass('liked');
}
}
}
$('.btn-likes .text i').html(num>0 ? num : '');
$('.btn-likes .text span').html(num>0 ? ' Likes' : '');
})
.catch(e => console.log(e));
};
it();
$(this).click(function(){
if(!$('.like').hasClass('liked')){
firebase.once('value',function(e){
let obj = e.val(),
g=!1;
null==obj&&(obj={},obj.title=document.title,obj.url=location.protocol + '//' + location.hostname + location.pathname,obj.value=1,obj.key=match,g=!0),
it(),
"/"!=window.location.pathname&&(g&&firebase.set(obj))
});
}else{
firebase.once('value',function(e){
$('.like').removeClass('liked'),
it(),(firebase.remove())
});
}
});
});Category 2 (Dipasang untuk Post dan Comment Seperti Forum Ini):
Markup Button Post :
<div class='btn-likes'>
<div class='like' expr:data-id='data:post.id'><svg class='icon icon-tabler icon-tabler-heart' fill='none' height='44' stroke='#2c3e50' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24' width='44' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0z' fill='none' stroke='none'></path><path d='M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572'></path></svg></div>
<div class='text' expr:data-id='data:post.id'><i></i><span></span></div>
</div>Markup Button Comment :
<div class='btn-likes'>
<div class='like' expr:data-id='data:comment.id'><svg class='icon icon-tabler icon-tabler-heart' fill='none' height='44' stroke='#2c3e50' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24' width='44' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0z' fill='none' stroke='none'></path><path d='M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572'></path></svg></div>
<div class='text' expr:data-id='data:comment.id'><i></i><span></span></div>
</div>Script.js :
function UID(){
var resnumb = '';
var numbres = '1234567890';
var numbreslength = numbres.length;
for ( var i = 0; i < 12; i++ ) {
resnumb += numbres.charAt(Math.floor(Math.random() *
numbreslength));
}
return resnumb;
}
var setUID =(function(){
set=[];
function Item(id){
this.key = id;
}
function setBookmark(){
localStorage.setItem('UID', JSON.stringify(set));
}
function loadBookmark() {
set = JSON.parse(localStorage.getItem('UID'));
}
if (localStorage.getItem("UID") != null) {
loadBookmark();
}
obj = {};
obj.pushUID = function(id) {
var item = new Item(id),
itemList = set;
if(itemList != null){
same = itemList.find(item =>{return item.key == id;});
if(set.length<1){
if(!same){
set.push(item);
setBookmark();
}
}
}else{
set.push(item);
setBookmark();
}
}
return obj;
})();
setUID.pushUID(UID());
$.each($('.like'),function(){
const data = $(this).data('id'),
getUID = JSON.parse(localStorage.getItem('UID')),
urlFirebase = 'https://pxclikes-default-rtdb.firebaseio.com/';
for(var item in getUID){
var match = getUID[item].key;
}
const firebase = new Firebase(urlFirebase + 'like/' +data+'/'+match);
function it(){
fetch(urlFirebase + 'like/' +data+'.json')
.then(res => res.json())
.then(res =>{
let num = 0;
var text;
for(var item in res){
if(res != null){
num += res[item].value;
if(res[item].key == match){
$('.like[data-id=' + res[item].btn + ']').addClass('liked');
}
}
$('.text[data-id=' + res[item].btn + '] i').html(num&&num);
$('.text[data-id=' + res[item].btn + '] span').text(num&&' Likes');
}
if(res == null){
$('.text[data-id=' + data + '] i').html('');
$('.text[data-id=' + data + '] span').text('');
}
})
.catch(e => console.log(e));
};
it();
$(this).click(function(){
if(!$('.like[data-id=' + data + ']').hasClass('liked')){
firebase.once('value',function(e){
let obj = e.val(),
g=!1;
null==obj&&(obj={},obj.title=document.title,obj.url=location.protocol + '//' + location.hostname + location.pathname,obj.value=1,obj.key=match,obj.btn=data,g=!0),
it(),
"/"!=window.location.pathname&&(g&&firebase.set(obj))
});
}else{
firebase.once('value',function(e){
$('.like[data-id=' + data + ']').removeClass('liked'),
it(),(firebase.remove())
});
}
});
});Catatan :
- Gunakan Jquery Library.jika belum ada pasang jquery library bawah ini diatas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>- ya karena menggunakan LocalStorage 1 Browser 1 Like.dan apabila hapus cache Like tidak akan dihapus karena bakal generate UID baru.
- Untuk Post Letakkan kedalam Markup yang mengandung value data:posts dan untuk Comment juga sama yg terdapat value data:comments nah untuk var sesuaikan sendiri dengan yg ada di structure markup value kalian.
- Ubah URL Firebase Seperti dibawah ini dengan firebase kalian. tidak dihapus juga gpp.kalo merasa privacy ganti aja.
https://pxclikes-default-rtdb.firebaseio.com/
https://ctdclean.blogspot.com/2018/11/how-to-convenience-foods-to-meet-our.html
saya sudah coba ganti pakai firebase sendiri tetep ga bisa, ini saya pakai firebase punya om admin lagi, apa yang mesti diperbaiki ya?
Pasang diatas </head>:
<script src='https://cdn.firebase.com/js/client/2.3.2/firebase.js' type='text/javascript'></script>
pengunjung harus klik like dulu biar bisa munculin download box
nah pertanyaan apa bisa firebase yg saya pakai dipakai discript ini?
klo saya CTA (Click to action) cuman data:post.id doank yg bekerjanya ?
need solution please
check disini https://sim-stream.blogspot.com/2022/04/orchestra-part-ii_16.html?showComment=1650558875743#c7631333235461597771
contoh value data:comments default theme :
<b:loop values='data:comments' var='comment'>
- Jaringan (disaat mau ngirim ke database jaringan tidak mendukung)
- Blocking Script (ini yang sering terjadi ada nya script yg error akan mempengaruhi script yg lainnya coba cek console log)
- Script halaman yng belum termuat
soalnya selama ini aman2 aja aku, kecuali kamu modifikasi scriptnya coba kamu perhatikan lagi
letakkan script di atas tag /head :
const love_ = (id) => {
fetch(Link_Firebase + '/like/' + id + '.json')
.then(res => res.json())
.then(res =>{
let num = 0;
for(let item in res){
num += res[item].value;
}
document.getElementById(id).innerHTML = num;
})
.catch(e => console.log(e));
};
habis itu panggil script dengan cara ini :
<div id='1186434082041833069'><script>love_('1186434082041833069')</script></div>
jika bingung dalam blogger bisa gunain ini :
<div expr:id='data:post.id'><script>love_(<data:post.id/>)</script></div>
ubah jadi gini :
'linkFirebase.com/like/' + id + '.json'
Similar Threads