← SOFTWARE & PROJECTS
● ONLINE
TOOL

Social Badges

Live badges with avatar, followers and latest post for YouTube, Instagram and LinkedIn, embeddable in one line of code. Chrome extension included.

STATUSOnline
PUBLISHEDJuly 1, 2026
STACKJavaScript · Chrome Extension · API

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.

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.

Badge embed code: a div with data-id plus a script pasted just once

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 available badge variants: Card, Compact and Post

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".

#js#chrome#api
OPEN THE PROJECT ↗ ← Back to all projects