Blogger Enable Realtime Post Views Counter

We'd like to inform you about the latest update from Fineshop Design: Plus UI v2.6. This version brings a bunch of new features when compared to Plus UI v2.5.1. Notably, it introduces the Realtime Views Counter, which allows you to monitor the live views of your Blog Posts using the Firebase Database.

If you're interested in activating this feature for your Blog, we've outlined some straightforward steps to help you begin:

Note that it will not work in older version of Plus UI. Make sure you have a latest template of Plus UI.

Video Tutorial Step by Step Guidence

Requirements

• Firebase Account

• Plus UI v2.6 Template

Enabling Views Count

Step 1: First of all we can create a project in Firebase.

Step 2: The second step is to Create a Database for your Project.

Step 3: Paste the following rules in the Database.

For Single Blog

{
  "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"
      }
    }
  }
}

For Multiple Blog

{
  "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"
      }
    },
    "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"
      }
    },
    "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"
      }
    }
  }
}

Don't forget to replace the marked parts with your Blogs' ID.

Step 4: Now Copy the Database URL.

Step 5: Go to Your Plus UI Theme HTML Editor.

Step 6: Find the following codes:

realViews: {
  databaseUrl: "",
  abbreviation: "false"
}

Step 7: Paste your Database URL, it will look like this:

realViews: {
  databaseUrl: "https://example-rtdb.firebaseio.com",
  abbreviation: "false"}

Step 8: Save Changes and refresh your Blogger post or Page.