Follow us to get updates regarding Latest posts Follow Now!

How to add Realtime Post Views for Blogger using Firebase?

In this Article I made a tutorial on How to add Realtime Post Views for Blogger using Firebase. There are many factors that indicates that the article

In this Article I made a tutorial on How to add Realtime Post Views for Blogger using Firebase. There are many factors that indicates that the article

how-to-add-realtime-post-views-for-blogger-using-firebase


This Post is gonna be updated!

Hello Everyone! Welcome back to Techy DarshaN, Toady our tutorial is How to add Realtime Post Views for Blogger using Firebase. I've been searching for some articles about adding post views to blogger posts and most of them are outdated and aren't working. Post view is to display the number of views on articles. And Post view certainly has the benefit of making visitors know which articles are most viewed so they know that the article is really useful.

There are many factors that indicates that the article is useful or not to the users and one of them is how much views that the article has got. In simple words how many people have viewed the article and read it.

To show Page views or Post views in WordPress it very easy you just simply have to install a single plugin and you will see the Post views on your post pages. 

But it is quite difficult to integrate this Post views feature in blogger and specially for those who don't have coding knowledge. But don't worry here I made a step by step tutorial to Integrate this feature in Blogger So please read full post and follow all the steps carefully.

How to add Realtime Post Views for Blogger using Firebase?

Step 1: Crete a Firebase Account

how-to-add-realtime-post-views-for-blogger-using-firebase


Step 2: Then click on Create a project 
Step 3: Give a Name for your Project (Ex: post view)
Step 4: Accept the Firebase Terms and Click on Continue
Step 5: You'll be redirected to a new page 
Step 6: Enable Google Analytics for this Project
Step 7: Then click on Continue

how-to-add-realtime-post-views-for-blogger-using-firebase


Step 8: You'll be redirected to a new page 

how-to-add-realtime-post-views-for-blogger-using-firebase


Step 9: Enable The default settings for sharing Google analytics data 
Step 10: Accept the Google analytics Terms 
Step 11: Now click on Continue 
Step 12: Soon Firebase will create your Project 
Step 13: When you project it created Click on Continue

how-to-add-realtime-post-views-for-blogger-using-firebase


Step 14: Click on the Build button the left side 
Step 15: Now click on Realtime Database 
Step 16: Click on Create Database
 
how-to-add-realtime-post-views-for-blogger-using-firebase


Step 17: Select United states from dropdown menu and click on Next
Step 18: Now select Locked Mode and click on Enable

how-to-add-realtime-post-views-for-blogger-using-firebase


Step 19: Now you will be redirected to a new page 
Step 20: Go to Rules just beside the Data 

how-to-add-realtime-post-views-for-blogger-using-firebase


Step 21: Replace the default code with the following code and Click on Publish 
{
  "rules": {
    ".read": true,
    ".write": true, 
  }
}
Step 22: Copy your Realtime Database URL and store it in a notepad

how-to-add-realtime-post-views-for-blogger-using-firebase


Step 23: Now Login to your Blogger Dashboard.
Step 24: On Blogger Dashboard, Go to Theme 
Step 25: Click the arrow down icon next to 'customize' button.
Step 26: Click Edit HTML, you will be redirected to editing page.
Step 27: Make sure you have installed Jquery Library and Font Awesome CDN on your blog if not then paste the following codes just below <head> Tag.
<!-- Jquery Library and Font Awesome CDN -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
<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'/>

Step 28: Copy the following code and paste just before <data:post.body/>
 <b:if cond='data:view.isPost'><i class='fa fa-eye' style='color: green'/> <a expr:name='data:post.id'/>  <span class='view-load' id='postviews'><i class='fas fa-spinner fa-pulse faa-fast'/></span>  Views</b:if>
Step 29: Paste the following JavaScript code just above the </body>

Don't forget to replace my URL with your Realtime database URL that I have mentioned in Step 22 copy it and store 

  <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://fir-1-cbfb4-default-rtdb.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>
Now click on Save theme by clicking on this icon if you have followed all the steps carefully

Conclusion

In this Article I made a tutorial on How to add Realtime Post Views for Blogger using Firebase. There are many factors that indicates that the article is useful or not to the users and one of them is how much views that the article has got. In simple words how many people have viewed the article and read it. I hope you have liked and please do share with your friends and follow up our blog for more.

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Techy DarshaN | All Rights Reserved 

 © Copyright Techydarshan.eu.org

Getting Info...

About the Author

Student | Developer | Blogger

3 comments

  1. I try it along time but not working
    1. Its works correctly!
      May be you made any mistakes in Firebase.
      Have you pasted the codes correctly ?
  2. No css for positioning and design? Please update the article.
Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.