CUSTOMER LIKE COUNTER IN BLOGGER

 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>

0

0

Loading...