Floating Social Media Icons Widget
Keep your Instagram, YouTube, LinkedIn and other profiles one click away on every page with a slim vertical strip pinned to the left or right edge of the window. Hover or keyboard focus shows each network's name in a tooltip, an optional expand mode slides the names out, and on phones the strip turns into a compact bottom row or steps aside entirely.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="floating-social-links" data-profiles="instagram | https://www.instagram.com/example facebook | https://www.facebook.com/example tiktok | https://www.tiktok.com/@example youtube | https://www.youtube.com/@example pinterest | https://www.pinterest.com/example website | https://riverside-cafe.example email | [email protected]"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
The kit appends one fixed element to the end of your page body, inside its own Shadow DOM so your theme cannot distort it. On screens 768 px and wider it is a vertical rail centred on the window's left or right edge; the offset option moves it up or down in pixels so it can clear a chat bubble, a cookie notice or a sticky header. Each icon is a real link with a full spoken name (Riverside Cafe on Instagram, opens in a new tab), and the tooltip is decoration only - it appears on hover and on keyboard focus but is hidden from screen readers so nothing is read twice. Below 768 px the rail would cover text, so by default it becomes a row along the bottom of the screen that respects the iPhone home-indicator area, and the kit adds an invisible spacer of the same height at the end of the page so your footer is never hidden. Choose hide to show nothing on phones, or same to keep the rail. The rail sits at z-index 2147483000: above ordinary content, below the 2147483647 most cookie banners use.
Method
- Wide screens (>= 768 px): position: fixed; top: 50%; translateY(-50%) plus the offset in px (-400 to 400); left or right max(8px, safe-area inset)
- Phones (< 768 px): bar (bottom row + spacer of 56 px + env(safe-area-inset-bottom)), hide, or same
- Accessible name per icon: "<name> on <network> (opens in a new tab)"; tooltip aria-hidden
- Network chosen by the address's host name; same line formats and 20-profile cap as the follow buttons
Worked examples
Clearing a cookie notice
Inputs: position=right, offset=-140
Result: The strip sits 140 px above the window's vertical centre on the right
Use a negative offset to move the strip up, positive to move it down.
Phone visitors
Inputs: mobile=bar on a 390 px wide screen
Result: A bottom row of icons with a 56 px spacer plus the safe-area inset at the end of the page
The row never hides the page's last lines.
Limitations
- One strip per page is the sensible maximum; two floating strips on the same edge overlap.
- Very long profile lists make a tall rail; keep it to the five to seven profiles you actually use.
- No follower counts or follow-in-place buttons - each icon is a link to your profile.
Where publishers use it
- A portfolio site keeping Behance, Dribbble and LinkedIn visible beside long case studies
- A restaurant site pinning Instagram and TikTok to the right edge while visitors browse the menu
- A YouTuber's blog using the expand-on-hover mode so the channel name slides out from the left edge
- A shop that hides the strip on phones because its own bottom navigation already uses that space
Questions
Will the strip cover my cookie banner or chat widget?
It sits at z-index 2147483000, one step below the maximum value that most consent banners use, so a banner stays on top. If a chat bubble or a sticky element shares the same edge, set an offset (for example -120 to move the strip 120 px up) or choose the other side.
What happens on a phone?
A side rail on a narrow screen covers words, so below 768 px the icons move into a bottom row. The kit adds a matching spacer at the end of your page so the row never hides your footer, and the row leaves room for the iPhone home indicator. You can also hide the strip on phones or keep the rail if your layout has room.
Are the hover tooltips accessible?
The tooltip is never the only name. Every icon carries its own spoken name, the tooltip also appears on keyboard focus, and it is hidden from screen readers so the name is not announced twice. In expand mode the visible name slides out next to the icon and is part of the same name.
Can I show the strip only on some pages?
Yes - it appears wherever its embed code is. Put it in your blog template but not your checkout, or add it to individual pages. In single-page apps the kit removes the strip when its embed element leaves the page after a route change.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Floating Social Media Icons https://a2z.tools/embed/floating-social-links
<a href="https://a2z.tools/embed/floating-social-links">A2Z Tools Floating Social Media Icons</a>
[A2Z Tools Floating Social Media Icons](https://a2z.tools/embed/floating-social-links)
Floating Social Media Icons by A2Z Tools - https://a2z.tools/embed/floating-social-links
Related widgets
-
Follow buttons for up to 20 profiles in brand colours - icons, labels, card, list or tiles. No social scripts.
-
Social icons for your site footer that take on the footer's own colours and light up in brand colour on hover.
-
Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.
-
A round corner button that unfolds into labelled Call, WhatsApp, Email, Directions and booking actions.
-
One Share button that opens the phone's own share sheet, with a tidy fallback panel on desktop.
-
A Copy link button or address box that puts a clean page URL on the clipboard and confirms it.
