• Home
  • About Me
  • Twitter Trends
  • YoutTube Trends
  • Google Trends
  • Age Calculator
  • Public Holidays
  • Fancy Fonts
  • Privacy Policy
  • Contact Me

iamrohit.in

My Public Notebook

Skip to content
Menu
  • Tools
    • Twitter Trends
    • Google Trends
    • Youtube Trends
    • YouTube Tags Generator
    • Age Calculator
    • Public Holidays
    • English to Hindi Typing
    • Business Name Generator
    • Word Finder
    • Fancy Text Generator
    • IP Location Finder
    • Hours Calculator
    • Date Time Calculator
    • Emoji Copy Paste
  • Free Submission
    • Business Listing Directories
    • Directory Submission Sites
    • Social Bookmarking Sites
    • Classified Sites
      • India
      • Australia
      • Canada
      • United Kingdom
      • United States
    • Article Submission Sites
    • Press Release Sites List
    • PDF / DOC / PPT Submission Sites
    • Web 2.0 Submission Sites
    • RSS Feed Submission Sites List
    • Search Engine Submission Sites List
    • Forum Submission Sites List
    • Profile Creation Sites
    • Pinging Submission Sites
    • Wiki Submission Sites List
    • Image Sharing Sites
    • Question and Answer Sites List
    • Video Submission Sites
    • PDF Submission Sites List
    • Document Sharing Sites
    • Profile Creation Sites List
    • Podcast Submission
  • jQuery Plugins
    • Accordion
    • Barcode
    • Calendar
    • Clock
    • Countdown
    • Character Count
    • ColorPicker
    • Data Grid
    • DatePicker
    • Date Time
    • EU Cookie Law
    • Fileuploader
    • Form Validation
    • Icon Picker
    • Image Slider
    • image Crop
    • Image Zoom
    • Inputmask
    • Loading
    • Mega Menu
    • Menu
    • Multiselect
    • Multi-Step Form
    • News Ticker
    • Notification
    • Photo Gallery
    • QR Code
    • TimePicker
    • Tooltip
  • HOSTING

Add quick customizable floating social sharing bar on your website

by adminPosted onFebruary 9, 2018

Social share increase user engagement with good amount of social referral traffic. IF you have good follower list on your facebook, google and twitter, you must add social share button on your website and share yuor article on all social networking sites. And your readers, visitor can also share your website’s article or products on their social network pages if they liked your post/ products. It definitely boot your website traffic and also good for google page rank. So that in this post I am going to share quick customizable floating social sharing bar plugin in jQuery. jQuery Social Share Bar is a simple but beautiful jQuery plugin for easily adding a floating social sharing bar to your site.

Features:-

  • Minimalistically beautiful design
  • Floats on the same position when page is scrolled
  • Two themes: circular and square icons
  • Supports 10 different channels
  • Small file sizes, no bloat
  • Super simple to add to any web page
  • Simple animations to keep things interesting
  • No tracking or external API calls
  • Uses Font Awesome SVG for cross-browser support



Integrate floating social sharing bar on your website

Libraries

Include all the required JS+CSS libraries on page. It uses fontawesome library to display social share icons. Plugin’s doesn’t track the shares or make other API calls, which can cause privacy issues and slow things down.

<!--CSS-->
<link href="jquery-social-share-bar.css" rel="stylesheet" type="text/css">
 
<!--JS-->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-social-share-bar.js"></script>

<!--CSS--> <link href="jquery-social-share-bar.css" rel="stylesheet" type="text/css"> <!--JS--> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="jquery-social-share-bar.js"></script>

HTML

Create an empty social share container to place the floating social icon.

<div id="share-bar"></div>

<div id="share-bar"></div>

It support ten different social media channels are supported for sharing your content to.

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Pinterest
  • Reddit
  • Tumblr
  • StumbleUpon
  • Digg
  • Email



JS

Call the default plugin’s quick function to create social share bar with all the default feature.

$(function() {   
   $('#share-bar').share();
});

$(function() { $('#share-bar').share(); });

Here is the list of options you can use to customize your floating social share bar.

$(function() {   
   $('#share-bar').share({
 
  // page title
  pageTitle: '',
 
  // page url
  pageUrl: window.location.href,
 
  // page description
  pageDesc: '',
 
  // or 'left'
  position: 'right',
 
  // or 'square'
  theme: 'circle',
 
  // enable/disable animation
  animate: true,
 
  // popup width
  popupWidth: 600,
 
  // popup height
  popupHeight: 480,
 
  // an array of social networking services
  channels: ['facebook', 'twitter', 'linkedin', 'googleplus', 'email'],
 
  // trigger class
  itemTriggerClass: 'js-share'
 
  });
});

$(function() { $('#share-bar').share({ // page title pageTitle: '', // page url pageUrl: window.location.href, // page description pageDesc: '', // or 'left' position: 'right', // or 'square' theme: 'circle', // enable/disable animation animate: true, // popup width popupWidth: 600, // popup height popupHeight: 480, // an array of social networking services channels: ['facebook', 'twitter', 'linkedin', 'googleplus', 'email'], // trigger class itemTriggerClass: 'js-share' }); });

See live demos and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Reddit (Opens in new window)

Related

Posted in Jquery & JavascriptTagged Jquery Plugins, jquery social share plugins

Published by admin

View all posts by admin

Post navigation

Prev Create Simple Image Slider using Pure CSS3 with Fade Animation
Next Top 100 High PR DoFollow Profile Creation Site List For SEO 2020

Subscribe to My Public NoteBook

Enter your email address to subscribe my public notebook and receive notifications of new posts by email.

Join 22,905 other subscribers

Categories

  • Angular.js
  • Bootstrap
  • CakePHP
  • CSS & CSS3
  • Express
  • Hosting
  • Interview Question and Answer
  • Jquery & Javascript
  • Kali Linux
  • Make Money Online
  • MYSQL
  • NodeJs
  • Offers & Deals
  • Others
  • PHP
  • ReactJs
  • Security Tips
  • SEO
  • Tailwind CSS
  • Tips & Tricks
  • Ubuntu
  • VueJs
  • WordPress
DigitalOcean Referral Badge

Advertisement

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
© Copyright 2023 – iamrohit.in
Allium Theme by TemplateLens ⋅ Powered by WordPress