How to Show Post Views in Blogger 2020

Do you know how someone knows that the article they are reading at the moment is useful or not?
There are many factors that indicate that the article is useful or not and one of them is the number of visits that the article has. In simple words, how many people have read that article?

Displaying page or post views in WordPress is very easy, you just have to install a single plugin and you will see the post views on your post pages.

But it is quite difficult for a blogger, but don't worry, I am here to solve all your problems and solve all your blogger related difficulties.

Today, in this article, I am going to tell you how you can add post views functionality in Blogger.

I always try to provide you with the demo of the things that I share on this blog and if you want to see the demo, you can see it above at the beginning of this article, just above the thumbnail of this article, you will see how many views this article. I have so far.


The demo looks like this which you can see below ...



In WordPress you have to buy hosting and you can create databases in that hosting, but for bloggers, you do not have to buy any hosting, but for this functionality of counter visits to the page, we will need to have a database.

Don't worry, you won't have to buy hosting, we will use firebase which provides us with a free firebase management system and we can create as many databases as we want for free without paying a penny.

The procedure to implement this functionality in Blogger is somewhat difficult which is why I have created a separate video that you can easily view and add the post view counter functionality on the Blogger website.

I have explained everything in this video, you can simply watch this video on My YouTube channel, but for your ease, I have placed that video right below.






Watch the video and if you have any difficulties you can comment below or comment on My YouTube channel I will be very happy to listen to you and provide the solution to any difficulty you are having.

So the code that you will need or that I have used in this video is provided below, just copy the code and make the changes that I have made.

Add the code to get blogger post id

<div expr:post-id='data:post.id'/>
<b:includable id='post' var='post'>

The Main Code To show Page Views.

<style>#views-container #page-views{margin-left:5px}</style>

<span id="views-container"><i class="fa fa-eye"></i><span id="page-views"></span></span>

You need to add the code given below before the </head> tag if you want to display the eye icon.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Connection to the database and all the functionalities The code pastes it just above the </body> tag.


<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script> <script> //<![CDATA[ const convertSize=function(t){const o=["","KB","MB","GB","TB"];if(0==t)return"0";const n=parseInt(Math.floor(Math.log(t)/Math.log(1024)));return 0==n?t+" "+o[n]:(t/Math.pow(1024,n)).toFixed(1)+" "+o[n]}; $.each($('div[post-id]'), function(i, e) { var blogStats = new Firebase("https://posts-views-1.firebaseio.com/pages/id/" + $(e).attr('post-id')); blogStats.once('value', 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('post-id'); isnew = true; } $("#page-views").text(convertSize(data.value)); data.value++; if(window.location.pathname!='/') { if(isnew) blogStats.set(data); else blogStats.child('value').set(data.value); } }); }); //]]> </script>


If you don't see the video, then you won't be able to add the Blogger Post or Page Views feature, so watch it first before taking any steps on your own.

Hope you like this article and leave your comments in the comment section below.

I'm always waiting for your positive feedback, so don't keep me waiting.

<