Sponsor

Recent Posts

Ads

Wednesday, August 7, 2019

How To Add A Post Views Counter to Blogger


Have you've ever wondered: how do I add Post Views Counter on my web log on Blogspot? 
There are several tutorials on the way to create a visitor counter on the net, however most of them aren't updated, or solely apply to unaltered themes.

If you're employing a business or emended blogspot theme aside from the initial commonplace blogspot theme, this is often what you're searching for.
But, why ought to add your web log post read counters if you have already got it on "Dashboard"? Blogging is fun, and most of web logger needs to form their blog distinctive and sensible trying. Its purpose is for our readers to visualize that of our posts are viewed by others. it's additionally for us - the administrator, to trace the post views on the front of our web log and to understand that of our posts receive readers' attention and interest. Blogspot can currently simply add a post read counter as a result of base provides FREE service for everyone! we are able to now easily produce this post view counter without concern concerning servers or server code. affirmative you detected it right, all BlogSpot can currently be able to show a dynamic count for individual pageviews. Follow the steps below to form it work!

Note: The postviews count wont amendment once you refresh the web log homepage however it'll change only if you visit individual posts.



1. Creating Your Firebase Account

Signup to Firebase with your gmail account.
* You will be redirected to your dashboard once you successfully signed up
Then, click "Creat a project" button to create your Firebase Project



Choose a name for the project:




The result will look like this:





OK, now we will create the Database:

Click Develop ⇨ Database ⇒ Creat database.



Select "Database" in the left menu ⇒ then Select "View" on "Realtime Database" ⇒ Rules:



delete all and replace with the following code as shown below:



 { "rules": { ".read": true, ".write": true  }}

Click "Publish" button.




The website will show a red warning "Your security rules are defined as public, so anyone can steal, modify, or delete data in your database" click Dismiss to ignore. 
Now, return to Blogspot.


2. Add Post Views Counter In Blogspot Posts

  • Go To Theme ⇨ Edit HTML

  • Find top.showAuthor in html or you can find it with CTRL+F and write  top.showAuthor thenEnter.
There are two (or three) locations that appear "top.showAuthor". At those 2 or 3) positions, paste the script above all top.showAuthor as shown below:

Note: If you can't find all 3 locations with the content "top.showAuthor" then refer to the second way  at the end of this article.



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

First top.showAuthor like this:



Second top.showAuthor:



Third top.showAuthor:



Paste This Script above </Body> in your html as shown below

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

Now just replace the highlighted line with your Firebase Project ID.


Save the script and then you can see the result.

Second Way:




Go to Blogger » Template » Backup your Template » and Edit HTML
Copy this code then paste it before <data:post.body/>
*or anywhere you'd like it to appear inside your Blog Post
<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Views

JScript

Find (ctrl+f) </body>
Copy the following code and paste it before </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>
 Save your Template.

There you have it! Until next time, happy blogging!



No comments:

Post a Comment