How to Add a Floating Share Bar (PRO)

Want share buttons that follow the reader down the page instead of sitting at the top of the post? The floating share bar in Social Linkz PRO does exactly that. Enable it, pick your networks, choose the pages it appears on, and it renders automatically — a vertical rail down the side of the page on desktop, and a horizontal bar along the bottom of the screen on mobile.

What is the floating share bar?

The floating share bar is a Social Linkz PRO feature that shows a sticky set of share buttons that stay visible as the reader scrolls. On a wide screen it hangs off the left or right edge of the page as a vertical rail. Below your chosen breakpoint it lies down as a horizontal bar across the bottom of the screen, where a side rail would eat into a narrow viewport.

How to enable the floating share bar

1. In your WordPress admin, go to Social Linkz → Settings.
2. Open the Floating Bar tab.
3. Under General Options, turn on Enable Floating Bar.
4. In Social Networks, choose the share buttons you want and drag them into the order you prefer.
5. Save your settings.

The bar renders automatically in the site footer on the pages you allow — you do not need to add it to your template.

How to choose which pages show the bar

The Display section controls where the bar appears.

Option	What it does
Post Types	Tick the post types (Posts, Pages, custom types) that should show the bar on their single views.
Show On Front Page	Show the bar on your site's front page.
Show On Blog Page	Show the bar on the posts (blog) page.
Show On Archives	Show the bar on category, tag, author and date archives.

If no networks are selected, nothing is printed, so the bar stays hidden until you pick at least one.

How the mobile bottom bar works

The Mobile Breakpoint field (default 1200) is the width, in pixels, where the layout switches. Above the breakpoint the buttons form a vertical side rail; at or below it they become a horizontal bar along the bottom of the screen. The bar also reserves its own height at the foot of the page so it never covers the last line of your content.

Because the bottom bar sits over the page, it has its own design fields:

Option	What it does
Mobile Bar Background	Background colour behind the bottom bar.
Mobile Bar Padding	Padding around the buttons on the bottom bar, in pixels (default 10).
Fill Available Space	Stretch the buttons to fill the full width of the mobile bar.

Hiding the bar above or below the breakpoint

Two switches let you run the bar on one form factor only:

• Hide Above Breakpoint — show only the mobile bottom bar; hide the desktop rail.
• Hide Below Breakpoint — show only the desktop rail; hide the mobile bottom bar.

For a full walkthrough of desktop-only and mobile-only setups, see show or hide share buttons on mobile.

How to reveal the bar only after the reader scrolls

Turn on Show On Scroll to keep the bar out of the way until the reader has started reading. Then set a Scroll Threshold:

• A plain number is a pixel offset, e.g. 400.
• Add a % for a share of the page height, e.g. 20%.

The bar stays hidden until the reader passes that point, then fades in.

How to position the bar

The Design section controls placement and appearance:

Option	What it does
Alignment	Which edge the desktop rail hangs off — Left or Right.
Side Offset	Distance from the edge of the screen, in pixels (default 5).
Top Offset	Where the rail starts down the page, e.g. 25% or 200px.

The same section carries the shared button design fields used across every Social Linkz button location: Button Style, Button Shape, Button Size, Button Color, Button Hover Color, Icon Color, Icon Hover Color, Inverse On Hover, and Button Margin (the space between buttons, in pixels).

How to place the bar manually with a shortcode

The bar renders in the footer by default. If you would rather drop it into a specific spot, use the shortcode:

[social_linkz_floating]

The shortcode obeys the same display rules — it prints only where the settings allow the bar and only when at least one network is selected.

How to turn the bar off on a single post

To hide the bar on one specific post or page, open that post in the editor and, in the Social Linkz meta box, tick Hide the floating share bar on this post. See per-post sharing settings for all the per-post overrides.

Why the bar disappears inside a page builder

The floating bar is deliberately hidden inside the editing screens of Bricks, Elementor and Beaver Builder, where a fixed bar would sit on top of the builder's own toolbar. Their live preview iframes are the real front end and do show the bar, so what you publish still looks correct.

Conclusion

The floating share bar in Social Linkz PRO gives you persistent, scroll-friendly share buttons that adapt from a desktop side rail to a mobile bottom bar automatically. Enable it under Social Linkz → Settings → Floating Bar, pick your networks and pages, and fine-tune the position. Next, review per-post sharing settings to control the bar post by post, or show or hide share buttons on mobile to tune the mobile experience.

FAQs

Is the floating share bar free?

No. The floating share bar is a Social Linkz PRO feature. The free plugin includes inline share buttons but not the sticky floating bar.

Do I have to add the bar to my theme template?

No. Once enabled, the bar renders automatically in the site footer on the pages you allow. A [social_linkz_floating] shortcode is also available if you want to place it in a specific location.

Why does the side rail turn into a bar at the bottom on mobile?

Below the Mobile Breakpoint (default 1200px), a vertical rail would take up too much of a narrow screen, so Social Linkz switches it to a horizontal bar across the bottom of the viewport. You can adjust the breakpoint or hide either layout with Hide Above Breakpoint and Hide Below Breakpoint.

Why doesn't the floating bar show while I'm editing in Elementor or Bricks?

The bar is hidden inside page-builder editing screens (Bricks, Elementor, Beaver Builder) so it doesn't overlap the builder toolbar. It still appears in the builder's live preview and on the published page.

How do I hide the floating bar on just one post?

Open that post in the editor and tick Hide the floating share bar on this post in the Social Linkz meta box. Every other post keeps the bar.

Can I show the bar only after the reader scrolls down?

Yes. Turn on Show On Scroll and set a Scroll Threshold — a plain number for a pixel offset (e.g. 400) or a value with % for a share of the page height (e.g. 20%).