How to add Blogger post views using JavaScript and Firebase

Hello to all my friends, after many posts of sharing on blogger Store, this post I come back to share blogger tips because. In this article, I will share with you how to add views to Blogger posts using JavaScript and Firebase.

This tutorial will not require you to have a lot of knowledge about HTML, CSS or JS because the code I share is already available. You just need to implement it according to the instructions and properly insert it in your template. You can see the demo right at my Blog!

Create Realtime Database and add Rules

First, we need to create a Firebase Project to set up a real-time database in Firebase. We can synchronize and edit it according to the number of views on Blogger.

To create Firebase Project and real-time database, please refer to the following steps:

Create Project in Firebase

Step 1: Go to Firebase Console .

Step 2: Select Create a Project and enter the Project name, just click Continue to continue.

Step 3: Turn off Google Analytics and click Create Project.

That's it, creating Project in Firebase, followed by Realtime Database installation.

Install Realtime Database

Step 1: Go to Firebase Console and select the newly created Project.

Step 2: In the menu on the left, access Realtime Database .

Step 3: Select Create Database, and select Next.

Step 4: Continue to select Locked Mode and click Enable.

So we have created the Realtime Database, let's copy the path as shown in the picture I marked.

Add Rules to Database

Next, switch to the RULES tab and replace all the old code with the following 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"
      }
    }
  }
}

Change 0000000000000000000it to your Blog ID.

Then click Publish to save the changed code.

Edit in template

Step 1: You insert the following CSS before the tag]]></b:skin>

<!--[ Realtime Post View Counter by NLD Blog]-->
.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'}

Step 2: Add the following HTML to display views:

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

In data-add='true'the paragraph you change to false if you want to display views on other pages than the article page. Specifically, true, when the page loads it will +1 views, and false, when reloading the page, it will not add more views but it only displays the views already.

Step 3: Next, insert the following JavaScript before the . tag/body

<script>
  /*<![CDATA[*/
  /*! Realtime Post View Counter by NLD Blog */
  const viewSeting = {
      blogID: '0000000000000000000',
      databaseUrl: 'databaseUrl',
      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>

This step you replace:
1. 0000000000000000000Same as Blog ID above Add Rules to Database .
2. databaseUrlyou change to your Realtime Database URL that I told you to copy above.
3. abbreviationcan be trueor false.
4. lazyloadsame trueor false.

Finally save and check on your Blog.

So in just a few simple steps, you have added views to the article that looks very professional, right?

if you dont understand then i made this video for you.

Thanks for reading: How to add Blogger post views using JavaScript and Firebase, Sorry, my English is bad:)

Blogger store

Ezoic

How to add Blogger post views using JavaScript and Firebase