Enable Realtime Post Views Counter

Thank you for visiting ooxan Design! 

You are aware that Fineshop Design just released Plus UI v2.6, which has more features than Plus UI v2.5.1. The most recent version now includes Realtime Views Counter, which makes use of the Firebase Database to display the real-time views of your blog posts.

If you want to enable it on your blog, start by following these easy steps.

Keep in mind that older versions of Plus UI will not support it. Make sure you get the most recent update to the template.

Firebase Account Plus UI v2.6 Template Requirements Enabling Views Count 

Step 1: Create a project in Firebase first.

Step 2: Create a project-specific database.

Step 3: Put these guidelines in writing:

Only one 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 Several 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"
      }
    }
  }
}

Step 4: Copy the URL of the Database. 

Step 5: Go to Theme HTML Editor. 

Step 6: Identify these codes:

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

Step 7: When you paste your Database URL, it will look like this:

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

Step 8: Refresh your Blog Page and save your changes.

Displaying Abbreviated Views Count If you want to display the views count in abbreviated numbers, such as 67.89K rather than 67894, just follow these straightforward steps. 

Step 1: Go to the Theme HTML Editor and look for the following codes:

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

Step 2: As shown below, replace false with true:

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

Step 3: Refresh your Blog Page and save your changes. 

Contacting Us

If you encounter any difficulties while following the above instructions, please feel free to get in touch with us via the Contact Page or via Telegram (@jerxco).