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

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. 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. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 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. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 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.

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. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.