Notification texts go here. Buy Now!

Enable Realtime Post Views Counter

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

Realtime Views
Fineshop Design | Realtime Views

Most welcome to Fineshop Design!

As you know, Fineshop Design recently released Plus UI v2.6 which comes with more features if compared with Plus UI v2.5.1. Realtime Views Counter has been added in the Lastest Version, which shows the realtime views of your Blog Posts with the help of Firebase Database.

If you would like to enable it on your Blog, follow these simple steps to get started.

Note that it will not work in Plus UI older versions. Make sure you get the lastest template update.

Requirements

  1. Firebase Account
  2. Plus UI v2.6 Template

Enabling Views Count

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

Step 2: Create Database for your Project.

Step 3: Paste the following rules:

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

{
  "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: Copy the Database URL.

Step 5: Go to Theme HTML Editor.

Step 6: Find the following codes:

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

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

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

Step 8: Save Changes and refresh your Blog Page.

Showing Abbreviated Views Count

If you would like to display the views counts in Abbreviated numbers, i.e. 67.89K instead of 67894, you just need to follow simple steps.

Step 1: Find the following codes by going to Theme HTML Editor:

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

Step 2: Replace false with true as shown below:

Don't make any changes if it is already true.

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

Step 3: Save Changes and refresh your Blog Page.

Related Articles

Contacting Us

Feel free to contact us through Contact Page or reach us on Telegram (@deo_kumar) if you are facing any problem while following the steps described above.

About the Author

Hey! I'm Deo Kumar, a passionate web developer skilled in JavaScript, Node.js, Cloudflare Workers, KV stores, and Next.js. With a focus on dynamic web applications, I excel in JavaScript and Node.js, ensuring robust websites. As a front-end expe…

تعليق واحد

  1. Please Add HLS Player.
🌟 Attention, Valued Community Members! 🌟

We're delighted to have you engage in our vibrant discussions. To ensure a respectful and inclusive environment for everyone, we kindly request your cooperation with the following guidelines:

1. Respect Privacy: Please refrain from sharing sensitive or private information in your comments.

2. Spread Positivity: We uphold a zero-tolerance policy towards hate speech or abusive language. Let's keep our conversations respectful and friendly.

3. Language of Choice: Feel free to express yourself in either English or Hindi. These two languages will help us maintain clear and coherent discussions.

4. Respect Diversity: To foster an inclusive atmosphere, we kindly request that you avoid discussing religious matters in your comments.

Remember, your contributions are valued, and we appreciate your commitment to making our community a welcoming place for everyone. Let's continue to learn and grow together through constructive and respectful discussions.

Thank you for being a part of our vibrant community! 🌟
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.