How to Add/Display the Post Views Counter in Blogger

Boost blog engagement! Learn how to Add/Display Post Views Counter in Blogger easily. Track popularity and impress your readers. 📈 #BloggerTips

In the bustling and ever-evolving world of blogging, where writers like us pour our hearts into every post, it's truly an adventure to see our words come to life and connect with readers across the globe. We know how important it is to understand our stories' impact, feel that connection, and know that our thoughts resonate with others. That's where the magic of a post views counter comes in! It's like having a little companion, quietly counting the number of people stopping by to read our thoughts and share our experiences. As creators, we constantly seek to improve and engage with our audience, and this nifty tool helps us gauge the pulse of our blog's performance. So, together, let's dive into the world of post views counters and discover how they can breathe life into our blogging journey, empowering us to touch hearts and minds with each word we share. Let's embark on this exciting quest, where the blend of creativity and data reveals our stories' true reach in the digital realm's vast landscape. Ready to take the plunge? Let's go!

How to add Post Views Counter in Blogger Posts

Please follow these steps carefully to get the correct final results but first create a backup file for your theme.

Create your Firebase Account

The first step is to sign up for a free account at Firebase. Creating your Firebase account is a simple and straightforward process. If you already have an account, then we're all set to move on to the next step.

[Click here to Signup Now]

Create/Add New Project

Once you've successfully logged in to your Firebase account, it's time to create a new project. Here's a step-by-step guide on how to do it:

1. After logging in, you'll find yourself on the Firebase Console dashboard.
2. Look for the "Add project" button. Click on it to start the project creation process.
3. A window will pop up, prompting you to enter a project name. Choose a name that represents your blog or post views counter, making it easy for you to identify the project later on.
4. Once you've entered the project name, you can proceed to set up the project by selecting the desired settings and configurations. For most post views counter implementations, the default settings should suffice.
5. Click the "Continue" button, and Firebase will proceed to create the project for you.
6. After the project is created, you will be automatically directed to the project's dashboard.

Create Realtime Database

1. Now expand the Build option in the left sidebar. and Click on Create Realtime Database.

2. Now click on Create Database button.

3. Keep the United States option and click Next.

4. Select Start in test mode option and click Enable.

 

5. Goto the Rules tab. Copy and Paste the below-given script in it and click Publish.

[{

  "rules": {

    ".read": true,

    ".write": true,

  }

}]

6. Move back to Data tab. and copy your database url.

Congratulations! You have successfully created a WORKING Database to Add/Display the Post Views Counter in Blogger.

Intalling Postveiws Plugin in Blogger

1. Go To Blogger > Template.
2. Backup your template
3. Click Edit HTML
4. Put the following code just before the </head> tag.

[<!-- Jquery Library and Font Awesome CDN -->

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>

<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css' integrity='sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=' rel='stylesheet'/>]

      5. And put the following code just before the </body> tag.

[<!-- Start Post Views Script by tipricks.com -->

<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>

<script>//<![CDATA[

(jQuery);$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#postviews").addClass("view-load"),d=new Firebase("https://tipricks-postviews-default-rtdb.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var a=e.val(),g=!1;null==a&&(a={},a.value=0,a.url=window.location.href,a.id=$(f).attr("data-id"),g=!0),b.removeClass("view-load").text(a.value),a.value++,"/"!=window.location.pathname&&(g?d.set(a):d.child("value").set(a.value))})});

//]]></script>

<!-- End Post Views Script by tipricks.com -->]

• [message]
• ##warning## Important
• Change the highlighted URL (https://tipricks-postviews-default-rtdb.firebaseio.com) with your database URL.

      6. Now, the last thing is to put the following code inside the post container where you want to show your post views count.

[<span class='post-view' expr:data-id='data:post.id'><span class='view-load' id='postviews'><i class='fas fa-spinner fa-pulse faa-fast'/></span> Views</span>

]

• [message]
• ##warning## Important
• You can replace the Views with any text you like.

      6. Click the Save and you are all done.

Visit your blog post and press F5 (refresh page) to see the post view. 👌

Copyrights

Copyrights: Developers and niche bloggers are most welcome to share this Plugin with their readers and friends. Please attribute the credits back to TipRicks™ as the only favor in return. It takes hours of effort to write and debug these scripts. This plugin comes under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Need Help?

We sincerely believe that this plugin will inject fresh energy into your blogger-powered blogs. Our dedicated efforts have been focused on optimizing its performance for efficiency. As long as you set up your own Firebase accounts and refrain from using ours (our firebase url), you won't encounter any bandwidth limitations.

The plugin operates by showing views only when pages are visited, and it operates independently of your Google Analytics stats data. Consequently, it will accurately display views only for the new posts you publish.

Should you require any assistance, do not hesitate to reach out. We have an exciting lineup of additional scripts planned for release this week, so keep an eye out! May peace and blessings be with you, dear buddies. 😊

This article "How to Add/Display the Post Views Counter in Blogger" is protected by