Realtime View Counter using Firebase Database

Hello Guys and welcome to Sanve Design Our Tutorial today is about Realtime View Counter using Firebase Database

A Firebase Realtime Database Project that keeps track of any event, including post views. My first project using Typescript and Firebase v9 is this one.

The size of the bundle is slightly larger because it makes use of the Firebase Javascript SDK. I attempted to use the Firebase Database REST API, but it performed far worse than the Javascript SDK in terms of response time.

FIREBASE RULES:

  {
  "rules": {
    ".read": true,
    ".write": true
  }
}

CSS CODES:

Search the code ]]></b:skin> and paste the following CSS Codes just above to it.

[data-path]{--text-color:#000;--text-color-dark:#fff;--icon-loading:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' x='0px' y='0px' fill='%23000'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg>");--icon-eye:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25'><path d='M15.58 12c0 1.98-1.6 3.58-3.58 3.58S8.42 13.98 8.42 12s1.6-3.58 3.58-3.58 3.58 1.6 3.58 3.58Z'></path><path d='M12 20.27c3.53 0 6.82-2.08 9.11-5.68.9-1.41.9-3.78 0-5.19-2.29-3.6-5.58-5.68-9.11-5.68-3.53 0-6.82 2.08-9.11 5.68-.9 1.41-.9 3.78 0 5.19 2.29 3.6 5.58 5.68 9.11 5.68Z'></path></svg>");--text-loading:"--- --";--text-loaded:attr(data-view);--border-color:rgba(0, 0, 0, 0.1);--border-color-dark:rgba(255, 255, 255, 0.2);line-height:1rem;padding:10px;border:1px solid var(--border-color);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:14px;color:var(--text-color)}[data-path]::before{content:"";width:20px;height:20px;background-size:20px;background-repeat:no-repeat;background-position:center;opacity:.8;-webkit-mask:var(--svg-icon);mask:var(--svg-icon);background:var(--text-color);--svg-icon:var(--icon-loading)}[data-path][data-view]::before{--svg-icon:var(--icon-eye)}[data-path]::after{content:var(--text-loading);opacity:.8}[data-path][data-view]::after{content:var(--text-loaded)}.drK [data-path]{--text-color:var(--text-color-dark);--border-color:var(--border-color-dark)}
  

HTML CODES:

Where do you want to add the view counter in your template. You have to find the correct place as per your template and paste it there, for example: above <data:post.body/>

<div class='fsd-rpv' expr:data-increment='data:view.isPost ? &quot;1&quot; : &quot;false&quot;' expr:data-path='&quot;/BLOG_&quot; + data:blog.blogId + &quot;/POST_&quot; + data:post.id + &quot;/VIEWS&quot;'/>

JAVASCRIPT CODES:

The following Javascript just above to </body> tag. If you don't find it, it is probably already parsed which is </body>.

<script>
  function viewCounterLoaded () {
    const counter = new ViewCounter({
      databaseUrl: "https://example.firebaseio.com",
      selector: ".fsd-rpv",
      abbreviation: true
    });
    if (typeof infinite_scroll !== "undefined") {
      infinite_scroll.on("load", counter.init.bind(counter));
    }
  };
</script>
<script defer onload='viewCounterLoaded()' src='https://cdn.sanvedesign.com/view-counter-main/build/bundle.js'></script>

---

Conclusion

In this post, I have talked about Realtime View Counter using Firebase Database. Tell us What You Say About The Post by Making a Comment and if you have any questions Contact Us at the Contact Us page. Hope You Enjoy In Our Website.

Refrence:
https://www.sanvedesign.com/2023/08/realtime-view-counter-using-firebase.html