Brand kit

Set your logo, colours, fonts and handle once, then apply them to any template in one click.

Page address to share (optional)Leave empty to share the page the visitor is on. Enter an address to always share that one.

Share text (optional)Leave empty to use the page title.

Your X username (optional)Adds “via @username” to posts on X.

Hashtags for X (optional)Comma separated, without #. Example: webdesign,html

Image for Pinterest (optional)A full image address. Leave empty to use the page’s social image (og:image).

Group label (screen readers)

Message after copying

Tip: wrap words in *asterisks* to colour them with the brand colour.

Side of the screen

Vertical position

Distance from the topUsed when the position is Custom. A % or px value, for example 30% or 120px.

On phones

Colours

Brand / buttons

Button text

Background

Cards & panels

Text

Muted text

Fonts

Headings

Body text

Any Google Font, or upload your own (WOFF2, WOFF, TTF or OTF). Uploaded fonts are embedded in your exports and included in backups.

Shape & width

Corner radius

Button style

Content width

Sizes

Text sizeHeadings, body text and buttons

Padding & marginsSpace around and inside sections

GapsSpace between cards, columns and items

Scales every section from its own design (60–160%). Click a percentage to reset it.

Animation

Entrance effect

Speed

Powered by GSAP, ScrollTrigger and SplitText: the section animates in once when it scrolls into view. Exports include it, content stays visible without JavaScript, and it switches off for people who prefer reduced motion.

Look

Colours, a gradient, spacing, a background photo, which screens show this section, heading typography and your own CSS. They are part of the HTML you export.

Tries a random look. Undo brings it back.

Colours

This section sets its own height, so it has no spacing options.

Background image

Show on

Heading typography

Heading weight

Small labels

Letter spacing

Advanced: your own CSS

Your own CSS for this section

Rules apply inside this section only (they are nested in it) and are part of your export. Use the section’s class names, e.g. .st-h2 (heading), .st-lead (intro text), .st-eyebrow (small label), .st-btn (button).

Finding a class name: open the HTML tab above the preview and look for class="…" on the element you want, or right-click the element in the preview and choose Inspect. Put a dot in front of the name, like .st-h2.

Artwork

SVG shapes behind the content, in your theme colours. They recolour with every preset and can animate with GSAP.

NoneNo artwork

Floating Social Share Bar

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

1 sectionsView all →

Social share

Floating Social Share Bar

Responsive · Animated

Floating Social Share Bar — Free Website Section Template

Social share · v1.0.0 · Updated 2026-10-24 · Responsive · GSAP animation · HTML, React & Vue

CategorySocial share

Tagssocial shareshare buttonsstickyfloatingsidebarfacebookwhatsapplinkedincollapsiblelight

Updated October 20, 2026

Extend with AI

Take This Section Further With AI

Ask an AI assistant to adapt the Social Share Bar HTML, CSS and JavaScript: add a share counter, hide it after the footer, add another network, or turn it into a React component.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Create a floating social share bar in plain HTML, CSS and JavaScript.

- A fixed column of square icon buttons on the left edge, vertically centred, with the outer corners rounded.
- Each button is a link that opens in a new tab (target="_blank" with rel="noopener noreferrer") to the network's share URL for Facebook, X, LinkedIn and WhatsApp, plus an email link and a copy-link button.
- JavaScript fills each link with the current page URL (location.href) and the page title, and the copy button uses navigator.clipboard with a short "Link copied" message.
- A small arrow button collapses the bar into a vertical tab; clicking the tab restores it. Keep aria-expanded and visible focus styles.
- On screens under 640px turn it into a horizontal bar fixed to the bottom of the screen, and hide it for printing.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

What's included

Features

Floats on the left or right edge and takes no space in the layout

Stacked buttons centred on the screen or at any distance from the top

Fourteen networks: Facebook, X, WhatsApp, LinkedIn, Telegram, Pinterest and more

Add, remove, reorder and rename buttons from a simple list

Shares the current page address and title automatically

Every share link opens in a new tab with safe link settings

Copy-link button with a confirmation

Collapses to a small tab and comes back with one click, with an option to start collapsed

