• Home
  • About Me
  • Twitter Trends
  • YoutTube Trends
  • Google Trends
  • Age Calculator
  • Public Holidays
  • Fancy Fonts
  • Privacy Policy
  • Contact Me

iamrohit.in

My Public Notebook

Skip to content
Menu
  • Tools
    • Twitter Trends
    • Google Trends
    • Youtube Trends
    • YouTube Tags Generator
    • Age Calculator
    • Public Holidays
    • English to Hindi Typing
    • Business Name Generator
    • Word Finder
    • Fancy Text Generator
    • IP Location Finder
    • Hours Calculator
    • Date Time Calculator
    • Emoji Copy Paste
  • Free Submission
    • Business Listing Directories
    • Directory Submission Sites
    • Social Bookmarking Sites
    • Classified Sites
      • India
      • Australia
      • Canada
      • United Kingdom
      • United States
    • Article Submission Sites
    • Press Release Sites List
    • PDF / DOC / PPT Submission Sites
    • Web 2.0 Submission Sites
    • RSS Feed Submission Sites List
    • Search Engine Submission Sites List
    • Forum Submission Sites List
    • Profile Creation Sites
    • Pinging Submission Sites
    • Wiki Submission Sites List
    • Image Sharing Sites
    • Question and Answer Sites List
    • Video Submission Sites
    • PDF Submission Sites List
    • Document Sharing Sites
    • Profile Creation Sites List
    • Podcast Submission
  • jQuery Plugins
    • Accordion
    • Barcode
    • Calendar
    • Clock
    • Countdown
    • Character Count
    • ColorPicker
    • Data Grid
    • DatePicker
    • Date Time
    • EU Cookie Law
    • Fileuploader
    • Form Validation
    • Icon Picker
    • Image Slider
    • image Crop
    • Image Zoom
    • Inputmask
    • Loading
    • Mega Menu
    • Menu
    • Multiselect
    • Multi-Step Form
    • News Ticker
    • Notification
    • Photo Gallery
    • QR Code
    • TimePicker
    • Tooltip
  • HOSTING

How to add Floating Social Share buttons on websites

by adminPosted onOctober 5, 2017

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.
Floating-Social-Share-Bar


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>

<!--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:"
});

$("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"
});

$(".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 
});

$("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.



Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Reddit (Opens in new window)

Related

Posted in Jquery & JavascriptTagged Jquery Plugins, jquery social share plugins

Published by admin

View all posts by admin

Post navigation

Prev {2019 UPDATED} Top 100+ Popular High PR Social Bookmarking Websites For SEO
Next Top 100 Free Online Business Directories To List Your Business Right Now – Best For SEO 2022

Subscribe to My Public NoteBook

Enter your email address to subscribe my public notebook and receive notifications of new posts by email.

Join 23,350 other subscribers

Categories

  • AI Tools
  • Angular.js
  • Bootstrap
  • CakePHP
  • CSS & CSS3
  • Express
  • Hosting
  • Interview Question and Answer
  • Jquery & Javascript
  • Kali Linux
  • Make Money Online
  • MYSQL
  • NodeJs
  • Offers & Deals
  • Others
  • PHP
  • ReactJs
  • Security Tips
  • SEO
  • Tailwind CSS
  • Tips & Tricks
  • Ubuntu
  • VueJs
  • WordPress
DigitalOcean Referral Badge

Advertisement

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
© Copyright 2023 – iamrohit.in
Allium Theme by TemplateLens ⋅ Powered by WordPress