jQuery Plugin For Floating Social Share Bar
File Size: | 58.3 KB |
---|---|
Views Total: | 55353 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.
Installation:
$ 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.
<head> ... <link rel="stylesheet" href="css/floating-share.css"> </head> <body> ... <script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.floating-share.js"></script> </body>
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.
$(function(){ $("body").floatingShare(); });
5. Default settings.
place: "top-left"
: alternatively top-rightcounter: true
: set to false to hide counters of pinterest, facebook, twitter and linkedintwitter_counter
: false: shows twitter counterbuttons: ["facebook","twitter","odnoklassniki","tumblr","viber","vk","whatsapp","reddit","telegram","linkedin","pinterest","mail"]
: all of the currently avalaible social buttonstitle: document.title
: your title, default is current page's titleurl: window.location.href0
: your url, default is current page's urltext: "share with "
: the title of a tagstext_title_case
: false: converts share text to title casedescription: $("meta[name='description']").attr("content")
: your description, default is current page's descriptionpopup_width: 400
: the sharer popup's width, default is 400pxpopup_height: 300
: the sharer popup's width, default is 300pxpopup: true
: open links in popup or notmedia: ''
: 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-leftcountOffset
: 8: adds an extra height for the share coun
Changelog:
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
2016-02-26
- Fixed Position left of main content
2016-01-14
- Added Pinterest media option
2015-10-01
- added new buttons, version 1.1.0
2015-09-29
- refactoring, version 1.0.3
2015-09-05
- update google-plus count api link to https
2015-05-08
- fixes for mobile button css
2015-05-01
- Call social counters on https instead of http
2015-03-03
- Some fixes, added google plus counter feature
2014-08-03
- 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.