jQuery Floating Social Share

Simple jQuery floating social media sharer plugin. Currently supported platforms are Facebook, Pinterest, Reddit, Tumblr, VK and Odnoklassniki with counter feature; Twitter, Linkedin, Mail, Telegram, Viber, and Whatsapp without counter feature.

You can check the plugin live in here: https://onlinealarmkur.com/en/

Getting Started

Install via npm:

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

Or install via zip, then include jQuery and the plugin on a page.

<link rel="stylesheet" type="text/css" href="dist/jquery.floating-social-share.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="dist/jquery.floating-social-share.min.js"></script>

Finally, call the floatingSocialShare method on body with your custom options.

$("body").floatingSocialShare({
  buttons: ["facebook", "twitter"],
  text: "share with:"
});

To make the social share buttons appear next to the specific content, instead of the body, reference with selector.

$(".content").floatingSocialShare({
  buttons: ["facebook", "twitter"],
  text: {
    'facebook': 'Share on Facebook',
    'twitter': 'Share on Twitter'
  },
  place: "content-left"
});

Options

• place: String (top-left by default) Set the position of the box. Currently: content-left, content-right, top-left and top-right are available.
• counter: Boolean (true by default) Set to false to hide counters that appear below the buttons.
• facebook_token: String (null by default) To show the Facebook share count, obtain an access token.
• buttons: Array (["facebook", "twitter"] by default) Sets the social buttons for sharing. Available ones are mail, facebook, linkedin, odnoklassniki, pinterest, reddit, telegram, tumblr, twitter, viber, vk, and whatsapp.
• title: String (document.title by default) Sets the title for the share message.
• url: String (window.location.href by default) Sets the url for the share message.
• text: Object | String ({'default': 'share with:'} by default) Sets the share title for the social buttons. If properties are not assigned specifically, will use the default one appended with the button tag, for instance share with facebook.
• text_title_case: Boolean (false by default) Converts share text to title case, for instance, share with facebook will become Share With Facebook when set to true.
• description: String ($('meta[name="description"]').attr("content") by default) Sets the description for the share.
• media: String ($('meta[property="og:image"]').attr("content") by default) Sets the media for the Pinterest share.
• target: Boolean (true by default) Opens page sharer links, for instance Twitter intent page, in a new tab.
• popup: Boolean (true by default) Opens links in a popup when set true. When it is false, links are opened in a new tab.
• popup_width: Number (400 by default) Sets the sharer popup's width.
• popup_height: Number (300 by default) Sets the sharer popup's height.
• extra_offset: Number (15 by default) Adds an extra offset for margin-left if the selected place is content-right or content-left.

Full Example

$("body").floatingSocialShare({
  place: "top-left", // alternatively content-left, content-right, top-right
  counter: true, // set to false for hiding the counters of buttons
  facebook_token: null, // To show Facebook share count, obtain a token, see: https://stackoverflow.com/questions/17197970/facebook-permanent-page-access-token/43570120#43570120 
  buttons: [ // all of the currently available social buttons
    "mail", "facebook", "linkedin", "odnoklassniki", 
    "pinterest", "reddit", "telegram", "tumblr", "twitter", 
    "viber", "vk", "whatsapp"
  ],
  title: document.title, // your title, default is current page's title
  url: window.location.href,  // your url, default is current page's url
  text: { // the title of tags
    'default': 'share with ', 
    'facebook': 'share with facebook', 
    'twitter': 'tweet'
  },
  text_title_case: false, // if set true, then will convert share texts to title case like Share With G+
  description: $('meta[name="description"]').attr("content"), // your description, default is current page's description
  media: $('meta[property="og:image"]').attr("content"), // pinterest media
  target: true, // open share pages, such as Twitter and Facebook share pages, in a new tab
  popup: true, // open links in popup
  popup_width: 400, // the sharer popup width, default is 400px
  popup_height: 300 // the sharer popup height, default is 300px
});

Generating Minified Files

Install node and npm following one of the techniques explained within this link and run the commands below.

$ npm install --global gulp-cli
$ npm install
$ gulp