Thursday, March 28, 2024

How To Add Post Views Counter In Blogger

This simplest trick features How To Add Post Views Counter in Blogger. After reading this you never search for display post views counter.

Its purpose is for our readers to ascertain which of our posts are viewed mostly by others. it’s also for us – admins, to watch the post views within the front of our blog and to understand which of our posts get the interest of our readers. You can now easily add a counter of views by Firebase.

How To Add Post Views Counter in Blogger

Just follow these steps:

Creating your Firebase Account

Signup to Firebase

Then, create your Firebase APP

Now, change your database rules:-

Note:- Copy your Firebase App URL.

Add Views Counter Using This Code

Go to Blogger » Go To Template » (recommended) Backup your Template » and now Edit HTML

Copy the code and paste it before <data:post.body/>

<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Views

Or paste it where you want to show your views counter.

Now,

Copy the given code below code & paste it just above </body>

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;);
var blogStats = new Firebase(&quot;https://YOUR-APP-NAME.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, 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(&#39;name&#39;);
isnew = true;
}
elem.text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>

Change the colored text with your firebase id.
And,

Save your Template.

We hope you get post views counters in blogger. Share for anyone who needs to know about How To Add Post Views Counter Blogger. 

RELATED ARTICLES

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

POPULAR

New Updates

Categories