Floating Social Sharing Widget with Confetti Effects - SoMuchSharing

Demo Download

Author:	tuxedosoft
Views Total:	44 views
Official Page:	Go to website
Last Update:	August 15, 2025
License:	MIT

Preview:

Floating Social Sharing Widget with Confetti Effects – SoMuchSharing

Description:

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

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.
Customizable animations: Pulse effects, floating animations, and smooth transitions with cubic-bezier easing.
Interactive tooltips: Displays platform names on hover for improved user experience.
Success feedback system: Confirmation messages after successful sharing attempts.

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" onclick="share('facebook')" style="--delay: 1">
      <i class="fab fa-facebook-f"></i>
      <span class="tooltip">Share on Facebook</span>
    </button>
    <button class="share-option twitter" onclick="share('twitter')" style="--delay: 2">
      <i class="fab fa-twitter"></i>
      <span class="tooltip">Share on Twitter</span>
    </button>
    <button class="share-option instagram" onclick="share('instagram')" style="--delay: 3">
      <i class="fab fa-instagram"></i>
      <span class="tooltip">Share on Instagram</span>
    </button>
    <button class="share-option linkedin" onclick="share('linkedin')" style="--delay: 4">
      <i class="fab fa-linkedin-in"></i>
      <span class="tooltip">Share on LinkedIn</span>
    </button>
    <button class="share-option whatsapp" onclick="share('whatsapp')" style="--delay: 5">
      <i class="fab fa-whatsapp"></i>
      <span class="tooltip">Share on WhatsApp</span>
    </button>
    <button class="share-option telegram" onclick="share('telegram')" style="--delay: 6">
      <i class="fab fa-telegram-plane"></i>
      <span class="tooltip">Share on Telegram</span>
    </button>
    <button class="share-option pinterest" onclick="share('pinterest')" style="--delay: 7">
      <i class="fab fa-pinterest-p"></i>
      <span class="tooltip">Share on Pinterest</span>
    </button>
    <button class="share-option email" onclick="share('email')" style="--delay: 8">
      <i class="fas fa-envelope"></i>
      <span class="tooltip">Share via Email</span>
    </button>
  </div>
  <button class="share-button" id="shareButton" onclick="toggleShare()">
    <i class="fas fa-share-alt"></i>
  </button>
</div>
<div class="success-animation" id="successAnimation">
  <i class="fas fa-check"></i> Shared successfully!
</div>
<div class="confetti-container" id="confettiContainer"></div>

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.

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.