Show number of views in Blogger posts/pages

Post Views are important metric for website owners and bloggers as they show the level of engagement, relevancy and interest in their content. High post views can indicate that a particular post is popular and resonating well with the users, whereas low post views indicate that a post is not good enough or relevant.

Table of Contents

What are post views?

Post Views refer to the number of times a specific post on a blog or a website, has been viewed by visiting users. When a user visits a website and views a post/page, the website’s host will record the view separately (if you have some special configuration for blogger or have some specific plugin for wordpress). These views can be collected and can be displayed on the websites posts/pages.

Some websites and content management systems, such as WordPress.com, have built-in functionality to track post views. But if the website platform or content management system doesn’t have the functionality to track post views then we can use external plugins or scripts that can track views. Additionally, analytics tools, such as Google Analytics, do provide the data on the number of post views.

It’s important to note that there are different ways to count post views and some views may be counted multiple times, for example, if a user refreshes the post/page many times. There are many factors that tell whether an article or a blog post is useful or not, the most important one of them is how many views an article or a blog has. Its a clear reflection of how many people have read that article or blog post.

To show page or post views in WordPress is very easy you just have to install some specific plugin, configure it then you’re done. It is quite difficult for blogger users to show post views on their website but don’t worry I am here to resolve all your issues and solve all your difficulties related to blogger.

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 for this page views counter functionality you can use any third party database management system for counting page views.

Firebase provides free database management system that you can use. You can create as many databases as you want for free using firebase data management system.

Follow the steps given below to show post views on individual posts

Select theme from left menu then click on the down arrow then click on “Edit HTML”. Use the code given below 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 need to add the code given below before </head>tag if you want to show eye icon on post/page.

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

Copy the code given below and paste it above </body> tag.

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'>//<![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://your_firebase.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>
<script>

</script>

Once you finish making changes, click on the floppy icon located at the top right corner to save changes. If you are facing any difficulties in making changes please let me know in the comments below.