FLASH SALE Get 20% OFF everything using the coupon code: FLASH20 View Pricing Plans →
Floating Social Sharing Buttons let you display a persistent bar of social sharing icons on the side of your website. The bar stays visible as visitors scroll, making it easy for them to share your content on Facebook, X, LinkedIn, Pinterest, and more — at any moment.
This guide walks you through setting up, customizing, and fine-tuning the floating bar so it fits perfectly with your site.
The Floating Buttons feature adds a fixed-position bar of social sharing icons that appears on the pages and post types you choose. Key highlights:
Getting started takes just a few clicks.
In your WordPress admin, navigate to:
Sharing Buttons > Floating Buttons
The first time you visit this page, the plugin automatically creates a Floating Buttons configuration for you with a pre-configured set of social sharing icons. You will be taken directly into the block editor.
The editor opens with a Social Sharing block already in place. By default, the following platforms are enabled:
Additional platforms are available but disabled by default: Telegram, Bluesky, ChatGPT, Claude, Perplexity, and Print. You can enable any of these through the block settings (see Section 3 below).
In the right sidebar, locate the Display Settings meta box. This is where you control positioning, visibility, and mobile behavior. At minimum, make sure you have selected at least one post type under “Show Floating Buttons On” so the bar actually appears on your site.
By default, the floating bar is set to display on Posts only.
Click Update (or Publish) to save your configuration. Visit a post on your site to see the floating bar in action.
Since the Floating Buttons use the standard Social Sharing block, you have access to all of its customization options.
Click the Social Sharing block in the editor, then use the block settings panel on the right to:
In the block toolbar or sidebar panel you can adjust:
The default configuration has Show Total Count enabled. This displays an aggregated share count alongside your icons. You can toggle this off in the block settings if you prefer a cleaner look.
The Display Settings meta box in the editor sidebar gives you full control over where and when the floating bar appears.
Choose which side of the screen the bar appears on:
Choose the vertical placement of the bar:
Set the distance (in pixels) between the floating bar and the edge of the screen. The range is 0 to 200 px. A value of 0 places the bar flush against the edge. Increase this value if you need to avoid overlapping with other fixed elements on your site, such as a sticky header or sidebar.
Control how the icons are arranged:
Use the checkboxes to select where the floating bar should appear:
If no post types are selected and Front Page is unchecked, the floating bar will not appear anywhere on your site.
The floating bar has a dedicated mobile experience that activates automatically when the viewport width falls below the configured mobile breakpoint.
When mobile mode kicks in, the floating bar:
If you prefer not to show the floating bar on mobile devices at all, simply uncheck Show on mobile devices in the Display Settings. The bar will be completely hidden below the breakpoint.
The default breakpoint of 1200px covers most tablets in landscape orientation and smaller. Here are some guidelines:
Choose a value that makes sense for your audience and design. You can always preview your site at different widths to see exactly when the switch happens.
In addition to the automatic floating display, you can manually insert the floating buttons content anywhere using a shortcode:
[wpzoom_floating_buttons]This shortcode renders the same social sharing icons from your Floating Buttons configuration, but as an inline element within your content rather than as a fixed floating bar. This can be useful if you want to:
The shortcode uses the same configuration (platforms, colors, styles) that you set up in the Floating Buttons editor.
Note: The shortcode output does not include the floating/fixed positioning or the display rules (post types, mobile settings). It simply renders the icons inline wherever the shortcode is placed.
While you can enable all available platforms, a shorter list of 5-7 icons tends to perform best. Focus on the platforms your audience actually uses. A long vertical stack can be visually overwhelming and may extend beyond the visible area on smaller screens.
Consider your theme’s layout, especially if you have sticky sidebars or other fixed elements that might overlap with the floating bar.
If the bar feels too close to the edge of the screen or overlaps with other UI elements (like a sticky menu, chat widget, or cookie notice), increase the Offset from Edge value. Even a small offset of 10-20px can make a noticeable difference.
Always preview the floating bar on different screen sizes after making changes. Pay special attention to:
If you position the bar on the left or right side of the screen, the Vertical (stacked) layout almost always looks best. If you set the vertical position to Top or Bottom, consider switching to Horizontal (row) for a more natural appearance.
The floating bar automatically respects the prefers-reduced-motion media query. For visitors who have reduced motion enabled in their operating system settings, all slide-in animations and hover effects are disabled for a more comfortable experience.
The bar is also automatically hidden when the page is printed, so it will not appear in print output.
The plugin automatically prevents the Pinterest browser extension from hijacking your Pinterest share buttons. Each Pinterest link includes the data-pin-custom="true" attribute, which tells the Pinterest SDK to leave those buttons alone. No additional configuration is needed on your part.
If you run into any issues or have questions about the Floating Buttons feature, please visit the WPZOOM support page or reach out through our support channels. We are happy to help.