Create a Custom Post View Counter for Each Post in Blogger


Post view counter is very important for our readers. It shows how many times a post has been viewed. In this article I will walk you through how I have implemented post counter for my blog.

Data Persistent

In order to implement the post view counter, I need a data backend to store all the post view count. For this purpose I chose Firebase. If you want to know how to setup a project in firebase refer to this article where I have explained how.

After setting up your project make sure you set the rules to allow read and write.

The Counter Placement

This depends on the template you currently installed, but generally it is better to place it beside the post meta - (Post Date, Comment count etc).

Log in to your blogger dashboard -> click on Theme -> Edit Html. Do a quick search by pressing Ctlr/Cmd F for 'post-meta' and then beside the post data element add a span like so:

As you can see, the name attribute of the span is set to the post id, this is needed to identify which post has which counter when querying our firebase database.

Database Structure

The structure of the database depends on what we want to store, but what is really important in this case is the post id and the number of views. so that means our database will have just two fields namely postId and viewCount.

Storing and Retrieving the Data

Am not going to talk a lot on this as I have another tutorial that discuss firebase in depth so you want to check that out.

In the html editor of your blog place the below code before the close of the body tag.

Replace the YOUR_APP_ID_HERE with your own firebase app id. After placing the above code hit save theme and view any of the post to see the result. I hope this helps.

No comments:

Powered by Blogger.