How to Show Post Views in Blogger

How to show post views in blogger

Post Views refer to the number of times a specific post on a website, such as a blog post or article, has been viewed by users.

When a user visits a website and views a post, the website's server will typically record this as a view. These views can then be accumulated and displayed on the website, either on the post itself or on a separate page, such as a statistics page.

Post Views can be an important metric for website owners and bloggers as it can indicate the level of engagement and interest in their content.

High post views can indicate that a post is popular and resonating well with users, whereas low post views may indicate that a post is not as engaging or relevant.

Some website platforms and content management systems, such as WordPress, have built-in functionality to track post views, but there are also external plugins and scripts that can be added to the website to track views.

Additionally, many website analytics tools, such as Google Analytics, can provide data on the number of post views.

It's important to note that there are different ways to count views and some views might be counted multiple times, for example, if a user refreshes the page.

There are many factors that tell whether the article is useful or not and one of them is how many views that article has. It shows 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.

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 we will need to have a 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 many 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 in which you can see and easily add post views counter functionality in the blogger website.

Video About How to show Post Views In Blogger

So the code which you will need or that 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"/>

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

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

If you will not see the video then you will not be able to add a 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.

Tags :

Related Posts

M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

17 Comments

Add Comment
Admin

sir can u guide how to add dark or light mood in blogger like night mode or day mode with button???

Admin

Thank U So Much It work for me <3

JhannoSJY Muñoz

Hi, do you solve 'insecure rules' notifications from firebase? I always got emails from firebase periodically. ------------------------------ [Firebase] Your Realtime Database 'sample-pageviews' has insecure rules. We've detected the following issue(s) with your security rules: > any user can read your entire database > any user can write to your entire database

M.Muzammil

These notifications are shown because you need to allow read and write access to our firebase but if we block access these notification wont me shown but out views count setup will not work.

Vishal Singh

bhai page view ki icon ko title ke niche date or authors likha hota hai waha par kaise display karenge please batawo

M.Muzammil

Dear it's not the same for every blogger template. You can place the I can and the count number according to your requirement and to do so you must have knowledge about HTML and CSS.

Coding0toAdvance

Mast

Call of Duty: Mobile Reward

Hello thnx for this but i cant find this : < expr:post-id='data:post.id'/> :(

M.Muzammil

Dear video is available on my channel see that video I think it will be easy for you to understand. https://www.youtube.com/watch?v=1XtiTr_5I1E

encepnurdin.id

Plase help me its no working

M.Muzammil

What issue you are facing?

Unknown

Thanks

Coding0toAdvance
Coding0toAdvance
Sayem Miaji

bro how can i add .k .h .lakh feature on post viewer like youtube

Sayem Tutorial

Bro Thanks For This: Image

M.Muzammil

Thanks for feedback.