jQuery Plugin For Floating Social Share Bar

jQuery Plugin For Floating Social Share Bar
File Size: 29.2 KB
Views Total:
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, Google Plus, Linkedin, Pinterest, Stumbleupon, Telegram, Whatsapp 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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.floating-share.js"></script>
</body>

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

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.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-right
  • counter: true: set to false to hide counters of pinterest, facebook, twitter and linkedin
  • twitter_counter: false: shows twitter counter
  • buttons: ["facebook","twitter","google-plus","linkedin","pinterest","stumbleupon","envelope"]: 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

Change logs:

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.