jQuery Plugin For Floating Social Share Bar

File Size: 58.3 KB
Views Total: 55049
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Floating Social Share Bar

Floating Share is a jQuery plugin for creating a vertical floating social share bar with counters staying on left hand side of your web page.

Currently social networks supported: Facebook, Twitter, Reddit, Tumblr, Linkedin, Pinterest, VK, Odnoklassniki, Telegram, Whatsapp, Viber, and Email.


$ npm install jquery-floating-social-share --save

See also:

How to use it:

1. Include floating-share.css in the head section and the jQuery library & jQuery Floating Share at the bottom of your web page.

<link rel="stylesheet" href="css/floating-share.css">

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.floating-share.js"></script>

2. Include the needed Font Awesome 4 for the social media icons (OPTIONAL).

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

3. Call the plugin on the body to initialize the social share bar.


5. Default settings.

  • place: "top-left": alternatively top-right
  • counter: true: set to false to hide counters of pinterest, facebook, twitter and linkedin
  • twitter_counter: false: shows twitter counter
  • buttons: ["facebook","twitter","odnoklassniki","tumblr","viber","vk","whatsapp","reddit","telegram","linkedin","pinterest","mail"]: all of the currently avalaible social buttons
  • title: document.title: your title, default is current page's title
  • url: window.location.href0: your url, default is current page's url
  • text: "share with ": the title of a tags
  • text_title_case: false: converts share text to title case
  • description: $("meta[name='description']").attr("content"): your description, default is current page's description
  • popup_width: 400: the sharer popup's width, default is 400px
  • popup_height: 300: the sharer popup's width, default is 300px
  • popup: true: open links in popup or not
  • media: '': sets the media for the Pinterest share.
  • extra_offset: 15: adds an extra offset for margin-left if the selected place is content-right or content-left
  • countOffset: 8: adds an extra height for the share coun


v2.4.0 (2020-11-24)

  • Updated icons
  • Removed Twitter counter
  • Removed Linkedin counter
  • Fixed Facebook counter

v2.3.0 (2019-05-05)

  • Added viber button

v2.2.0 (2019-05-05)

  • Remove deprecated network buttons

v2.1.3 (2018-05-18)

  • Added rel noopener and nofollow for external anchors

v2.1.2 (2018-03-26)

  • Fixed Pinterest url error.

v2.1.1 (2017-10-13)

  • Always add trailing slash to Pinterest URL.

v2.1.0 (2017-10-12)

  • Fixed button height issue on resize

v2.0.1 (2017-10-10)

  • Added option for opening links in popup or not, and updated the readme in the text
  • Use less for CSS compilation.

v2.0.0 (2017-10-03)

  • Removed Font Awesome dependency, using simple icons as the SVG source
  • Renamed envelope to mail
  • Changed button colors

v1.8.2 (2017-07-20)

  • Removed Google Plus counter feature which is not working currently.

v1.8.0 (2017-02-06)

  • Added telegram and whatsapp buttons

v1.7.0 (2017-02-04)

  • dont repaint buttons on scroll

v1.6.2 (2017-02-04)

  • Added title to tweet

v1.6.2 (2016-11-18)

  • Added title to tweet

v1.5.0 (2016-11-02)

  • added content-right as a place option

v1.4.0 (2016-10-05)

  • bugfix
  •  use encodeURIComponents when building share urls

v1.3.1 (2016-09-10)

  • fix facebook counts

v1.3.0 (2016-05-07)

  • Fixes box-sizing rules


  • Fixed Position left of main content


  • Added Pinterest media option


  • added new buttons, version 1.1.0


  • refactoring, version 1.0.3


  • update google-plus count api link to https


  • fixes for mobile button css


  • Call social counters on https instead of http


  • Some fixes, added google plus counter feature


  • fixed possible style conflicts

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