How to Enable Realtime Post Views Counter in Plus UI v2.6

Fineshop Design has recently launched Plus UI v2.6, bringing exciting new features compared to its predecessor, Plus UI v2.5.1. One of the key additions is the Realtime Views Counter, which allows you to display real-time blog post views using Firebase Database.

If you want to enable this feature on your blog, follow these step-by-step instructions.

Important Notes:

This feature will not work on older versions of Plus UI.
Ensure that you have updated to Plus UI v2.6.

Requirements:

✅ Firebase Account
✅ Plus UI v2.6 Template

Steps to Enable Realtime Views Count

Step 1: Create a Firebase Project

Go to Firebase Console.
Click Add Project and set up your project.

Step 2: Create a Firebase Database

In your Firebase Project, go to Build → Realtime Database.
Click Create Database and choose your region.
Set the database to test mode (you can update security rules later).

Step 3: Configure Database Rules

Paste the following rules in your Firebase Database Rules section.

For a 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 Blogs:

Replace BlogID_0000000000000000000 with your actual blog IDs.

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

Step 4: Copy Your Database URL

Navigate to Firebase Console → Realtime Database.
Copy the Database URL (e.g., https://example-rtdb.firebaseio.com).

Step 5: Update Theme HTML

Open Blogger → Theme → Edit HTML.
Locate the following code:

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

Paste your Database URL:

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

Save Changes and refresh your blog.

Enabling Abbreviated Views Count

If you prefer displaying abbreviated numbers (e.g., 67.89K instead of 67894):

Open Theme HTML Editor.
Locate the code:

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

Change false to true:

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

Save Changes and refresh your blog.

Final Words

Congratulations! 🎉 You have successfully enabled the Realtime Post Views Counter in Plus UI v2.6. This feature will enhance your blog by displaying live post views to readers, increasing engagement and credibility.

Need Help?

If you encounter any issues:

Visit our Contact Page.
Reach us on Telegram (@itisuniqueofficial_channel).

Enjoy blogging with Plus UI! 🚀

It Is Unique Official