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, 

  }

}

<!-- 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'/>

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

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

Conclusion