How to Set Counter View Post Plus UI v3.0.0 via Firebase

Some plugins in the template depend on Firebase Services, such as Realtime Database for Post Views Counter, etc. Therefore, if you want to use any of these plugins, you need to have a Firebase Project configured with the blog template.

Creating a Firebase Project

If you already have a previously created Firebase Project, you can use that and skip the steps to create a new one described below.

1. Open Firebase Console.
2. Click + Create a project and follow the instructions to create a project. You can name the project whatever you want.
3. Once the project is created, navigate to Project settings.
4. Under General > Your apps, clik </> Web and follow the instructions to create a Web app in the project.

You have now created a Firebase Project for Web Apps.

Setting Up Realtime Database Rules

Adding secure rules to Realtime Database is very important because unsecured rules allow access to the database read and write anyone on the internet, allowing them to read and change anything in the database. Therefore, we need to add restrictions to ensure that someone cannot read or change data without permission. Follow the steps below to protect your database.

1. Open Firebase Project > Realtime Database.
2. Switch to the Rules tab
3. Paste the following JSON making appropriate changes in the rules editor and click Publish.

   Warning!
   The given rules may be updated in the future by our team if critical issues are discovered or new plugins become available. We recommend that you update the rules as below periodically (at least once a month) by visiting this page. Rules was last updated on 1st September, 2023 by Deo Kumar.

   {
     "rules": {
       ".write": false,
       ".read": false,
       "blogs": {
         "$blog_id": {
           ".validate": "$blog_id.matches(/^\\d{18,22}$/) && ($blog_id === '000000000000000000' || $blog_id === '0000' || $blog_id === '0000')",
           "posts": {
             "$post_id": {
               ".validate": "$post_id.matches(/^\\d{18,22}$/)",
               "views": {
                 ".read": true,
                 ".write": "newData.exists()",
                 ".validate": "newData.isNumber() && newData.val() % 1 === 0 && newData.val() === (data.exists() ? data.val() + 1 : 1)"
               }
             }
           }
         }
       }
     }
   }

   {
     "rules": {
       ".read": true,
       ".write": true
     }
   }

Getting Firebase Configuration

Now we need the Firebase Project web app configuration object. Follow these steps to find it.

1. Navigate to your Firebase Project Anda.
2. Open Project Settings.
3. Under the General > Your apps tab select your Web app and click Config. You will be able to see a Javascript object that looks like this:

   const firebaseConfig = {
     apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx",
     authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
     databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
     projectId: "xxxxxxxxxxxxx",
     storageBucket: "xxxxxxxxxxxxx.appspot.com",
     messagingSenderId: "000000000000",
     appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx",
     measurementId: "G-XXXXXXXXXX",
   };

   If the column databaseURL is not available, it means you have not created a Realtime Database instance. Create one through the Realtime Database section and then double check to make sure the column databaseURL is available.

Keep the browser tab open because we need information about this object.

Setting Up Firebase Configuration

Now we will add firebase configuration to our blog.

1. Open Blogger dashboard and navigate to Layout.
2. Find the Link List gadget with the title Firebase Configurations (if you haven't renamed it), click the Edit button.
3. Create or edit existing links for each key-value pair, the key as Site name and the value (content under quotes) as Site URL respectively as shown below.

   const firebaseConfig = {
     apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx",
     authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
     databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
     projectId: "xxxxxxxxxxxxx",
     storageBucket: "xxxxxxxxxxxxx.appspot.com",
     messagingSenderId: "000000000000",
     appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx",
     measurementId: "G-XXXXXXXXXX",
   };

   Your link will look like the one shown below:

   Site name	Site URL
   apiKey	AIzaSyDiUM7LdfWAHA7AG6b0NFmDuI7GhKgHLFo
   authDomain	masrizky-1712f.firebaseapp.com
   databaseURL	https://masrizky-1712f-default-rtdb.firebaseio.com
   projectId	masrizky-1712f
   storageBucket	masrizky-1712f.firebasestorage.app
   messagingSenderId	1040292808645
   appId	1:1040292808645:web:cb21d2ab39f7db5ea72dac
   measurementId	G-Q5MLZRCT87

4. Save the gadget to apply the changes.

Done! You have successfully configured your Firebase Project with your blog.