UniversalShare Plugin

A lightweight, customizable JavaScript plugin for adding social media sharing buttons to your website.

Features

• 12+ Built-in Platforms: Facebook, Twitter, LinkedIn, WhatsApp, Telegram, Reddit, Pinterest, Tumblr, Email, SMS, Copy Link, and Print
• Multiple Themes: Default, minimal, rounded, and dark themes
• Flexible Layouts: Horizontal, vertical, and grid layouts
• Positioning Options: Inline, floating, sticky-top, and sticky-bottom
• Popup Window Support: Open shares in small popup windows instead of new tabs
• Dual Icon Library Support: FontAwesome and IcoMoon icons with configurable options
• Flexible Element Selection: Pass either CSS selector strings or DOM elements directly
• Responsive Design: Automatically adapts to different screen sizes
• Custom Platforms: Add your own sharing platforms
• Analytics Integration: Built-in Google Analytics tracking
• No Dependencies: Pure vanilla JavaScript

Installation

Option 1: Direct Download

Download the universal-share.js file and include it in your project:

<script src="path/to/universal-share.js"></script>

CSS Dependencies

Choose your preferred icon library:

FontAwesome (default)

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

IcoMoon

<link rel="stylesheet" href="path/to/your/icomoon/style.css" />

Both Libraries (for maximum compatibility)

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
<link rel="stylesheet" href="path/to/your/icomoon/style.css" />

Constructor

UniversalShare(selectorOrElement, options)

The constructor accepts two parameters:

• selectorOrElement: Can be either:
  • A CSS selector string (e.g., "#share-buttons", .share-container)
  • A DOM element object (e.g., document.getElementById('share-buttons'))
• options: Configuration object (optional)

Quick Start

Basic Usage with CSS Selector

<!-- HTML -->
<div id="share-buttons"></div>

<script>
  // JavaScript - Using CSS selector string
  const shareButtons = new UniversalShare("#share-buttons", {
    openMethod: "popup",
  });
</script>

Basic Usage with DOM Element

<!-- HTML -->
<div id="share-buttons"></div>

<script>
  // JavaScript - Using DOM element directly
  const element = document.getElementById("share-buttons");
  const shareButtons = new UniversalShare(element, {
    openMethod: "popup",
  });
</script>

Advanced Element Selection Examples

<div class="article-share"></div>
<div class="sidebar-share"></div>

<script>
  // Method 1: Using CSS selector
  const articleShare = new UniversalShare(".article-share", {
    platforms: ["facebook", "twitter", "linkedin"],
    theme: "rounded",
  });

  // Method 2: Using querySelector result
  const sidebarElement = document.querySelector(".sidebar-share");
  const sidebarShare = new UniversalShare(sidebarElement, {
    platforms: ["copy", "email"],
    layout: "vertical",
  });

  // Method 3: Using getElementsByClassName result
  const shareContainers = document.getElementsByClassName("share-container");
  if (shareContainers.length > 0) {
    const firstShare = new UniversalShare(shareContainers[0], {
      theme: "minimal",
    });
  }

  // Method 4: Dynamically created element
  const dynamicContainer = document.createElement("div");
  document.body.appendChild(dynamicContainer);
  const dynamicShare = new UniversalShare(dynamicContainer, {
    platforms: ["whatsapp", "telegram"],
    position: "floating",
  });
</script>

Error Handling

The plugin includes built-in error handling for invalid selectors or elements:

// Invalid selector - will log error and return early
const invalidShare = new UniversalShare("#non-existent-element");

// Invalid parameter type - will log error and return early
const invalidShare2 = new UniversalShare(123); // Numbers not allowed

// Null/undefined element - will log error and return early
const nullElement = null;
const invalidShare3 = new UniversalShare(nullElement);

Error messages you might see:

• "UniversalShare: First parameter must be either a CSS selector string or a DOM element"
• "UniversalShare: Element with selector "#invalid-selector" not found"
• "UniversalShare: Element not found" (when DOM element is passed but is null/undefined)

Configuration Options

Option	Type	Default	Description
platforms	Array	['facebook', 'twitter', 'linkedin', 'whatsapp', 'email', 'copy']	Platforms to display
theme	String	'default'	Theme style: default, minimal, rounded, dark
size	String	'medium'	Button size: small, medium, large
layout	String	'horizontal'	Layout style: horizontal, vertical, grid
position	String	'inline'	Position: inline, floating, sticky-top, sticky-bottom
showText	Boolean	true	Show platform names alongside icons
showCounter	Boolean	false	Show share counters (if supported)
title	String	document.title	Title to share
url	String	window.location.href	URL to share
description	String	Meta description	Description for sharing
openMethod	String	'popup'	How to open share links: popup, newtab, same
iconLibrary	String	'fontawesome'	Icon library: fontawesome, icomoon, both
iconPrefix	Object	{fontawesome: 'fa', icomoon: 'icon'}

