How to Display Post Views Count in Blogger

If you want to keep track of your posts or you want to know if your website has anyone interacting with it? The simplest way is to integrate the article with the view checking feature, so you will easily know the number of views on each blog post on your blogger website. Using this feature, readers can determine the quality of the article thanks to the number of views and they will feel more secure and want to click to the blog post to read when the number of views is higher than the others. So, in this article, I will guide you how to count post views in blogger. Now, let’s take a look.

{tocmero} $title={Table of Contents}

Creating your Firebase Account

1. Signup to Firebase

*You will be redirected to your dashboard once you successfully signed up

2. Then, create your Firebase APP. To create your Firebase APP Go to firebase.com/signup



3. Click on Create Project button.



4. Type your Project Name ( You can type your website's name as your project name).
5. Accept Firebase Terms. Then, click on Continue button.



6. Click on Continue button.



7. Accept Google Analytics Terms. Then, click on Create project button. Firebase will be create your project.



8. When your project is ready click on Continue button.



9. Click on the Build menu on lefthand side.



10. Click on the Realtime Database menu button.



11. To store and sync data in real time you have to create to realtime database. Click on the Create Database button to create your firebase realtime database.



12. Now setup your Database Database Option - Select your Realtime Database location, where your Realtime Database will be stored. Then, click on the Next.



13. Security Rules - Select Start in Locked mode. Then enable by clicking Enable button. Oonce you havedefined your data structure you will have to write rules to secure your data.



14. Firebase App URL created. Congratulations! You have successfully created a WORKING Database.



15. Click on Rules menu.



16. You have to change read and write rules.



17. Change read and write rules : false to true.



18. Then, Publish changes rules.

*Don't forget to copy your Firebase App URL. Return to Blogger.




After successfully firebase project creation, we will enter the final step of adding HTML, CSS and JavaScript codes in blogger.

19. Go to Blogger » Template » Backup your Template » and Edit HTML
20. Add FontAwesome before </header>.

<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css' integrity='sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=' rel='stylesheet'/>

21. Add Jquery Library v1.2.3 or higher before </header>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>

22. 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 

23. JavaScript - 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> 

24. Replace YOUR-APP-NAME with your Firebase App URL. Save your template.

Congratulations! Now your Post Views Count in Blogger posts has been added.