n
nPost 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.
nnn
nnn
n
nData Persistent
nIn 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.
n
nAfter setting up your project make sure you set the rules to allow read and write.
n
n
nThe Counter Placement
nThis depends on the template you currently installed, but generally it is better to place it beside the post meta – (Post Date, Comment count etc).
nnn
nnnLog 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:
n
Viewsn
n
nAs 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.
n
n
nDatabase Structure
nThe 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.
nnn
nnn
n
nStoring and Retrieving the Data
nAm 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.
n
nIn the html editor of your blog place the below code before the close of the body tag.
n
nnn
n
nReplace the YOUR_APP_ID_HERE with your own firebase app id.nnAfter placing the above code hit save theme and view any of the post to see the result.nnI hope this helps.nn
n