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

File Size: 223 KB
Views Total: 9326
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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


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