Realtime View Counter Using Firebase Database

Greetings and welcome to Sanve Design! In today's tutorial, we'll be delving into the creation of a Realtime View Counter utilizing the power of Firebase Database.

Our project revolves around a Firebase Realtime Database that meticulously monitors various events, with a special focus on tracking post views. What sets this tutorial apart is its implementation using Typescript and Firebase v9, showcasing an innovative approach.

You may want to read this post :

• How To Add Google Translate Button In Blogger
• How to make own Domain email without Hosting
• Lightbox Image with Vanilla Javascript

It's worth noting that the bundle size may be slightly larger due to the incorporation of the Firebase JavaScript SDK. Despite exploring the option of utilizing the Firebase Database REST API, it became apparent that the JavaScript SDK outperformed it significantly, especially in terms of response time.

Let's dive into the details and explore how to craft a robust Realtime View Counter using Firebase Database!

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:

To seamlessly integrate the view counter into your template, pinpoint the appropriate location within the existing structure and insert the code snippet. For instance, consider placing it just above the <data:post.body/> tag. This strategic placement ensures that the view counter is seamlessly incorporated into your template, enhancing the overall functionality and user experience.

Identifying the optimal spot within your template and pasting the code snippet in that specific location will allow for a seamless integration of the view counter. Take a moment to carefully choose the placement that aligns harmoniously with your template's design and functionality.

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

Locate the </body> tag in your code and smoothly incorporate the following CSS and Javascript just above it.

<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.jsdelivr.net/gh/itisuniqueofficial/js@main/view-counter-firebase.js'></script>

Conclusion

Within this post, I've delved into the intricacies of implementing a Realtime View Counter Using Firebase Database. I invite you to share your thoughts by leaving a comment, contributing to the discussion sparked by this informative content.

For any queries or further engagement, don't hesitate to reach out through our dedicated Contact Us page. Your feedback is invaluable to us, and we're eager to address any questions or comments you may have.

Thank you for visiting our website; I trust you find both enjoyment and value in the insights shared here.