This time I will share jQuery Plugin and tutorial about Floating Social Share Panel Plugin For Bootstrap 4 – socialshare.js, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="/path/to/fontawesome/all.css"> |
2 |
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> |
3 |
<script src="/path/to/jquery.slim.min.js"></script> |
4 |
<script src="/path/to/popper.min.js"></script> |
5 |
<script src="/path/to/bootstrap.min.js"></script> |
2. Load the jQuery socialshare.js plugin’s files in the document.
1 |
<link rel="stylesheet" href="assets/css/socialshare.css"> |
2 |
<link rel="stylesheet" href="assets/icons/all.css"> |
3 |
<script src="assets/js/socialshare.js"></script> |
3. Build the HTML for the social share widget.
01 |
<div class="social-share social-share-sticky" data-social-share="OPTIONS HERE"> |
02 |
<div class="btn-group dropright"> |
03 |
<button class="btn btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
04 |
<span class="text-uppercase social-share-btn" aria-hidden="true"> |
10 |
<span class="fas fa-share-alt"></span> |
12 |
<span class="sr-only">Share this page</span> |
14 |
<div class="dropdown-menu dropdown-menu-right dropdown-menu-multi"><div class="dropdown-row"></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
1 |
<div class="social-share social-share-sticky" data-social-share="{'iconSrc': 'assets/icons/', title': 'Page Title', 'description': 'Page Description'}"> |
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.
