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.
<!--CSS--> <link rel="stylesheet" type="text/css" href="jquery.floating-social-share.min.css" /> <!--JS--> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="jquery.floating-social-share.min.js"></script> |
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.
