After a long time, I am back with a new article titled "Realtime View Counter using Firebase Database".
In this post, I am going to share a Firebase Realtime Database project that counts post views (or any custom event) in real time. This is also my first project using TypeScript with Firebase v9, and I’m really excited to walk you through it.
Since this project uses the Firebase JavaScript SDK, the final bundle size is slightly larger. I also experimented with the Firebase Realtime Database REST API, but the response turned out to be noticeably slower compared to the SDK. For this reason, I decided to stick with the JavaScript SDK to achieve better performance and smoother real-time updates.
Using it as a View Counter
You can easily use this project as a View Counter for your blog posts by simply specifying the desired database path. For example, let’s try integrating it into a Blogger website and track the views for individual posts.
Important!
Before we start adding any code to the XML file, I strongly recommend that you take a full backup of your current Blogger theme. In case something goes wrong during the process, you’ll always be able to restore your site back to its previous state safely.
- First of all Login to your Blogger Dashboard.
- On Blogger Dashboard, click Theme.
- Click the arrow down icon next to 'customize' button.
- Click Edit HTML, you will be redirected to editing page.
- Now search the code
]]></b:skin>and paste the following CSS Codes just above to it. - This step can be a little tricky because you need to decide where exactly you want the view counter to appear in your template. You’ll have to locate the correct position inside your Blogger theme’s XML and paste the code there. For example, if you want the counter to appear above the post content, you can place it right before:
<data:post.body/> - Now, add the following JavaScript code just above the
</body>tag in your Blogger template. If you cannot find the</body>tag, it is likely already parsed as</body>, so you can place the code just above that. - Finally, save the changes to your Blogger template by clicking on the icon. Make sure to double-check everything before saving to avoid any issues on your live site.
Dark Mode Customization!
If your Blogger template includes a dark mode feature, and you want to display a different color when dark mode is active, you can easily customize the code according to your needs. Keep in mind that each template may use a different dark mode class.
So, make sure to replace the marked class in the code with the actual dark mode class used in your template.
[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: 0.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: 0.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);
}<div class='post-view' expr:data-increment='data:view.isPost ? "1" : "false"' expr:data-path='"/BLOG_" + data:blog.blogId + "/POST_" + data:post.id + "/VIEWS"'/><script>
function viewCounterLoaded () {
const counter = new ViewCounter({
databaseUrl: "https://example.firebaseio.com",
selector: ".post-view",
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/fineshopdesign/view-counter@main/build/bundle.js'></script>Related Posts
Using it as a Click Counter
This example shows how you can turn any button into a click counter using Firebase Realtime Database and the ViewCounter library.
<style>
.click-counter::before {
content: "0"
}
.click-counter[data-view]::before {
content: attr(data-view);
}
</style>
<button class='click-button'>Clicks (<span class='click-counter' data-path='/BLOG_0000/POST_0001/CLICKS' data-increment='false'></span>)</button>
<script>
function viewCounterLoaded () {
const counter = new ViewCounter({
databaseUrl: "https://example.firebaseio.com",
abbreviation: true
});
const clickButton = document.querySelector(".click-button");
const clickCounter = document.querySelector(".click-counter");
counter.addElement(clickCounter).then(function(counterElement) {
clickButton.addEventListener("click", function() {
counterElement.increment(1);
});
});
};
</script>
<script defer="" onload="viewCounterLoaded()" src="https://cdn.jsdelivr.net/gh/fineshopdesign/view-counter@main/build/bundle.js"></script>