How to add Floating Social Share buttons on websites

Social sharing button makes easy for webmaster to share their content on popular social media websites which help to get traffic back on your website. Floating Share is a jQuery plugin for creating a vertical floating social share bar with page share count. Simple jQuery floating social media sharer plugin Currently supported platforms are Facebook, Twitter, Linkedin, Pinterest, Reddit, Tumblr, VK and Odnoklassniki with counter feature, Google Plus, Mail, StumbleUpon, Telegram, and Whatsapp without counter feature.

Integrating Floating Social Share buttons on websites

Follow below steps to Integrating Floating Social Share buttons on websites.

Libraries

Include Floating Social Share JS+CSS libraries on page. Floating Social Share Js library dependent on jquery core library. So don’t forget to add jquery core library before Floating Social Share JS.

JS

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

$("body").floatingSocialShare({
  buttons: ["facebook", "twitter", "google-plus"],
  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", "google-plus"],
  text: {
    'facebook': 'Share on Facebook',
    'twitter': 'Share on Twitter',
    'google-plus': 'Share on Google Plus'
  },
  place: "content-left"
});

There is lot more options you can pass in function to customise your floatingSocialShare buttons.

$("body").floatingSocialShare({
  place: "top-left", // alternatively content-left, content-right, top-right
  counter: true, // set to false for hiding the counters of buttons
  twitter_counter: false, // Twitter API does not provide counters without API key, register to https://opensharecount.com/
  buttons: [ // all of the currently available social buttons
    "mail", "facebook", "google-plus", "linkedin", "odnoklassniki", 
    "pinterest", "reddit", "stumbleupon", "telegram", "tumblr", "twitter", 
    "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', 
    'google-plus': 'share with g+'
  },
  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
  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
});

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.