Home
FIREBASE

BLOG POST VIEWS FOR BLOGGER

 Blog Post Views For Blogger

ဒါက တော့မိမိ Blog Site မှာတင်ထားတဲ့ Blog Post တခုချင်းစီကိုလူဘယ်နှစ် ယောက်ဝင် ရောက်ကြည့်ရှုထားသလဲဆိုတာကိုဖော်ပြ ပေးမဲ့ Widget လေးပါ။ပြုလုပ်ပုံပြုလုပ်နည်းကိုလဲပုံနှင့်တကွရှင်းပြပေးထားပါတယ်



Browser မှာ firebase.google.com ‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌လို့ရေးရှာပါ။မရှာချင်ရင်လဲအောက်က link ကိုနှိပ်၍ဝင်ရောက်နိုင်ပါတယ်

  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. Next ကိုနှိပ်
  13. Next ကိုနှိပ်
  14. Continue to console ကိုနှိပ်
  15. Menu ဘားကိုနှိပ်

  16. Build ကိုနှိပ်

  17. Realtime Database ကိုနှိပ်

  18. Create Database ကိုနှိပ်

  19. Next ကိုနှိပ်

  20. Start in locked mode ကိုနှိပ်

  21. Enable ကိုနှိပ်
  22. Rules ကိုနှိပ်

  23. false နေရာ‌ တွေ မှာ true လို့ပြောင်းရေးပေးပါ

  24. No(24) Publish ကိုနှိပ်

  25. No(25) Data ကိုနှိပ်

    26. No(26) အဲဒီ link ပုံလေးကိုနှိပ်၍ Copy ယူပြီးမိမိအဆင်ပြေမဲ့နေရာမှာခဏမှတ်ထားပါ။ကဲဒါဆို firebase account တခုရသွားပါပြီ။အောက်က code တွေထည့်ရန်မိမိရဲ့ Website Template ကိုပြန်သွားရပါမယ်။


မိမိရဲ့မူလ Template dashboard သို့ပြန်သွား၍အောက်ကအတိုင်းပြုလုပ်ပေးပါ

  1. မိမိ blog site ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Theme ကိုနှိပ်
  3. Customize ဘေးက 🔻ကိုနှိပ်
  4. Edit HTML ကိုနှိပ်

  5. အောက်က code ကို </head> အ ပေါ်ကနေထည့်ပေးပါ

     <script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

  6. အောက်က code ကိုလောလောဆယ် <data:post.body/> အပေါ်မှာကပ်လျက်ထည့်ပေးပါ။နောက်မှမိမိလိုသလိုရွှေ့ပြောင်းထည့်လို့ရပါတယ်

     <span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/>0<span class='view-load' id='postviews'/>Views</span>

  7. အောက်က JavaScript code ကို </body> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ

        <script async='async' type='text/javascript'>
    //<![CDATA[
    $.each($(".post-view[data-id]"), function(a, e) {
        var l = $(e).parent().find("#postviews").addClass("view-load"),
            i = new Firebase("https://khinmaungwin-123-default-rtdb.firebaseio.com/pages/id/" + $(e).attr("data-id"));
        i.once("value", function(a) {
            var n = a.val(),
                t = !1;
            null == n && (n = {}, n.value = 0, n.url = window.location.href, n.id = $(e).attr("data-id"), t = !0), l.removeClass("view-load").text(n.value), n.value++, "/" != window.location.pathname && (t ? i.set(n) : i.child("value").set(n.value))
        })
    });
    //]]>
</script>
  8. https://khinmaungwin-123-default-rtdb.firebaseio.com နေရာမှာမိမိ firebase account ပြောင်းထည့် ပေးပါ။ save ကိုနှိပ်ပြီးပါပြီ

Post a Comment