A floating social bar is that strip of share buttons that rides along the edge of the screen as the visitor scrolls — pinned to the left of the article on desktop, or docked to the bottom on phones. The pitch is simple: keep sharing one click away at all times and more people will share. Sometimes that is true. Just as often, the bar covers text on small screens, drags in a pile of third-party JavaScript, and earns two shares a month.
We have added share bars to Joomla sites, removed them from Joomla sites, and — more usefully — measured what they actually did in between. This article covers the three ways to get a floating share bar in Joomla, where floating placement helps and where it hurts, how to keep the performance cost near zero, and how to find out whether anyone is actually clicking the thing.
Plugin, module or hand-rolled: three ways to build it
In Joomla terms, "floating social bar plugin" usually means one of three implementations, and the differences matter.
A content plugin
Content plugins hook into article rendering, so they can inject share buttons into every article automatically, with per-article URLs and titles filled in for you. This is the right tool when you want share buttons on hundreds of blog posts without touching any of them. The downside is that plugins expose fewer placement options — you get the positions the developer thought of.
A module
A share module is published in a template position like any other module, and you control exactly which pages show it through Menu Assignment. Modules are better when you want the bar on some sections but not others, or want to place it in a very specific spot in the layout. Fixed-position styling (the "floating" part) comes from the module's own CSS. If you are unsure which positions your template offers, see our guide to finding template module positions in Joomla.
Hand-rolled HTML and CSS
The option nobody sells you: a Custom HTML module containing plain share links, floated with a few lines of CSS. No extension to update, no third-party script, no tracking. We walk through the Custom HTML technique itself in how to create a Custom HTML module in Joomla; here is what the share bar version looks like:
<div class="share-bar">
<a href="https://www.facebook.com/sharer/sharer.php?u=PAGE_URL"
target="_blank" rel="noopener" aria-label="Share on Facebook">FB</a>
<a href="https://twitter.com/intent/tweet?url=PAGE_URL&text=PAGE_TITLE"
target="_blank" rel="noopener" aria-label="Share on X">X</a>
<a href="mailto:?subject=PAGE_TITLE&body=PAGE_URL"
aria-label="Share by email">Mail</a>
</div>
/* custom CSS */
.share-bar {
position: fixed; left: 0; top: 40%;
display: flex; flex-direction: column; z-index: 50;
}
.share-bar a {
padding: 12px; background: #222; color: #fff;
}The catch is the PAGE_URL placeholder: a static Custom HTML module cannot insert the current page's URL by itself. Hand-rolling works best on a handful of key pages where you can paste the real URL, or with a small template override that fills it dynamically. For automatic per-article buttons, use a plugin.
Where floating bars help — and where they hurt
Floating placement is a trade: constant visibility in exchange for permanently occupied screen space. It tends to pay off on long-form content, where the reader spends minutes on the page and the end-of-article buttons are far away. It tends to backfire on short pages, product pages and anything transactional, where the bar is just one more thing between the visitor and the action you actually care about.
The two failure modes we see most:
- Mobile overlap. A left-edge vertical bar that was elegant on desktop lands on top of the article text on a 360-pixel screen, covering the first characters of every line. Bottom-docked bars collide with cookie banners, sticky headers, chat widgets and the browser's own toolbars. If your site also runs an off-canvas menu, expect z-index fights — the same stacking battles we describe in our responsive menu module guide.
- Layout shift. Share widgets that load late and then push or resize content contribute to Cumulative Layout Shift, one of the Core Web Vitals. A fixed-position bar done right causes zero shift because it sits outside the document flow — but a widget that injects an inline placeholder first and floats it later can shift the page twice.
Ground rules that avoid most of the pain: on mobile, either hide the bar entirely or dock it to the bottom with compact icons; never cover body text; keep the bar clear of any fixed header; and reserve the bottom edge for the single most important action on the page — which on many pages is a call to action, not a share button. (On that subject, our piece on how to create a call to action in Joomla pairs well with this one.)
Choosing which networks to include
Every network you add dilutes the others and widens the bar. Pick three to five based on where your audience actually lives, not on which icons look nice together. For most content sites the honest list is short: Facebook, X, LinkedIn for business topics, WhatsApp or Telegram for mobile-heavy audiences, plus email and a copy-link button — which quietly outperforms half the social icons on many sites because people paste links into chats you cannot see.
Drop networks your audience does not use. An icon with zero clicks is not free: it costs space, adds visual noise, and on script-based widgets it can add requests. Review the list twice a year and prune.
Performance: share scripts vs share links
This is the biggest quality difference between share bar implementations, and it is invisible in screenshots. There are two fundamentally different ways a share button can work:
- Script-based widgets load JavaScript from the social network or a share-aggregator service. They can show live share counts and native-styled buttons, but each network's script means extra requests, extra kilobytes, and third-party cookies following your visitors around.
- Plain share links are ordinary anchors pointing at each network's share endpoint, like the sharer.php example above. They load nothing until clicked, track nobody, and work with JavaScript disabled.
Here is how the three Joomla approaches typically stack up:
| Approach | Extra requests on load | Share counts | Per-article automation | Maintenance |
|---|---|---|---|---|
| Script-based plugin/widget | Several per network | Often yes | Yes | Extension updates, third-party changes |
| Link-based plugin | None (icons aside) | No | Yes | Extension updates only |
| Hand-rolled Custom HTML module | None | No | No — static URLs | None |
Our default recommendation is a link-based plugin: automation without the script tax. Share counts are the usual argument for script widgets, and honestly, unless your counts are impressive they work against you — a row of zeros under an article is social proof in the wrong direction.
One more performance note: use inline SVG or an icon font you already load for the icons, not five separate PNG requests, and never let a share widget be the reason your page loads a second copy of jQuery.
Accessibility: share bars that everyone can use
Floating bars fail accessibility audits in predictable ways, and the fixes are cheap:
- Label the icons. An icon-only link with no text is announced by screen readers as "link" and nothing else. Give every button an aria-label like "Share on Facebook".
- Keep keyboard access. Real anchors are tabbable for free. Widgets built from clickable divs often are not — one more reason to prefer plain links.
- Mind contrast and size. Tiny pale icons on a pale strip fail contrast requirements; touch targets should be at least about 44 pixels.
- Do not trap the view. A bar that covers content cannot be dismissed by keyboard users any more than by anyone else. If it can overlap anything, add a close button.
- Respect reduced motion. If the bar slides or bounces in, wrap the animation in a prefers-reduced-motion media query.
Measuring whether anyone actually shares
Most floating share bars are installed on faith and never measured. Measuring is not hard, and the results decide whether the bar deserves its screen space.
With plain share links, add a click event in your analytics tool — most modern analytics let you track outbound clicks or custom events with a small snippet or a built-in toggle. Tag each network separately so you learn not just whether people share, but where. Script-based widgets sometimes report their own counts, but you are trusting a third party to grade its own homework; independent click tracking is better.
Then run the honest experiment: note weekly share clicks for a month, and compare them against the page's traffic. If two thousand article views produce three share clicks, the floating treatment is not earning the space — move the buttons to the end of the article and spend the visual attention on something with a pulse, like a newsletter signup. If long-form guides show meaningfully higher share rates than news posts, keep the bar on guides only; Joomla's menu assignment makes per-section publishing trivial.
Also watch what sharing looks like when you cannot see it: a lot of "dark social" sharing happens through copied URLs in chat apps. A copy-link button with event tracking captures some of that and often becomes the most-clicked button in the bar.
Setting it up in Joomla, step by step
- Pick your approach: link-based plugin for site-wide article buttons, module for page-level control, Custom HTML for a few key pages.
- Install the extension through System, Install, or create the Custom HTML module by hand.
- Configure networks — three to five, plus copy-link and email.
- Set placement: floating left rail on desktop, bottom dock or hidden on mobile. Check the breakpoint behaviour matches your template's.
- Use Menu Assignment (modules) or category options (plugins) to publish the bar on content pages only — not on the homepage, checkout or contact pages.
- Add analytics events for each button.
- Test on a real phone with your cookie banner visible: scroll the full page, open the menu, confirm nothing overlaps.
FAQ
Is a floating social bar bad for SEO?
Not directly — search engines do not penalise share buttons. Indirectly, a badly built one can hurt: heavy third-party scripts slow the page and layout shift damages Core Web Vitals, both of which feed into how your pages are evaluated. There is also an interstitial angle: an overlay that covers meaningful content on mobile can be treated as intrusive. A lightweight, link-based bar that never covers content is SEO-neutral.
Do share buttons with counters make people share more?
High counts can nudge people — visible social proof works. But low counts do the opposite, and most pages on most sites have low counts. Since counters are also the main reason share bars need third-party scripts, our default is to skip them: you drop the performance cost and hide the unimpressive numbers in one move.
Why does my floating bar disappear behind other elements?
A z-index clash. Your bar's stacking value is lower than the element covering it — commonly a sticky header, cookie banner or off-canvas menu overlay. Inspect both elements in browser dev tools, find their computed z-index values, and raise the bar's value in your custom CSS just above the competitor. Also check that no parent container of the module sets overflow or a transform, either of which changes how fixed positioning behaves.
Should the bar appear on every page of my Joomla site?
No. Share buttons make sense on content people might want to pass along — articles, guides, recipes, portfolio pieces. They add nothing to contact pages, legal pages, category lists or checkout flows except clutter. Publish the module on content menu items only, or configure the plugin to specific categories, and let every other page breathe.
The bottom line
A floating social bar is worth having when three things are true: your content is genuinely shareable, the bar is built from plain links rather than third-party scripts, and it never covers content on a phone. Build it as a link-based plugin for automation or a Custom HTML module for control, keep the network list short, label the icons, and — above all — measure the clicks. If the numbers justify the space, great; if not, demote the buttons to the article footer without guilt. For more no-nonsense Joomla tutorials, our Joomla hub has you covered.