Social Share Buttons Plugin with Custom Popup Support – UniversalShare

UniversalShare is a lightweight JavaScript plugin that creates social media sharing buttons on your website from a simple div element.

It supports 12+ major social platforms, multiple icon libraries, and flexible positioning options without requiring any external dependencies beyond your chosen icon set.

Features:

• 12+ Built-in Platforms: Facebook, Twitter, LinkedIn, WhatsApp, Telegram, Reddit, Pinterest, Tumblr, Email, SMS, Copy Link, and Print
• Dual Icon Library Support: Works with both FontAwesome and IcoMoon icons with configurable prefixes
• Multiple Display Options: Horizontal, vertical, and grid layouts with inline, floating, or sticky positioning
• Popup Window Management: Configurable popup windows with fallback to new tabs when blocked
• Theme System: Default, minimal, rounded, and dark themes with custom styling support
• Analytics Integration: Built-in Google Analytics tracking with custom event callbacks
• Dynamic Configuration: Runtime updates to themes, platforms, and display settings
• Custom Platform Support: Add your own sharing platforms with URL templates

How to use it:

1. Download and load the UniversalShare plugin’s files in the document.

<link rel="stylesheet" href="universal-share.css">
<script src="universal-share.min.js"></script>

2. You’ll need an icon font for social icons.

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/VERSION/css/all.min.css" />

<!-- OR icomoon -->
<link href=" https://cdn.jsdelivr.net/npm/icomoon/style.min.css" rel="stylesheet">

3. Create an empty container element where the share buttons should appear:

<div class="bs-universal-share"></div>

4. Initialize the plugin and you’re done.

new UniversalShare(".bs-universal-share", {
  // options here
});

5. Available options to customize the social share buttons.

new UniversalShare(".bs-universal-share", {

  // Platform settings
  platforms: ['facebook', 'twitter', 'linkedin', 'whatsapp', 'email', 'copy'],

  // Appearance settings
  theme: 'default', // default, minimal, rounded, dark
  size: 'medium', // small, medium, large
  layout: 'horizontal', // horizontal, vertical, grid
  position: 'inline', // inline, floating, sticky-top, sticky-bottom
  showText: true,
  showCounter: false,

  // Content settings
  title: document.title,
  url: window.location.href,
  description: document.querySelector('meta[name="description"]')?.content || '',

  // Icon library settings
  iconLibrary: 'fontawesome', // 'fontawesome', 'icomoon', or 'both'
  iconPrefix: {
    fontawesome: 'fa', // FontAwesome prefix (fa, fas, fab, etc.)
    icomoon: 'icon' // IcoMoon prefix
  },

  // Window settings
  openMethod: 'popup', // 'popup', 'newtab', 'same'
  popupSettings: {
    width: 600,
    height: 400,
    scrollbars: 1,
    resizable: 1,
    toolbar: 0,
    location: 0,
    directories: 0,
    status: 0,
    menubar: 0,
    copyhistory: 0
  },
  
});

6. Add custom social platforms:

new UniversalShare(".bs-universal-share", {
  customPlatforms: {  
    "custom-slack": {
      name: "Slack",
      icons: {
        fontawesome: "fab fa-slack",
        icomoon: "icon-slack"
      },
      color: "#4A154B",
      url: (url, title) => `https://slack.com/share?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`
    }
  }
});

7. Add custom icons.

new UniversalShare(".bs-universal-share", {
  customIcons: {
    facebook: "icon-facebook-custom",
    twitter: "icon-twitter-custom",
  },
});

8. Trigger a function when your content is shared.

new UniversalShare(".bs-universal-share", {
  onShare: function (platform, method) {
    // Custom Google Analytics
    analytics.track("Content Shared", {
      platform: platform,
      openMethod: method,
      url: this.config.url,
      title: this.config.title,
    });
  },
});

9. API methods:

const myShare = UniversalShare(".bs-universal-share", {
  // ...
});

// Pass an object with new options to re-render.
myShareupdateConfig(newConfig)

// Change `'popup'`, `'newtab'`, or `'same'` on the fly.
mySharesetOpenMethod(method)

// Switch between `'fontawesome'`, `'icomoon'`, `'both'`.
mySharesetIconLibrary(library)

// Dynamically add a new platform.
myShareaddPlatform(key, platformConfig)

// Remove an existing platform.
myShareremovePlatform(key)

// Removes the buttons and cleans up event listeners. 
mySharedestroy()`:

The post Social Share Buttons Plugin with Custom Popup Support – UniversalShare appeared first on CSS Script.