Like Counter

Learn more about like counters

What is a like counter?

A like counter is a simple method of logging – and displaying – user approval. Adding a like counter to the UI design of an app or website will help to increase user engagement while also gathering valuable data.

From social media and blogging platforms to news-media websites and e-commerce stores, everyone loves a like. By clicking a like button, users are able to signal approval or enthusiasm with a minimum of effort. But as simple as the concept may be, the like button has literally changed the world over the last decade and a half.

Like counters first date back to the mid-2000s. Since that time they have gradually become ubiquitous; arguably even altering human behavior. Indeed, not only have many people come to derive much of their self esteem and social validation from the number of clicks they receive via like buttons, but the data provided has become invaluable to businesses everywhere.

Social media like counters

Now data from a like counter can be used to quite accurately predict everything from shopping preferences to voting habits. In a well-known social experiment conducted during the early days of social media, it was discovered that an algorithm could better predict a person’s behavior than their partner could; merely by studying the data collected from social media likes.

The like counter is undoubtedly one of the most powerful digital tools out there. While in recent years some social media platforms have chosen to hide likes from public view, like counters are still there clocking up data behind the scenes. Indeed the phenomenon doesn’t show any signs of going away just yet.

Types of animated like counters

There are two main types of animated like counters: the rolling number counter and the number ticker. Both types can be incorporated into your website or app to help your users interact with your content. When users click on the like counter each time they want to upvote a post, comment, video, product, or article, the number of likes gets aggregated and displayed to other users in real-time, establishing trust within the community.

The rolling number counter

This animated like counter has the same animation mechanics as a digital clock with digits that roll upwards or downwards when every second, minute, or hour passes. Often accompanied by an icon or text, the rolling number counter is mostly used to represent real-time user interaction with user-generated content, such as comments and videos.

The number ticker

The number ticker is often used for a slightly different purpose to the rolling number counter. Website and app developers prefer to use this type of like counter to show the total number of likes, views, donations, and similar metrics on a dashboard. The animation for the number ticker is usually rapid, going from 0 to the current total number in a matter of seconds

How JavaScript like counters are made

Like counters can be made with JavaScript or its more lightweight cousin, jQuery. Both coding languages can make numbers on your website or app more dynamic using just a few statements from a framework or library. The JavaScript code can be customised later as your preferences change.

A like counter made with JavaScript will usually contain a function that accepts a start, end, and duration, effectively turning the like counter into an animation. Designers can play with different parameters such as speed, which is the time in milliseconds that the counter will reach the desired number, the number styles, and even the text accompanying the like counter.