Join our official Telegram Group. Join!

How to add Realtime Post Views using Firebase for Blogger?

You may have seen post view counte in some blog. If you want to set realtime post views counter in your blog follow this post step by step.

Realtime Post Views using Firebase
Realtime Post Views using Firebase

How to Add Real-Time Post Views to Blogger with Firebase is the title of our tutorial. I've been looking for articles that explain how to add post views to blogger posts, but most of them are old and don't work. A post view is used to show how many times an article has been seen. And Post view is great because it shows visitors which articles are the most popular, so they know that the article is good.

One way to tell if an article is useful or not is by how many times it has been viewed. How many people have looked at the article and read it? It's easy to show page views or post views in WordPress. All you have to do is install one plugin, and the post views will show up on your post pages.

But this post view feature is hard to add to Blogger, especially for people who don't know how to code. But don't worry, I've made a step-by-step tutorial to show you how to add this feature to Blogger. Please read the whole post and carefully follow all the steps.

How to add Realtime Post Views using Firebase for Blogger?

Step 1: Create an account on Firebase

Step 2: Then, click the Create a project button

Step 3: Give your project a name (Ex: post view)

Step 4: Accept the Firebase Terms and click Continue in the fourth step.

Step 5: You will be taken to a new page.

Step 6: Enable Google Analytics for this project

Step 7: Click on Continue

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

Step 9: Set Google Analytics data sharing to the default settings.

Step 10: Accept the Google analytics Terms 

Step 11: Now click on Continue 

Step 12: Firebase will set up your Project soon.

Step 13: Click on Continue when your project has been created.

Step 14: Click on the Build button the left side 

Step 15: Now click on Realtime Database 

Step 16: Click on Create Database

Step 17: Click on the drop-down menu, select United States, and then click on next.

Step 18: Select Locked Mode and click Enable.

Step 19: Now you will be redirected to a new page 

Step 20: Go to Rules just beside the Data

Step 21: Replace the default code with the following code, then press the Publish button.

{

  "rules": {

    ".read": true,

    ".write": true, 

  }

}

Step 22: Copy the URL of your Realtime Database and paste it into a notepad.

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 change my URL to your Realtime database URL in Step 22. Copy that URL and save it.

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

If you've done everything right, you can now click Save theme.

Conclusion


In this article, I explain How to use Firebase to add real-time post views to Blogger.One way to tell if an article is useful or not is by how many times it has been viewed. How many people have looked at the article and read it? I hope you liked it, and if you did, please tell your friends about it and keep reading our blog for more.


If you have any problems with the code or questions, feel free to ask them in the comments or join our Telegram Group to talk about them.

About the Author

Hello there, My Name is Farhan and Welcome To My Website. My Passion is to Share Knowledge With Everyone. Also I am a Larner.

Post a Comment

It's all about friendly conversation here at Neocord :) . I'd love to hear your thoughts!

Be sure to check back again because I do make every effort to reply to your comments here.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.