Social Badges

Anyone managing several social profiles often wants to show an always-up-to-date follower count on their own site — but official APIs from platforms like Instagram are closed or limited, and repeatedly scraping public pages risks violating terms of service. Social Badges came out of a technical validation effort to solve the problem in a sustainable way.

The architecture

The system splits the roles into three parts: a Chrome extension, installed only by the profile owner, reads their own data (followers, avatar, latest post) while browsing their already-logged-in account; that data is sent to an endpoint that stores it; the public embed on the site reads that data read-only. Site visitors never trigger a request to Instagram or YouTube themselves: they only ever ask our endpoint.

For Instagram, the flow reads only the owner's own username, taken from the "Profile" button on the home feed — never arbitrary handles — precisely to stay within reasonable data use and avoid resembling mass scraping. For YouTube, the data (subscribers, avatar, latest video) is public in the channel page's HTML, so it's fetched directly server-side via PHP, without needing the extension. LinkedIn, added later, follows the same logic as Instagram: the data is only readable from the owner's already-logged-in browser.

The widget

Embedding it on a site just takes a small div and a script: the widget (Shadow DOM, so it neither inherits nor pollutes the host page's styling) exposes three variants — card, compact and post (with a thumbnail and title of the latest published content) — and it's the same widget powering the Content Creator section of this very portal.

Embedding it is designed to require the bare minimum: a <div class="p3d-badge" data-id="..."> wherever the badge should appear, plus a single <script> pasted once, even at the bottom of the body. The code generator on the project's site also offers multiple badges (to embed more than one) and compact variants.

The three variants cover different uses: Card is the base format with avatar and subscriber count; Compact is a pill meant for headers or sidebars where space is tight; Post also adds the thumbnail and title of the latest published content, useful for showing not just "how many of us" but also "what we just published".

The risky question: can Instagram be read?

The whole project rested on a single unknown: can I get the Instagram follower count without an official API? If the answer had been no, there was no product. Logged out, Instagram throws a consent wall in your face and shows nothing. Logged in, though, the home feed contains a useful detail: the «Profile» button is a link to your own username, with your avatar next to it. From there the extension derives its own handle and makes one call to an internal Instagram endpoint — the one the site itself uses to fill the profile card — with a particular header identifying the web app. Back comes a JSON with followers and profile picture. It worked on the first try, and that's why the rest got built: first you test the assumption that can sink everything, then you build the interface.

The avatars that rot

The first real bug showed up with badges already live: after a few days the Instagram profile pictures vanished, leaving the broken-image icon. The reason is hidden in the avatar URL itself: it carries a signed expiry parameter, a date in hexadecimal. Past that point, Instagram's CDN answers «403» and the image no longer loads. The fix is a small PHP proxy: the badge never points straight at the Instagram avatar, but at a portal URL that downloads the image, caches it and re-serves it — so even when the original link expires, the badge keeps showing the right face. YouTube avatars, by comparison, are stable URLs: no problem, no proxy.

Why the «recipe» lives on the server

The extension doesn't know how to read the pages: it downloads the instructions from the server every time. It sounds like a strange detour, but it has a practical reason. Instagram and YouTube change the structure of their pages without notice, and the day they do, the badge stops updating. If the reading rules lived inside the extension, fixing them would mean publishing a new version and waiting for Chrome Web Store review — days, at best. With the rules on the server, the fix is a file uploaded in thirty seconds, and every user gets it on the next pass.

The line that holds it all up

That single call to Instagram, from a logged-in session, works with any username, not just your own. This is exactly where a project like this can turn into a problem: using it to collect other people's numbers, at volume, is the fastest way to get the account blocked — and to end up outside the terms of service. That's why the extension is written to read only the username it finds in the «Profile» button, i.e. yours, and it does so sparingly: one check every six hours, not on every visit. It's not a technical limitation, it's the choice that separates a tool that lasts from one that lives a week.

It updates itself, when you pass by

Once a badge is generated, there's nothing to redo by hand. In the background, the extension refreshes the data of already-created profiles whenever the owner opens the Instagram home or their own YouTube channel page — silently, asking nothing, and always with the same six-hour brake. In practice the badge stays fresh because the owner, sooner or later, opens their socials anyway.

What's actually behind this site's badges

The portal's Content Creator section is powered by these badges, and it's worth saying what they actually show: five YouTube channels (the kids' basketball channels, the Yurrena mixes channel, the games one), a LinkedIn profile with a few dozen connections, and an Instagram profile with two followers — which belongs to a Siberian cat. The badge treats them all the same: it reads the number, whether it's two million or two, grabs the avatar and the latest post, and displays it. It started as an internal tool for a family with several scattered accounts, and it still is — except the infrastructure underneath (a thin extension, an endpoint holding only public data, a proxy for the avatars, a hot-swappable recipe) is now solid enough to hand to anyone.