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", counter: true, twitter_counter: false, buttons: [ "mail", "facebook", "google-plus", "linkedin", "odnoklassniki", "pinterest", "reddit", "stumbleupon", "telegram", "tumblr", "twitter", "vk", "whatsapp" ], title: document.title, url: window.location.href, text: { 'default': 'share with ', 'facebook': 'share with facebook', 'google-plus': 'share with g+' }, text_title_case: false, description: $('meta[name="description"]').attr("content"), media: $('meta[property="og:image"]').attr("content"), popup: true, popup_width: 400, popup_height: 300 }); |
See live demo and download source code.
DEMO | DOWNLOAD
See official github repository for more information and follow for future updates.
