Customer Like Counter In Blogger
ဒါလေးက တော့မိမိ Website ကိုလာရောက်ကြည့်ရှုတဲ့ Customer တွေကမိမိ Website မှာတင်ထားသမျှအ ကြောင်းအရာများကိုကြိုက်နှစ်သက်တယ်ဆိုရင်ကြိုက်နှစ်သက်တဲ့အကြောင်းဖော်ပြလို့ရ အောင်ပြုလုပ် ပေးထားတဲ့ Like Counter လေးတခုဖြစ်ပါတယ်။ပြုလုပ်ပုံပြုလုပ်နည်းကတော့အောက်ကဖော်ပြပေးထားတဲ့အတိုင်းပြုလုပ်ပေးဖို့လိုအပ်ပါတယ်။
(1) firebase.google.com ကိုနှိပ်
(2) ဘေးနားက Menu ဘားကိုနှိပ်
(3) Go to console ကိုနှိပ်
(4) Create a Project ကိုနှိပ်
အောက်မှာကျန်တဲ့အဆင့်တွေဆက်လုပ် ပေးပါ
No(1) မိမိ Project name ကိုရေးပါ
No(2) Continue ကိုနှိပ်
No(3) Continue ကိုနှိပ်
No(4) 1. Select an account ကိုနှိပ်
No(4) 2. Create a new account ကိုနှိပ်
No(5) 1. firebase project name ထည့်ပေးပါ
No(5) 2. အမှန်ခြစ် လေး တွေ လိုက်ခြစ် ပေးပါ
No(5) 3. Create Project ကိုနှိပ်
No(6) Continue ကိုနှိပ်
No(7) </> ကိုနှိပ်
No(8) project name ထည့်ရေးပေးပါ
No(9) မိမိ project name မှန်မမှန်စစ်ဆေး ပေးပါ
No(10) Register app ကိုနှိပ်
No(11) Use a <script> tag ရွေး
No(12) Copy အိုင်ကွန်ကိုနှိပ်၍အဲဒီ Code တွေကို copy ကူးယူထားပါ။ copy ကူးယူထား သော code များကိုတ နေရာတွင်ခဏမှတ်သားထားပါ။အရေးကြီးသည်ထို code များသည်မိမိ Template တွင်ထည့်သွင်းအသုံးပြုရမဲ့ code များဖြစ် သော ကြောင့်ပါ
No(13) Next ကိုနှိပ်
No(14) Next ကိုနှိပ်
No(15) Continue to console ကိုနှိပ်
No(16) Menu ဘားကိုနှိပ်
No(17) Build ကိုနှိပ်
No(18) Realtime Database ကိုနှိပ်
No(19) Create Database ကိုနှိပ်
No(20) Next ကိုနှိပ်
No(21) Start in locked mode ကိုနှိပ်
No(22) Enable ကိုနှိပ်
No(23) Rules ကိုနှိပ်
No(24) အဲဒီနေရာမှာ false (2)ခုစလုံးကို true လို့ (2)စလုံးပြောင်းရေးပေးပါ။ဒါမှမဟုတ်မိမိနှစ်သက်သလိုလုံခြုံရေးစည်းမျဉ်းသတ်မှတ်နိုင်ပါတယ်
No(25) Publish ကိုနှိပ်
No(26) Data ကိုနှိပ်
No(27) အဲဒီ link ပုံလေးကိုနှိပ်၍ Copy ယူပြီးမိမိအဆင်ပြေမဲ့နေရာမှာခဏမှတ်ထားပါ။ကဲဒါဆို firebase database account တခုရသွားပါပြီ။အောက်က code တွေထည့်ရန်မိမိရဲ့ Website Template ကိုပြန်သွားရပါမယ်။
No(1) မိမိ website ကို account အရင်ဝင်ပါ
No(2) dashboard ထဲက Theme ကိုနှိပ်
No(3) Customize ဘေးက 🔻ကိုနှိပ်
No(4) Edit HTML ကိုနှိပ်
No(5) </head> ကိုရှာတွေ့ပြီဆိုရင် အောက်က code ကိုအဲဒီ </head> အပေါ်ကနေထည့်ပေးပါ
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/> <script src='https://www.gstatic.com/firebasejs/3.6.5/firebase.js'></script>
No(6) ]]></b:skin> ကိုရှာတွေ့ပြီဆိုရင် အောက်က code ကိုအဲဒီ ]]></b:skin> အပေါ်ကနေထည့်ပေးပါ။အဲလိုမှမထည့်ချင်ဘူးဆိုရင်လဲအဲဒီ ]]></b:skin> အောက်က နေ <style> <-- CSS Code Here --> </style> အဲဒီလိုလဲထည့်လို့ရပါတယ်
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: #f44336;
color: white;
border-radius: 20px;
margin-bottom: 25px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button1:hover {
background-color: #008CBA;
color: white;
}
.counterStat {
color: white;
font-size: 16px;
}
No(7) </body> ရှာပါ တွေ့ပြီဆိုရင်အောက်မှာ ပေးထားတဲ့ Code တွေကိုအဲဒီ </body> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ
<script>
var config = {
apiKey:"You_apiKey_here",
authDomain:"You_authDomain_here",
databaseURL:"You_databaseURL_here",
storageBucket:"You_storageBucket_here",
messagingSenderId:"You_messagingSenderID_here"
};
firebase.initializeApp(config);
</script>
<script>
var dCounters = document.querySelectorAll('.CountLike');
[].forEach.call(dCounters, function(dCounter) {
var el = dCounter.querySelector('button');
var cId = dCounter.id;
var dDatabase = firebase.database().ref('Like Number Counter').child(cId);
// get firebase data
dDatabase.on('value', function(snap) {
var data = snap.val() || 0;
dCounter.querySelector('span').innerHTML = data;
});
// set firebase data
el.addEventListener('click', function() {
dDatabase.transaction(function(dCount) {
return (dCount || 0) + 1;
});
});
});
</script>
No(8) အောက်ကပြထား သော နေရာများတွင် ပြောင်းလဲဖြည့်စွက် ပေးပါ
You _apiKey_ here နေရာတွင်မိမိရဲ့ apiKey ထည့်
You_authDomain_here နေရာတွင်မိမိရဲ့ authDomain name ထည့်
You_databaseURL_here နေရာတွင်မိမိရဲ့ firebase database account ထည့်
You_storageBucket_here နေရာတွင်မိမိရဲ့ storageBucket name ထည့်
You_messageingSenderID_here နေရာတွင်မိမိရဲ့ messageingSenderID ထည့်
No(9) ဒီအဆင့်မှာ တော့ရွေးချယ်စရာ (2)ခုရှိပါတယ်မိမိက Website Like Counter အဖြစ်အသုံးပြုမှာလား (or) Post Like Counter အဖြစ်အသုံပြုမှာလားဆိုတာရွှေးချယ်၍အသုံးပြုနိုင်ပါတယ်။
(1) Website Like Count အဖြစ်အသုံးပြုမယ်ဆိုရင်အောက်မှာ ပေးထားတဲ့ HTML Code ကို <data:post body/> အောက်တွင်ထည့်ပေးပါ။Save ကိုနှိပ်ပြီးပါပြီ
(2) Post Like Counter အဖြစ်အသုံးပြုမယ်ဆိုရင် မိမိရဲ့ Post အ ကြောင်းအရာတွေရဲ့ အောက်မှာအဲဒီ HTML Code ကိုထည့် ပေးရပါမယ်။ထိုသို့ထည့်ရာတွင် Post တခုတင်တိုင်းအဲဒီ HTML Code တခုအမြဲထည့်သွင်း ပေးရပါမယ်။ထိုသို့ထည့်သွင်းရာတွင်အဲဒီ HTML Code တွင်ပါရှိ သော id="Like Count" ဆိုတဲ့နေရာမှာမိမိက Number စဉ်ဖြင့်ထည့်သွင်းအသုံးပြုပေးရပါမယ်။နမူနာအနေနဲ့ရေးပြရမယ်ဆိုရင်အောက်ပါအတိုင်းရေးပေးရပါမယ်။
ပထမ post ဆိုရင်အဲဒီ HTML Code တွင် id="Like Count1"
ဒုတိယ post ဆိုရင်အဲဒီ HTML Code တွင် id="Like Count2"
တတိယ post ဆိုရင်အဲဒီ HTML Code တွင် id="Like Count3"
စသည်ဖြင့် Post တခုချင်းဆီအတွက် Like Counter တခုစီလိုက်ထည့်ပေးရတဲ့သ ဘောပါပဲ။
<div class="CountLike" id="Like Count"> <button class="button button1"> <i class="fa fa-heart"></i> Like <span class="counterStat">...</span> </button> </div>