Bottom bar or small side stack on phones, smaller buttons on tablets

Network colours, theme colour or subtle style in attached, rounded or round shapes

About this section

Floating Social Share Bar — Free Sticky Share Buttons Template

Floating Social Share Bar: A floating social share bar that takes no space in your layout. Share buttons stack in a column on the left or right edge of the screen, centred or at any height you choose, and each one opens the network’s share window in a new tab with your page address and title filled in. Visitors can collapse the bar into a small tab and bring it back with one click. On phones it becomes a bottom bar.

Floating Social Share Bar is a free set of social share buttons that float at the edge of the screen and take no space in your layout. The buttons stack in a column on the left or right, centred or at any height you choose, and each one opens the network's own share window in a new tab with your page address and title already filled in.

Share the right page, every time

You do not have to type an address for each page. Leave the address empty and the bar reads the page the visitor is on, and the page title for the post. Fill them in to always share one fixed page. The Pinterest button picks up your social image, and the X button can add your username and hashtags.

Popular networks, one list

Add or remove buttons from a list of fourteen: Facebook, X, LinkedIn, WhatsApp, Telegram, Pinterest, Reddit, Threads, Bluesky, Tumblr, Hacker News, LINE, email and copy link. Reorder or rename them and pick network colours, your brand colour or a subtle style.

Out of the way when wanted

Visitors can collapse the bar into a small tab on the edge and bring it back with one click, and you can start it collapsed. On phones it becomes a bottom bar, or a small side stack if you prefer, so it never covers your text.

Accessible and fast

Every button is a real link or button with a label that says what it does and that it opens a new tab. The bar works with a keyboard and respects reduced motion. Export HTML, a ZIP, React or Vue, or fork it into My Code. To invite readers further, pair it with a Newsletter CTA.

Why use it

Why Use the Floating Social Share Bar

🪶

No layout cost

The bar floats above the page, so adding it never moves your content or changes your spacing.

🔐

No tracking

Plain links to each network, with no third-party share script, cookies or counters loading on your page.

📲

Works on every screen

A side stack on desktop, a compact one on tablets and a bottom bar on phones, all reachable by touch and keyboard.

How it’s different

How It’s Different From Other Free Section Templates

✎

Editable, not just copyable

Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.

◐

One theme for every section

Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.

⇲

Responsive by container

Container queries make each section adapt to its own width, in a full page, a column or a page builder.

✦

GSAP animation built in

Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.

</>

HTML, React and Vue

Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.

◍

Free, private, saved

No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

1
Edit the contentFill in the what gets shared, position, look, collapse and share buttons in the panel. Switch the collapse on or off. Wrap words in *asterisks* to colour them.
2
Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
3
Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
4
Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
5
Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

📰

Blogs and news sites

Keep share buttons beside a long article so readers can post it the moment they finish, without scrolling back to the top.

🛍

Product and landing pages

Let visitors send a product or offer to a friend on WhatsApp or by email, while the buttons stay out of the design.

🎓

Courses and resources

Make guides, templates and lesson pages easy to share with a team or class, with copy link for chat and email.

📅

Events and campaigns

Encourage guests to spread the word about a launch, webinar or fundraiser with the networks your audience uses most.

In real websites

Website Templates That Use the Floating Social Share Bar Section

The Floating Social Share Bar section is part of 8 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Creative Agency Website, Personal Portfolio Website, Photographer Website, Event & Conference Website, Nonprofit & Charity Website, Wedding Website, Podcast Website, Church Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

Not these. They are plain links and one small script. There are no network widgets, tracking scripts or extra images, so the page loads as fast as before.

The bar reads the address of the page the visitor is on, and the page title. You can enter a fixed address and text instead.

Yes. A small arrow collapses the bar into a tab on the edge of the screen, and one click on the tab brings it back. You can also make it start collapsed.

By default the buttons become a bar along the bottom of the screen, with a small pill to bring it back after hiding. You can keep a compact side stack instead.

Facebook, X, LinkedIn, WhatsApp, Telegram, Pinterest, Reddit, Threads, Bluesky, Tumblr, Hacker News, LINE, email and copy link.

It saves an editable copy of your Floating Social Share Bar in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.