How to Make Realtime Post View Counter using Vanilla JS

Add an Realtime Post view Counter using vanilla js and show the realtime post views on website.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

How to add Real-Time Post View Counter?

Adding Realtime Post View Counter to Blogger Website will not require much knowledge about HTML, CSS, or JS because I have already designed it for you. What you need to do is to implement the codes in the right place in your Blogger Theme XML.

realtime post in blogger vanilla js

Let's take a look at its demo.

Creating Realtime Database and Adding Rules

First, we need to Create a Firebase Project to set up a real-time database in Firebase. We can be able to Store and Synchronize Data in real-time with a real-time database.

To create Firebase Project and real-time database follow these below steps:

Creating a Project in Firebase

Step 1: Go to Firebase Console.

Step 2: Click on Create a Project and Enter Project Name, accept the all terms and Continue.

Step 3: Enable and Configure Google Analytics even though you can disable Google Analytics for this Project skip this step and Click on Create Project.

Done! You have successfully created Project in Firebase. Now we need to set up a Realtime Database in this Project.

Realtime database setup and configuration

Step 1: Go to Firebase Console and Select your Project.

Step 2: Go to Realtime Database under the Build menu.

Create a realtime database firebase

Step 3:Click on Create Database, Choose the preferred location, and click on Next.

Step 4:Choose Locked Mode and click on Enable.

how to get realtime database url

Done! You Successfully Created Realtime Database, Now Copy the Below database URL And Paste it Somewhere it will be used in the theme HTML Setup.

Adding Rules to Database

Step 5: Now, Click on Rules and paste the following codes after replacing the marked parts with your Blog ID.

For Single Blog:

{
  "rules": {
    ".read": true,
    "BLOG_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}

For Multiple Blogs:

{
  "rules": {
    ".read": true,
    "BLOG_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    },
    "BLOG_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    },
    "BLOG_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}

Don't Forget to Replace marked Blog id with your Blog id.

Step 5: Click on Publish after making all the changes like the below image.

Adding firebase rules

Theme HTML changes

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance, if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to the 'customize' button.

Step 4: Click Edit HTML, and you will be redirected to the editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customize the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.

/*! Realtime Post View Counter by House Of Blogger */
.pVw{display:inline-flex;align-items:center;background:#fff;padding:4px 10px;border-radius:10px;box-shadow:0 0 25px rgba(0,0,0,.02);color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.pVw[data-view]{visibility:visible;opacity:1}
.pVw >svg{width:18px;height:18px;fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;margin-right:5px}
.pVw >svg .a{stroke:#204ecf}
.pVw::after{content:attr(data-view) ' views'}
.drK .pVw{background:#252526;color:#fff}
.drK .pVw >svg{stroke:#fff}
.drK .pVw >svg .a{stroke:#41b375}

Step 6: Now add the following HTML codes at the place you want to show in Blog Widget.

<!--[ Realtime Post View Counter by House Of Blogger ]-->
<span class='HOB_vw pVw' data-incr='true' expr:data-path='&quot;BLOG_&quot; + data:blog.blogId + &quot;/POST_&quot; + data:post.id'>
  <svg class='line' viewBox='0 0 24 24'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle class='a' cx='12' cy='12' r='3'/></svg>
</span>

You can replace true it with false, so that it will only show the views and will not increase (+1) it. For example, you can use it to show views of posts on the homepage.

Step 7: Now add the following JavaScript Code just above to </body> tag. If you don't find it, it is probably already parsed which is &lt;/body&gt;.

<script>
  /*<![CDATA[*/
  /*! Realtime Post View Counter by House Of Blogger */
  (() => {
    /* config */
    const config = {
      databaseUrl: 'https://mydatabase-default-rtdb.asia-southeast1.firebasedatabase.app',
      abbreviation: true,
      lazyload: true
    }
    /* main scripts */
    eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+c+'\\b','g'),k[c])}}return p}('12 22(10,7){21 27=36();14(22=12(7,8){21 9=27[7-=47];220 0===22.55&&(22.57=12(7){34(21 8,9,15="",11="",10=0,27=0;9=7.61(27++);~9&&(8=10%4?64*8+9:9,10++%4)&&(15+=93.108(107&8>>(-2*10&6))))9="106+/=".104(9);34(21 23=0,53=15.40;23<53;23++)11+="%"+("101"+15.75(23).72(16)).63(-2);14 111(11)},10=141,22.55=!0);21 15=27[0],11=7+15,15=10[11];14 15?9=15:(9=22.57(9),10[11]=9),9})(10,7)}12 20(7,8){14 22(7-128,8)}31 33=(7,8,9,15)=>{12 11(7,8){14 22(7-120,8)}31 10=28.127(11(114,115));8&&(10.117=8),10[11(110,131)]=9,10[11(126,125)]=7,15&&(10[11(124,123)]=15),28[11(122,121)+11(119,112)]("118")[0][11(116,50)](10)},52=7=>{21 8=24[9(-19,-26)](25(7));12 9(7,8){14 22(7- -113,8)}14 51<=24[9(-18,-13)](25(7))?8*(24[9(-18,-5)](25(7))/51)[9(-17,-3)](2)+"145":44<=24[9(-18,-37)](25(7))?8*(24.42(25(7))/44).144(2)+"143":41<=24[9(-18,1)](25(7))?8*(24.42(25(7))/41)[9(-17,-3)](2)+"142":24[9(-18,2)](25(7))},30=()=>{12 9(7,8){14 22(7- -140,8)}33(9(-139,-137)+9(-130,-56)+9(-136,-135)+"134-133.46",9(-132,-146),!0,()=>{12 23(7,8){14 9(7-129,8)}33(23(97,109)+23(62,50)+23(66,69)+23(70,71)+"46",23(73,74),!0,()=>{12 7(7,8){14 23(8- -77,7)}45(29[7(-92,-91)]){21 8={};8.79=29[7(-84,-91)];31 27=94.96(8,7(-86,-90)+7(-85,-89)+7(-68,-88)+"7");34(21 9=28[7(-82,-87)+"98"](7(-92,-86)),15=27[7(-99,-85)](),11=0;11<9.40;11++){21 10=(9=9[11])[7(-67,-84)](7(-80,-83));(10=15.105(10))[7(-65,-82)](7(-100,-81),12(9,15){14 12(7){12 8(7,8){14 22(8- -32,7)}0<(7=7[8(49,60)]()?7.103():0)&&(9[8(102,95)](8(49,147),29.76?52(7):7),9.138.148(8(161,204))),8(205,48)==9[8(206,207)]("208-211")&&(9.212(8(48,47),!1),7=213(7)+1,15.214(7))}}(9,10))}}})})};12 36(){21 7=["215","216","218","219","203","221","222","232","225","223","224","226","227","228","229","230","231","233","217","202","172","200","169","168","167","166","165","164","163","162","201","159","149","158","157","156","155","154","153","152","151","150"];14(36=12(){14 7})()}(()=>{45(!0===29[20(170,59)]){21 43=[],39=[];31 38=()=>{12 7(7,8){14 20(7- -160,8)}0==43[7(-194,-209)]&&171==35[7(-193,-210)](7(-192,-183))&&(35[7(-191,-209)]("185",1),30())};199[20(58,198)+"7"](20(197,196),7=>{12 8(7,8){14 20(7- -195,8)}(0!=28.190.54&&0==39[8(-189,-188)]||0!=28[8(-56,-187)].54&&0==39.40)&&38()},!0),28[20(186,184)+20(173,182)](20(181,59))[0][20(58,180)+"7"](20(179,178),7=>{38()}),35[20(177,176)](20(175,174))&&30()}78 30()})()',10,234,'|||||||r|e|n|u|o|function||return|t|||||_0x1341d1|var|_0x285e|c|Math|Number||a|document|config|postVw|const||loadJs|for|localStorage|_0x2d8c||da|arSc|length|1e3|abs|arLz|1e6|if|js|311|310|301|612|1e9|abvr|x|scrollTop|hNvRCA|376|FWQYIR|1324|1318|306|charAt|629|slice|||630|||621|632|626|toString|633|645|charCodeAt|abbreviation|725|else|databaseURL||||||||||||||String|firebase|307|initializeApp|628|l|||00|326|val|indexOf|ref|abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789|255|fromCharCode|613|590|decodeURIComponent|606|337|589|578|595|id|head|594|278|602|593|576|592|587|591|createElement|975|989|360|597|358|app|ebase|375|359|378|classList|361|682|arguments|K|M|toFixed|B|370|308|remove|zgf0ys1PBMnY|y2XPy2S|yM9KEq|C2nYB2XS|ywrKrxzLBNrmAxn0zw5L|C2v0sxrLBq|tfPFvKLfvW|z2v0sxrLBq|BgvUz3rO|Bgf6EwXVywq|Dhj1zq|1514|317|zgf0ys12Awv3|C2v0qxr0CMLIDxrL|zxHPC3rZ|DMfSDwu|B25Jzq|zgf0ys1WyxrO|z2v0qxr0CMLIDxrL|zgf0ywjHC2u|1319|null|CxvLCNLtzwXLy3rVCKfS|1291|1306|1322|1312|1321|1316|1327|1336|1326|1295||1305|LZ_VIEW|1290|387|403|382|documentElement|||||1702|1343|1325|1330|window|lKHpqL92DW|AgLKzgvU|sg91C2uGt2yGqMXVz2DL|z2v0rwXLBwvUDhncEvrH|309|324|304|302|data|||incr|setAttribute|parseInt|set|C2nYAxb0|yxn5BMm|Awv3ienVDw50zxiGyNKG|C3jJ|B25SB2fK|void|z05HBwu|yxbWzw5Kq2HPBgq|Dg9gAxHLza|Ahr0Chm6lY93D3CUz3n0|ywjZ|yxrPyY5JB20VzMLYzwjH|C2vQCY84lJeWlJeVzMLY|zMiTyxbW|zwjHC2uTzgf0ywjHC2uU|zMiTzgi|zgf0ywjHC2vvCMW|C2LNBG|uMvHBhrPBwuGug9ZDcbw'.split('|')));
  })()
  /*]]>*/
</script>

Replace the marked parts, i.e.
1. Realtime Database URL in databaseUrl key.
2. true or false in abbreviation key.
3. true or false (recommended: true) in lazyload key.

Step 8: Lastly, Save the changes by clicking on this icon

That's done! You have successfully added the Realtime Post View Counter to your Blogger Site.

Final Words

Today I Shared the whole code for real-time post views for your blogger website, if you have any doubt related to this post then feel free to comment below.

If you liked this post, I’d be very grateful if you’d help it spread by sharing it with your friends and in blogging groups. Thank you!

In the upcoming posts, I will share amazing tutorials and codes like this post, so make sure you bookmark our website by pressing CTRL+D

Also, check out our nextgen blogger template Plus UI which will provide you amazing and useful features.

Getting Info...

11 comments

  1. It would be nice if it worked, in Lantro UI, and in Median UI it doesn't work, also step 6 is not well explained where to apply!
    1. It is working in all of template check demo: https://unplug.fineshopdesign.com/2022/08/realtime-post-view-counter.html
    2. Hello, Wallace Fernandes! As we know all templates have different codes that's why in the Step 6, we mentioned you can add anywhere in the Blog Widget. Suppose if you want to add it at top before the post body starts, you need to add it above <data:post.body/>.So there is no fixed place where to add the given code. It depends on the template and the user (where he/she wanna show the views). Just place it in the Blog Widget where you wish the views will appear.
      If you have any doubt that the code is not working, please check out the demo.
    3. Thanks for the clarification!
  2. Can you share it with no encrypt JavaScript?
    1. Encrpyted Code Works Perfectly...!!
    2. How does the tool appear on the home page?
  3. Thank you very much, it was a very useful article, it was incredibly useful, I immediately added it to my blogger, thank you.
    1. I'm glad it helped you.
  4. great job, could you tell me how i can get this view to appear in the thumbnails just like in this template, i'm using Median UI 1.6 Thank you!
  5. I added the counter to the posts on the homepage, just like plus uide, but it doesn't work on posts on the homepage. Can you help?
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
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.