Putting a Live Number on a Link Preview
By Rehan Sayyed, SRT Corporates · Published
When someone pastes a link to Click With The World into a chat or a social post, a small card appears: a dark background, the words "Total Clicks Worldwide", and the number. The number is the real one, fetched when the card is made. This is how that picture gets drawn.
A picture that has to be made on request
Link previews work from a tag in the page that points to an image. Most sites point to a fixed picture. Ours points to a small function on our host that draws a new picture each time it is asked.
The function does three things: it reads the current total, lays out the card, and returns a PNG of 1,200 by 630 pixels.
Drawing without a browser
On a web page, the browser turns layout and fonts into pixels. A server function has no browser, so the card is built in two steps:
- A library called Satori takes a description of the card, written much like a web page, and turns it into an SVG drawing.
- A second library, Resvg, turns that drawing into a PNG.
A ready-made package exists that bundles both steps, and we tried it first. It would not run in a plain project like ours, so the function uses the two libraries directly.
Fonts needed care as well. The function carries its own copies of the Inter typeface, because there are no system fonts to fall back on. They have to be ordinary single-weight font files; the newer "variable" kind made the drawing step fail.
Making long numbers fit
The frame around the number has a fixed width, but the number keeps growing. So the text size steps down as the number gets longer: the largest size holds anything up to 99,999, the next up to 9,999,999, the third up to 999,999,999, and a smaller one is ready beyond that.
We also changed typeface once. The display font we started with drew the digit 0 wrongly in this renderer, so a total such as 100 came out looking broken. The digits are now set in Inter Bold.
The read that stopped working
At first the function read the total the simple way, with one plain request to the database.
Then we switched on Firebase App Check, which refuses any request that does not carry proof it came from the real site in a real browser (see Bots, App Check and a Cooldown). A server function is not a browser and cannot produce that proof. The request was refused, and the preview card lost its number.
The fix was to let the function identify itself in a different way. It now signs in with a service account, a key that belongs to the project and is kept in our host's private settings. The key is never in the repository and never reaches a visitor's browser. With it, the function asks Google for a short-lived access pass, reuses that pass until it is close to expiring, and attaches it to the one read it makes.
Never show a made-up number
Sometimes the read fails. The network may hiccup, or the pass may be refused. In that case the function does not print a zero or reuse an old figure. It draws the same card with no number on it and a line inviting people to join the global click.
That version is kept for only a few seconds, so a single bad moment does not linger.
How fresh is the number?
A successful card is reused for 60 seconds before a new one is drawn. Without that, a popular link could trigger a new drawing for every viewer.
The platforms add their own delay. Chat apps and social networks usually fetch a preview once and keep their copy for a while, so the number on a card you see in a feed can be older than the number on the site. The site itself is always live.
Why bother?
A fixed picture would have been one line of work. But the whole site is a single number, and a preview that shows yesterday's number, or none, would misdescribe it. The card is often the first part of the site people see, before they decide whether to click through.