Floating Social Share Panel Plugin For Bootstrap 4 - socialshare.js

A user- and mobile-friendly jQuery/Bootstrap social sharing plugin which creates a floating (sticky) social share widget to share your content on popular social networks.

Hover/tap the social share widget to expand a social share panel containing Facebook, Twitter, Email, Print, and More links.

Click/tap the More link will display more social networks in a modal popup.

Supported social networks & links:

• Bitly
• Blogger
• Digg
• Diigo
• Email
• Evernote
• Facebook
• Gmail
• Google Bookmark
• LinkedIn
• LiveJournal
• MySpace
• Pinterest
• Pocket
• Print
• Reddit
• Tumblr
• Twitter
• Yahoo Mail
• QR ADV
• TinyURL
• Copy Link

How to use it:

1. Load the required jQuery library, Bootstrap 4 framework, and Font Awesome iconic font in the document.

<link rel="stylesheet" href="/path/to/fontawesome/all.css">
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Load the jQuery socialshare.js plugin's files in the document.

<link rel="stylesheet" href="assets/css/socialshare.css">
<link rel="stylesheet" href="assets/icons/all.css">
<script src="assets/js/socialshare.js"></script>

3. Build the HTML for the social share widget.

<div class="social-share social-share-sticky" data-social-share="OPTIONS HERE">
  <div class="btn-group dropright">
    <button class="btn btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="text-uppercase social-share-btn" aria-hidden="true">
        <span>S</span>
        <span>h</span>
        <span>a</span>
        <span>r</span>
        <span>e</span>
        <span class="fas fa-share-alt"></span>
      </span>
      <span class="sr-only">Share this page</span>
    </button>
    <div class="dropdown-menu dropdown-menu-right dropdown-menu-multi"><div class="dropdown-row"></div></div>
  </div>
</div>

4. Customize the social share widget by passing the options object to the data-social-share attribute.

• iconSrc: path to icons
• title: page title to share
• description: page description to share
• image: image to share
• printSrc: print specific elements

<div class="social-share social-share-sticky" data-social-share="{'iconSrc': 'assets/icons/', title': 'Page Title', 'description': 'Page Description'}">
  ...
</div>

Changelog:

2019-11-29

• JS & CSS updated

---

This awesome jQuery plugin is developed by thekodester. For more Advanced Usages, please check the demo page or visit the official website.