Home
FIREBASE

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 ကိုနှိပ်

အောက်မှာကျန်တဲ့အဆင့်တွေဆက်လုပ်ပေးပါ။ပုံနှင့်တကွရှင်းပြထားပါတယ်

  1. မိမိ Project name ကိုရေးပါ

  2. Continue ကိုနှိပ်

  3. Continue ကိုနှိပ်

  4. 1. Select an account ကိုနှိပ်

    2. Create a new account ကိုနှိပ်

  5. 1. firebase project name ထည့်ပေးပါ

    2. အမှန်ခြစ် လေး တွေ လိုက်ခြစ် ပေးပါ

    3. Create Project ကိုနှိပ်

  6. Continue ကိုနှိပ်

  7. </> ကိုနှိပ်

  8. project name ထည့်ရေးပေးပါ
  9. မိမိ project name မှန်မမှန်စစ်ဆေး ပေးပါ

  10. Register app ကိုနှိပ်

  11. Use a <script> tag ရွေး

  12. Copy အိုင်ကွန်ကိုနှိပ်၍အဲဒီ Code တွေကို copy ကူးယူထားပါ။ copy ကူးယူထား သော code များကိုတ နေရာတွင်ခဏမှတ်သားထားပါ။အရေးကြီးသည်ထို code များသည်မိမိ Template တွင်ထည့်သွင်းအသုံးပြုရမဲ့ code များဖြစ် သော ကြောင့်ပါ

  13. Next ကိုနှိပ်
  14. Next ကိုနှိပ်
  15. Continue to console ကိုနှိပ်
  16. Menu ဘားကိုနှိပ်
  17. Build ကိုနှိပ်
  18. Realtime Database ကိုနှိပ်
  19. Create Database ကိုနှိပ်
  20. Next ကိုနှိပ်
  21. Start in locked mode ကိုနှိပ်
  22. Enable ကိုနှိပ်
  23. Rules ကိုနှိပ်
  24. အဲဒီနေရာမှာ false (2)ခုစလုံးကို true လို့ (2)စလုံးပြောင်းရေးပေးပါ။ဒါမှမဟုတ်မိမိနှစ်သက်သလိုလုံခြုံရေးစည်းမျဉ်းသတ်မှတ်နိုင်ပါတယ်
  25. Publish ကိုနှိပ်
  26. Data ကိုနှိပ်
  27. အဲဒီ link ပုံလေးကိုနှိပ်၍ Copy ယူပြီးမိမိအဆင်ပြေမဲ့နေရာမှာခဏမှတ်ထားပါ။ကဲဒါဆို firebase database account တခုရသွားပါပြီ။အောက်က code တွေထည့်ရန်မိမိရဲ့ Website Template ကိုပြန်သွားရပါမယ်။

မိမိရဲ့ Template dashboard သို့ပြန်သွား၍အောက်ကအတိုင်းဆက်လက်လုပ်ဆောင်ပေးပါ
  1. မိမိ website ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Theme ကိုနှိပ်
  3. Customize ဘေးက 🔻ကိုနှိပ်
  4. Edit HTML ကိုနှိပ်
  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>

  1. ]]></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;
    }

  1. </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>

  1. အောက်ကပြထား သော နေရာများတွင် firebase account ဖွင့်စဥ်တုန်းက copy ကူးယူထား‌‌သော code များဖြင့်ပြောင်းလဲဖြည့်စွက်ပေးပါ

    You _apiKey_ here နေရာတွင်မိမိရဲ့ apiKey ထည့်

    You_authDomain_here နေရာတွင်မိမိရဲ့ authDomain name ထည့်

    You_databaseURL_here နေရာတွင်မိမိရဲ့ firebase database account ထည့်

    You_storageBucket_here နေရာတွင်မိမိရဲ့ storageBucket name ထည့်

    You_messageingSenderID_here နေရာတွင်မိမိရဲ့ messageingSenderID ထည့်


  1. ဒီအဆင့်မှာ တော့ရွေးချယ်စရာ (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>

Post a Comment