How To Add Post Views Counter to Blogger

Add Post Views Counter to Blogger

Why need to add a post views counter on your blog if you already have one on your "Dashboard"? Its purpose is for our readers to see which of our posts are viewed mostly by others. It is also for us - admins, to monitor the post views in the front end of our blog and to know which of our posts get the attention and interests of our readers. Blogger blogs can now easily add a counter of post views thanks to Firebase which provides FREE service for all! Follow the steps below to get it working!

Creating your Firebase Account
Signup to Firebase
*You will be redirected to your dashboard once you successfully signed up

Then, create your Firebase APP
*Don't forget to copy your Firebase App URL. Return to Blogger

More About Firebase

After creating a firebase account create an app.

Now click on the app name.

Then click on Developer.

Then click on the Database.

Then click on Create New Database.

After Creating A Database.

Click on Cloud Firestore.

Then select Realtime Database.

Then click on the Rules tab.

Now remove all code from the Rules tab and add new code:

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

And now click on the Publish button.
Now click on the Project Overview Setting.

Project Overview Setting

Now click on Project Settings.
Now copy the Project ID.

Project ID

Now add the Project ID. On YOUR-APP-NAME on this javascript code

JavaScript Code

DEMO

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML Copy this code then paste it before <data:post.body/> *or anywhere you'd like it to appear inside your Blog Post

  
<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Views

You Can Change The Eye Icon By Changing Fa Icon Name

JScript

Find (ctrl+f) </body> Copy the following code and paste it before </body>

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
<script> 
$.each($(&#39;a[name]&#39;), function(i, e) { 
var elem = $(e).parent().find(&#39;#postviews&#39;); 
var blogStats = new Firebase(&quot;https://YOUR-APP-NAME.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); 
blogStats.once(&#39;value&#39;, function(snapshot) { 
var data = snapshot.val(); 
var isnew = false; 
if(data == null) { 
data= {}; 
data.value = 0; 
data.url = window.location.href; 
data.id = $(e).attr(&#39;name&#39;); 
isnew = true; 
} 
elem.text(data.value); 
data.value++; 
if(window.location.pathname!=&#39;/&#39;) 
{ 
if(isnew) 
blogStats.set(data); 
else 
blogStats.child(&#39;value&#39;).set(data.value); 
} 
}); 
}); 
</script>

Save The Template.

Final Words

There you have it! Until next time, happy blogging!