Realtime Post Views Counter for blogger by Firebase

Welcome To MIUSM TECH on this Week-End we come with new idea On Plus UI v2.6.2

There we have the new version of Plus UI v2.6.2 which comes with more features. The latest version adds a real-time preview counter, which displays real-time views of your blog posts using the Firebase database.

If you want to enable it on your blog, follow these simple steps to get started.

Requirements:

Firebase Data base.
Plus UI v2.6.2

Steps Which you have to preform:

Create new project in firebase which is free and you need just to login your gmail ID
And Then Create RealTime Data Base in Project
At Last Just Past the following Codes in DataBase Rules

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

If You want Multiple blogs Count view then use this 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"
      }
    },
    "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"
      }
    }
  }
}

Then Copy the Firebase project web link
Got to Blogger Theme Section and Edit theme.
Find the following code

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

Past Your Firbase Project Web Link in DatabaseUrl:

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

Now Save Your Blogger Theme Code and refresh your blog.

Showing Abbreviated Views Count in Blog

If you want to see the number in the numbers summary, for example. 685.89k instead of 68589600, you only need to take one step for this action.

Find the Code in Theme Editor HTML View:

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

Step 2: Replace false with true as shown below:

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

Now Save you Theme and Refresh Your Website.

MIUSM TECH

Realtime Post Views Counter for blogger by Firebase