How to Add Blogger Realtime Post View 2023 Topic Impression Counter

 

How to Add Blogger Realtime Post View 2023 Topic Impression Counter

Hello dear visitors of BademWEB. In this topic, I will tell you how you can add post views, that is, a topic display counter, to your blogger theme.

Unfortunately, this feature is not available in most blogger themes. However, it is quite simple to add this blogger widget to your theme in just a few minutes, completely free of charge.

First, if you don't have a Firebase account, create one for free now. We will add views to our shares using the Firebase realtime database feature.

FireBase Console Link

Click on Create Project as marked in the picture

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

 

Go to your Blogger panel and search for <data:post.body/> and add the following code just above it.

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

Go to your Blogger panel and search for the </body> code and add the following code just above 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>

Replace https://fir-1-cbfb4-default-rtdb.firebaseio.com/ link with your own firebase realtime database link in the code above. Open URL