Categories: CSSScriptWeb Design

Floating Social Sharing Widget with Confetti Effects – SoMuchSharing

SoMuchSharing is a vanilla JavaScript library that creates a floating, expanding social media sharing widget with animated confetti effects.

Table of Contents

Toggle

Features:

Multi-platform: Supports Facebook, Twitter, LinkedIn, WhatsApp, Telegram, Pinterest, and email clients.
Confetti animation system: Creates celebratory particle effects when users share content.
Responsive positioning: Supports left or right positioning with mobile-friendly touch gestures.
Keyboard accessibility: Includes ESC key support and tab navigation for screen readers.

See It In Action:

How to use it:

1. Include the somuchsharing.css stylesheet and the Font Awesome library (for social icons) in the <head> of your HTML document.

<link rel="stylesheet" type="text/css" href="somuchsharing.css">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="/path/to/Font Awesome CDN/all.min.css">

2. Link the somuchsharing.js script before the closing </body> tag.

3. Place the widget’s HTML markup anywhere inside your <body>. It includes the main floating widget container, the share options, the main button, and containers for the success message and confetti.

<div class="floating-share-widget">
  <div class="share-options" id="shareOptions">
    <button class="share-option facebook" >
4. Customize the widget’s behavior by modifying the widgetConfig object at the top of somuchsharing.js.
 const widgetConfig = {
  position: 'right', // 'left' or 'right'
  enableConfetti: true,
  enablePulse: true,
  enableFloating: true
};
 5. To change the shareable content, you’ll need to edit the share() function directly within the JavaScript file. This is where you set the URL, title, and text to be shared.
   
 function share(platform) {
  const url = encodeURIComponent('https://your-custom-url.com');
  const title = encodeURIComponent('Your Custom Title');
  const text = encodeURIComponent('Your Custom Description');
  // ... rest of the function
}
 6. The confetti animation creates up to 150 DOM elements temporarily, which are automatically cleaned up after animation completion. For performance-sensitive applications, you can disable the confetti effect by setting enableConfetti: false in the configuration object. The widget uses requestAnimationFrame for smooth animations and CSS transforms for hardware acceleration on supported devices.
   Sponsored
 
 FAQs:
 Q: Can I customize the confetti colors and animation duration?

A: Yes, you can modify the confetti colors by editing the colors array in the createConfetti() function. Animation duration ranges from 1.5 to 3 seconds by default, but you can adjust the duration calculation to change timing. The confetti count is also configurable through the confettiCount variable.
   
 Q: Does the widget work with Content Security Policy restrictions?

A: The widget uses inline styles for dynamic animations, which may conflict with strict CSP policies. You can resolve this by adding 'unsafe-inline' to your style-src directive or by modifying the code to use CSS classes instead of inline styles for animation properties.
 Q: How do I handle sharing failures or blocked popups?

A: Modern browsers may block popup windows for sharing URLs. You can detect this by checking the return value of window.open() and providing fallback behavior such as copying the share URL to the clipboard or displaying the URL in a modal dialog for manual sharing.
   
 Q: Can I add custom social media platforms beyond the built-in options?

A: You can extend platform support by adding new cases to the switch statement in the share() function. Create the appropriate sharing URL format for your desired platform and add corresponding CSS styles for the platform button appearance.
 Q: How can I track sharing analytics without third-party services?

A: You can add custom analytics tracking by inserting event tracking code within the share() function. This allows integration with Google Analytics, Adobe Analytics, or custom tracking solutions while maintaining the self-hosted approach.
   
 More Resources:
  7 Best JavaScript Plugins For Confetti Explosion Animations
 
 The post Floating Social Sharing Widget with Confetti Effects – SoMuchSharing appeared first on CSS Script.

Add Canvas Confetti Effects to Any Website with Vanilla Confetti

Vanilla Confetti is a lightweight JavaScript library that creates canvas-based confetti animations for web projects. It takes a target canvas element and renders falling confetti particles based on a configuration object. Features: Zero Dependencies: Pure vanilla JavaScript, no external libraries needed. Customizable: Control colors, speed, quantity, size, and opacity. Looping…

April 28, 2025

In "CSSScript"

Smooth Hide-on-scroll Effects for Sticky Headers and Footers – Natural Sticky

Natural Sticky is a lightweight, framework-agnostic JS library that creates natural hide-on-scroll effects for sticky headers and footers. The library makes sticky elements disappear when you scroll down and reappear when you scroll up, but it does so without the typical animations that can feel disconnected from your actual scroll…

August 21, 2025

In "CSSScript"

3KB JS Library for Randomized Glitch Animations – Glitchium

Glitchium is a lightweight (~3kb) JavaScript library that creates performant, randomized glitch effects on web elements. It uses CSS transforms and hardware acceleration to deliver high-performance visual distortions and maintain 60 FPS animations. Features: Randomized Output: Each animation cycle generates unique glitch patterns through algorithmic randomization. Smooth Interpolation: Optional transition…

November 6, 2025

In "CSSScript"

rssfeeds-admin