Do you know how anyone knows that the article which they are reading at that time is useful or not?
There are many factors that tells that the article is useful or not and one of them is how much views that article has got. In simple words how many people have read that article.
To show page or post views in WordPress is very easy you just simply have to install a single plugin and you will see the post views on your post pages.
But it is quite difficult for blogger but don't worry I am here to resolve all your issues and solve all your difficulties related to blogger.
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 the demo of the things which I share on this blog and if you want to see the demo you can see above in the beginning of this article just above the thumbnail of this article you will see how much views this article have got till now.
The demo looks something like this you can see below.
In WordPress you have to buy hosting and you can create databases in that hosting but for blogger you don't have to buy any hosting but for this page views counter functionality we will need to have database.
Don't worry you will not have to buy hosting we will use firebase which provides us free database management system and we can create as much databases as we want for free without paying a cent.
The procedure to implement this functionality in blogger is somehow difficult so that's why I have created a separate video which you can see and easily add post views counter functionality in 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.
Video About How to show Post Views In Blogger
See the video and if you face any difficulties you can comment below or comment on My YouTube channel I will be very glad to hear from you and provide you the solution of any difficulty that you are having.
So the code which you will need or which I have used in this video is provided below simply copy the code and make the changes that I have made.
Code to get blogger post id.
<div expr:post-id='data:post.id'/>You have to add the above code after the below code.
<b:includable id='post' var='post'>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 have to add the code provided below before </head>tag if you want to show eye icon.<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
Database Connection & all functionalities Code paste it just above </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 will not see the video then you will not be able to add page or post views functionality in blogger so watch it first before doing any step by yourself.
I hope that you will like this article and please leave your feedback in the comment section below.
I am always waiting for your positive feedback so please don't make me keep waiting.