Simple jQuery floating social media sharer plugin works with Font-Awesome. Currently supported platforms are Facebook, Twitter, Linkedin, Pinterest, Google Plus, Reddit, Tumblr, VK and Odnoklassniki with counter feature, Email, StumbleUpon, Telegram, and Whatsapp without counter feature.
You can check the plugin online on Online Alarm Clock.
Install via bower and include from your bower_components
folder.
bower install --save jquery-floating-social-share
Or install via npm and include from your node_modules
folder
npm install --save jquery-floating-social-share
Or install via zip, then include jQuery and Font-Awesome and the plugin on a page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css">
<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", "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"
});
- place:
String
(top-left
by default) Set the position of the box. Currently:content-left
,content-right
,top-left
andtop-right
are available. - counter:
Boolean
(true
by default) Set tofalse
to hide counters that appear below the buttons. - twitter_counter:
Boolean
(false
by default) Set totrue
to show twitter counter, but you also need to register to Open Share Count since Twitter API does not provide counters without an API key. - buttons:
Array
(["facebook", "twitter", "google-plus"]
by default) Sets the social buttons for sharing. Available ones areenvelope
,facebook
,google-plus
,linkedin
,odnoklassniki
,pinterest
,reddit
,stumbleupon
,telegram
,tumblr
,twitter
vk
andwhatsapp
. - 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. - 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 formargin-left
if the selected place iscontent-right
orcontent-left
.
$("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
"envelope", "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_width: 400, // the sharer popup width, default is 400px
popup_height: 300 // the sharer popup height, default is 300px
});
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