Floating Share Dock — Free HTML CSS JS Social Snippet

Readers share what is easy to share. A floating share dock — a small vertical bar pinned to the side of an article that scrolls with the reader — keeps sharing one tap away at every point in the content, without a clunky row of buttons interrupting the text. This component is a complete share dock with X (Twitter), Facebook, and LinkedIn intent links, a copy-link button with a clipboard fallback, hover tooltips, an optimistic share count, and a responsive layout that drops from a left-edge vertical column to a bottom horizontal bar on mobile. It is built in HTML, CSS, and vanilla JavaScript.

Fixed positioning that follows the reader

The dock uses position: fixed with left: 28px; top: 50% and transform: translateY(-50%) to centre it vertically against the viewport. Because it is fixed rather than absolute, it stays in place as the article scrolls — always reachable without hunting for it. The article content is given left padding so the text never collides with the dock. This is the pattern used by Medium, news sites, and most long-form blogs.

Share intent links, not SDKs

Each network button opens a share "intent" URL — the official endpoint each platform provides for pre-filled sharing (twitter.com/intent/tweet, facebook.com/sharer, linkedin.com/sharing/share-offsite). The script builds these from the current page URL and title with encodeURIComponent and opens them in a sized popup window via window.open(..., 'noopener,width=600,height=520'). This approach needs no third-party SDK, loads no tracking scripts, and adds zero weight to the page — a deliberate contrast to the heavy official share widgets that slow sites down.

Copy link with clipboard fallback

The copy button writes the page URL to the clipboard with the async navigator.clipboard.writeText() API, wrapped in a try/catch that falls back to a hidden-textarea document.execCommand('copy') for insecure contexts. On success the button swaps its link icon for a green checkmark (a pure-CSS icon toggle via the .copied class) and a toast slides up confirming "Link copied." Both the icon and the toast reset on timers that are cleared on repeat clicks.

CSS tooltips from aria-label

Each button reveals its label on hover using a ::after pseudo-element whose content is attr(aria-label) — so the accessible label and the visible tooltip are the same single source of truth, and there is no duplicated text to keep in sync. The tooltip fades and scales in beside the button. On hover the network buttons also fill with their real brand colour (X black, Facebook blue, LinkedIn blue), passed in via a --c CSS custom property on each button, so theming a button is a one-attribute change.

Optimistic share count

A small count sits at the bottom of the dock. Clicking a network button optimistically increments it immediately with parseInt + 1, rather than waiting for a server round-trip — the responsive feedback that makes the interaction feel instant. In production you would reconcile this with a real count from your analytics or a share-count API, but the optimistic bump is what users perceive.

Responsive vertical-to-horizontal flip

A media query at 720px transforms the dock from a vertical left-edge column into a horizontal bar fixed to the bottom-centre of the screen — the mobile-friendly placement within thumb reach. The tooltips re-orient to appear above the buttons instead of beside them, and the share count's divider switches from a top border to a left border. The same component serves desktop and mobile with only CSS changes.

Customisation

Set SHARE_URL and SHARE_TEXT (they default to the live page URL and the H1) to control what gets shared. Add or remove network buttons by editing the markup and the INTENTS map. Change each button's --c brand colour, swap the #6366f1 copy accent and #059669 success green, and adjust the dock offset and radius to match your layout.