Popup Settings

Default popup window configuration:

popupSettings: {
  width: 600,        // Window width
  height: 400,       // Window height
  scrollbars: 1,     // Enable scrollbars
  resizable: 1,      // Allow resizing
  toolbar: 0,        // Hide toolbar
  location: 0,       // Hide location bar
  directories: 0,    // Hide directories
  status: 0,         // Hide status bar
  menubar: 0,        // Hide menu bar
  copyhistory: 0     // Don't copy history
}

Supported Platforms

Built-in Platforms

• facebook - Facebook sharing
• twitter - Twitter/X sharing
• linkedin - LinkedIn sharing
• whatsapp - WhatsApp sharing
• telegram - Telegram sharing
• reddit - Reddit sharing
• pinterest - Pinterest sharing
• tumblr - Tumblr sharing
• email - Email sharing
• sms - SMS sharing
• copy - Copy link to clipboard
• print - Print current page

Advanced Usage

Multiple Instances with Different Element Types

// Using CSS selector for header
const headerShare = new UniversalShare("#header-share", {
  platforms: ["facebook", "twitter", "copy"],
  theme: "minimal",
  size: "small",
  openMethod: "newtab",
});

// Using DOM element for article
const articleElement = document.querySelector(
  ".article-content .share-buttons"
);
const articleShare = new UniversalShare(articleElement, {
  platforms: ["facebook", "twitter", "linkedin", "whatsapp", "email"],
  theme: "rounded",
  layout: "vertical",
  openMethod: "popup",
});

// Using dynamically created element for floating buttons
const floatingContainer = document.createElement("div");
floatingContainer.className = "floating-share";
document.body.appendChild(floatingContainer);

const floatingShare = new UniversalShare(floatingContainer, {
  platforms: ["copy", "email", "whatsapp"],
  position: "floating",
  theme: "dark",
  layout: "vertical",
  showText: false,
  openMethod: "popup",
});

Dynamic Element Creation and Initialization

function createShareButtons(containerId, platforms) {
  // Create container element
  const container = document.createElement("div");
  container.id = containerId;
  container.className = "dynamic-share-container";

  // Append to page
  document.body.appendChild(container);

  // Initialize UniversalShare with the created element
  return new UniversalShare(container, {
    platforms: platforms,
    theme: "rounded",
    openMethod: "popup",
  });
}

// Usage
const blogShare = createShareButtons("blog-share", [
  "facebook",
  "twitter",
  "linkedin",
]);
const productShare = createShareButtons("product-share", [
  "whatsapp",
  "email",
  "copy",
]);

Working with Form Elements or Complex DOM Structures

<form id="contact-form">
  <div class="form-group">
    <label>Share this page:</label>
    <div class="share-wrapper"></div>
  </div>
</form>

<script>
  // Method 1: Using nested selector
  const formShare1 = new UniversalShare("#contact-form .share-wrapper", {
    platforms: ["copy", "email"],
    showText: false,
  });

  // Method 2: Using DOM traversal
  const form = document.getElementById("contact-form");
  const shareWrapper = form.querySelector(".share-wrapper");
  const formShare2 = new UniversalShare(shareWrapper, {
    platforms: ["copy", "email"],
    showText: false,
  });
</script>

Popup Window Configuration

// Using CSS selector with popup settings
const shareButtons = new UniversalShare("#share-buttons", {
  openMethod: "popup",
  popupSettings: {
    width: 800,
    height: 600,
    scrollbars: 1,
    resizable: 1,
    toolbar: 1,
  },
});

// Using DOM element with popup settings
const element = document.getElementById("share-container");
const shareButtons2 = new UniversalShare(element, {
  openMethod: "popup",
  popupSettings: {
    width: 550,
    height: 450,
  },
});

Icon Library Configuration

Using IcoMoon Icons

// With CSS selector
const shareButtons = new UniversalShare("#share-buttons", {
  iconLibrary: "icomoon",
  iconPrefix: {
    icomoon: "icon",
  },
});

// With DOM element
const element = document.querySelector(".share-container");
const shareButtons2 = new UniversalShare(element, {
  iconLibrary: "icomoon",
  iconPrefix: