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 ကိုနှိပ်
  5. မိမိ Project name ကိုရေးပါ
  6. Continue ကိုနှိပ်
  7. Continue ကိုနှိပ်

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

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

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

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

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

  10. Continue ကိုနှိပ်
  11. Menu ဘားကိုနှိပ်
  12. Build ကိုနှိပ်
  13. Realtime Database ကိုနှိပ်
  14. Create Database ကိုနှိပ်
  15. Next ကိုနှိပ်
  16. Start in locked mode ကိုနှိပ်
  17. Enable ကိုနှိပ်
  18. Rules ကိုနှိပ်
  19. အဲဒီနေရာမှာ အောက်ကလုံခြုံ ရေး Code တွေထည့် ပေးပါ။

{
  "rules": {
    ".read": true,
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}

  1. BlogID_0000000000000000000 နေရာတွင်မိမိရဲ့ Blog ID ပြောင်းထည့် ပေးပါ
  2. Publish ကိုနှိပ်
  3. Data ကိုနှိပ်
  4. အဲဒီ link ပုံလေးကိုနှိပ်၍ Copy ယူပြီးမိမိအဆင်ပြေမဲ့နေရာမှာခဏမှတ်ထားပါ။ကဲဒါဆို firebase account တခုရသွားပါပြီ။အောက်က code တွေထည့်ရန်မိမိရဲ့ Website Template ကိုပြန်သွားရပါမယ်။

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

  1. မိမိ blog site ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Theme ကိုနှိပ်
  3. Customize ဘေးက 🔻ကိုနှိပ်
  4. Edit HTML ကိုနှိပ်
  5. ]]></b:skin> ကိုရှာတွေ့ပြီဆိုရင်အောက်က code ကိုအဲဒီ ]]></b:skin> အ ပေါ်ကနေထည့်ပေးပါ

.entry-views{color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.entry-views[data-view]{visibility:visible;opacity:1}
.entry-views::after{content:attr(data-view) ' views'}

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

<span class='nld_view entry-views hidden' data-add='true' expr:data-id='data:post.id'/>

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

<script>
  /*<![CDATA[*/
  
  const viewSeting = {
      blogID: '0000000000000000000',
      databaseUrl: 'https://khinmaungwin-123-default-rtdb.firebaseio.com',
      abbreviation: true,
      lazyload: true
  }
  function loadJs(e, b, c, d) {
      let a = document.createElement("script");
      b && (a.id = b), a.async = c, a.defer = c, a.src = e, d && (a.onload = d), document.getElementsByTagName("head")[0].appendChild(a)
  }
  function abvr(a) {
      var b = Math.sign(Number(a));
      return 1e9 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e9).toFixed(2) + "B" : 1e6 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e6).toFixed(2) + "M" : 1e3 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e3).toFixed(2) + "K" : Math.abs(Number(a))
  }
  function loadPostVw() {
      for (var c = document.querySelectorAll(".nld_view"), e = firebase.database(), a = 0; a < c.length; a++) {
          var d = c[a],
              b = d.getAttribute("data-id");
          (b = e.ref("BlogID_" + viewSeting.blogID + "/PostID_" + b)).once("value", function(a, b) {
              return function(c) {
                  0 < (c = c.exists() ? c.val() : 0) && (a.setAttribute("data-view", viewSeting.abbreviation ? abvr(c) : c), a.classList.remove("hidden")), "true" == a.getAttribute("data-add") && (a.setAttribute("data-add", !1), c = parseInt(c) + 1, b.set(c))
              }
          }(d, b))
      }
  }
  function postVw() {
      loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js", "fb-app", !0, () => {
          loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js", "fb-db", !0, () => {
              var a = {};
              a.databaseURL = viewSeting.databaseUrl, firebase.initializeApp(a), loadPostVw()
          })
      })
  }
  if (!0 === viewSeting.lazyload) {
      var a = [],
          b = [];
      let c = () => {
          0 == a.length && null == localStorage.getItem("LZ_VIEW") && (localStorage.setItem("LZ_VIEW", 1), postVw())
      };
      window.addEventListener("scroll", a => {
          (0 != document.documentElement.scrollTop && 0 == b.length || 0 != document.body.scrollTop && 0 == b.length) && c()
      }, !0), document.getElementsByTagName("body")[0].addEventListener("click", a => {
          c()
      }), localStorage.getItem("LZ_VIEW") && postVw()
  } else postVw()
  /*]]>*/
</script>

0000000000000000000 နေရာတွင်မိမိရဲ့ Blog ID ထည့်ပေးပါ

https://khinmaungwin-123-default-rtdb.firebaseio.com နေရာမှာမိမိ firebase account ပြောင်းထည့် ပေးပါ။ save ကိုနှိပ်ပြီးပါပြီ


Post a Comment