jsSocials – Simple Social Sharing
Project site js-socials.com
jsSocials is a simple social network sharing jQuery plugin. It’s flexible and easily extensible.
Configure visual appearance. Choose one of several themes provided. Add any yet unsupported social network if needed.
Demos
Find demos on the project site.
Getting Started
Download the package or install it with bower
$ bower install jssocials
Add links to jssocials.css and chosen theme, e.g. jssocials-theme-flat.css
Add link to font-awesome.css (it’s used for social network logos by default, yet you can replace it with image logo or other font if necessary)
Add link to jquery.js and plugin script jssocials.min.js
Apply jsSocials to the element on the page $(“#share”).jsSocials({ shares: [“twitter”] })
Documentation
Themes
Configuration
Methods
Share
Build-in Shares
Custom Share
Adaptiveness
Custom Share Strategy
Themes
To turn on a specific theme just link one of available stylesheets
jssocials-theme-flat.css – flat theme
jssocials-theme-classic.css – classical theme with raised buttons
jssocials-theme-minima.css – minimalistic theme with logos instead of buttons
jssocials-theme-plain.css – monochromatic theme
flat
classic
minima
plain
Configuration
The config object may contain following options:
{ shares: [“email”, “twitter”, “facebook”, “googleplus”, “linkedin”, “pinterest”, “stumbleupon”, “whatsapp”, “telegram”, “line”], url: “http://url.to.share”, text: “text to share”, showLabel: true, showCount: true, shareIn: “popup”, on: { click: function(e) {}, mouseenter: function(e) {}, mouseleave: function(e) {}, … }}
shares :Array
An array of shares.
Each share can be a
string – name of share from registry jsSocials.shares (e.g. “twitter”)
config – plain object with share as name and custom parameters specific for each share. Read more about share config in Share section.
For instance for twitter the config might look like:
{ share: “twitter”, // name of share label: “Tweet”, // share button text (optional) via: “artem_tabalin”, // custom twitter sharing param ‘via’ (optional) hashtags: “jquery,plugin” // custom twitter sharing param ‘hashtags’ (optional)}
url :String
A string specifying url to share. Value of window.location.href is used by default.
text :String
A string specifying text to share. The content of or
(if first is missing) is used by default.<br />
showLabel :true|false|function(screenWidth)<br />
A boolean specifying whether to show the text on the share button.<br />
Also accepts function returning true|false depending on the screen width for adaptive rendering. Read more in Adaptiveness section.<br />
showCount :true|false|”inside”|function(screenWidth)<br />
A boolean or “inside” specifying whether and how to show share count.<br />
Also accepts function returning true|false|”inside” depending on the screen width for adaptive rendering. Read more in Adaptiveness section.<br />
shareIn : “blank”|”popup”|”self”</p>
<p>version added: 1.2</p>
<p>A string specifying the name of sharing strategy. All strategies are stored in the registry jsSocials.shareStrategy.<br />
There are 3 built-in sharing strategies:<br />
blank – share in the new browser tab<br />
popup – share in the new browser popup window<br />
self – share in the same browser tab<br />
Custom sharing strategies can be added to registry jsSocials.shareStrategy. Find more in Custom Share Strategy section.<br />
on :Object</p>
<p>version added: v1.0</p>
<p>An object specifying the sharing link event handlers. Handlers for all supported by DOMElement events can be specified.<br />
The handlers will be attached to the share link. The context of handler is the share config. The argument of the handler is a jQuery event.<br />
In the following example once a user clicks twitter sharing link, the sharing url is printed to the browser console<br />
{ on: { click: function(e) { if(this.share === “twitter”) { console.log(“tweet “” + this.url + “” at ” + e.timeStamp); } } }}<br />
Methods<br />
destroy()<br />
Destroys the shares control and brings the Node to its initial state.<br />
$(“#share”).jsSocials(“destroy”);<br />
option(optionName, [optionValue])<br />
Gets or sets the value of an option.<br />
optionName is the name of the option.<br />
optionValue is the new option value to set.<br />
If optionValue is not specified, then the value of the option optionName will be returned.<br />
// turn off share count$(“#share”).jsSocials(“option”, “showCount”, false); // get sharing textvar text = $(“#share”).jsSocials(“option”, “text”);<br />
refresh()<br />
Refreshes sharing control.<br />
$(“#share”).jsSocials(“refresh”);<br />
shareOption(shareName|shareIndex, optionName, [optionValue])</p>
<p>version added: 1.1</p>
<p>Gets or sets the value of a share option.<br />
shareName|shareIndex is the name or the index of the share to get/set the option value.<br />
optionName is the name of the share option.<br />
optionValue is the new option value to set.<br />
If optionValue is not specified, then the value of the share option optionName will be returned.<br />
// change label of twitter share$(“#share”).jsSocials(“shareOption”, “twitter”, “label”, “Tweet!”); // get label of the 2nd sharevar secondShareOption = $(“#share”).jsSocials(“shareOption”, 1, “label”);<br />
jsSocials.setDefaults(config)<br />
Set default options for all jsSocials.<br />
jsSocials.setDefaults({ showLabel: false, showCount: “inside”});<br />
jsSocials.setDefaults(shareName, config)<br />
Set default options of particular share.<br />
jsSocials.setDefaults(“twitter”, { via: “artem_tabalin”, hashtags: “jquery,plugin”});<br />
Share<br />
A share config has few applicable for all shares parameters. Yet each share may have specific parameters.<br />
{ share: “twitter”, label: “Tweet”, logo: “fa fa-twitter”, css: “custom-class”, shareIn: “blank”, renderer: function() { … }}<br />
share :String<br />
A string name of the share.<br />
jsSocials supports following build-in shares: “email” | “twitter” | “facebook” | “googleplus” | “linkedin” | “pinterest” | “stumbleupon” | “whatsapp” | “telegram” | “line”<br />
Adding any new share is simple and described in Custom Share section.<br />
label :String<br />
A string specifying the text to show on share button.<br />
logo :String<br />
A string specifying the share logo.<br />
It accepts following values:</p>
<p>css class – any non-url string is rendered as <i class="css class"></i>. Font awesome is used by default, but it can be redefined with any other css class.<br />
image url – string in image url format is rendered as <img src="image url" />.<br />
image base64 url – string in image base64 url format is rendered as <img src="image base64 url" />.</p>
<p>css: String<br />
A string specifying spaces-separated custom css classes to attach to share DOM element.<br />
shareIn : “blank”|”popup”|”self”</p>
<p>version added: 1.2</p>
<p>A string specifying the name of sharing strategy. It’s identical to shareIn option of jsSocials, but specifies sharing strategy for a particular share.<br />
Accepts the following values for built-in strategies:<br />
blank – share in the new browser tab<br />
popup – share in the new browser popup window<br />
self – share in the same browser tab<br />
Custom sharing strategies can be added to registry jsSocials.shareStrategy. Find more in Custom Share Strategy section.<br />
renderer :function()<br />
A function returning </p>
<div> with custom share content.<br />
The renderer is used for custom share scenario, e.g. using standard sharing component for particular network.<br />
If renderer is specified, then all other share parameters are ignored.<br />
This is how to render native google plus share button with renderer:<br />
$(“#share”).jsSocials({ shares: [{ renderer: function() { var $result = $(“</p>
<div>“); var script = document.createElement(“script”); script.src = “https://apis.google.com/js/platform.js”; $result.append(script); $(“</p>
<div>“).addClass(“g-plus”) .attr({ “data-action”: “share”, “data-annotation”: “bubble” }) .appendTo($result); return $result; } }]});<br />
Build-in Shares<br />
The build-in social network shares have following configuration<br />
email<br />
{ label: “E-mail”, logo: “fa fa-at”, to: “my.address@test.com”, shareIn: “self”}<br />
twitter<br />
{ label: “Tweet”, logo: “fa fa-twitter”, via: “”, // a Twitter username specifying the source of a Tweet. hashtags: “” // a comma-separated list of hashtags to be appended to Tweet text.}<br />
facebook<br />
{ label: “Like”, logo: “fa fa-facebook”}<br />
googleplus<br />
{ label: “+1”, logo: “fa fa-google-plus”}<br />
linkedin<br />
{ label: “Share”, logo: “fa fa-linkedin”}<br />
pinterest<br />
{ label: “Pin it”, logo: “fa fa-pinterest”, media: “” // a url of media to share}<br />
stumbleupon<br />
{ label: “StumbleUpon”, logo: “fa fa-stumbleupon”}<br />
whatsapp</p>
<p>version added: 1.1</p>
<p>{ label: “WhatsApp”, logo: “fa fa-whatsapp”, shareIn: “self”}<br />
telegram</p>
<p>version added: 1.3</p>
<p>{ label: “Telegram”, logo: “fa fa-paper-plane”}<br />
line<br />
{ label: “LINE”, logo: “fa fa-comment”}<br />
Custom Share<br />
To register a custom share add it to jsSocials.shares registry.<br />
This is how the twitter share is defined:<br />
jsSocials.shares.twitter = { label: “Tweet”, logo: “fa fa-twitter”, shareUrl: “https://twitter.com/share?url={url}&text={text}&via={via}&hashtags={hashtags}”, countUrl: “https://cdn.api.twitter.com/1/urls/count.json?url={url}&callback=?”, getCount: function(data) { return data.count; }};<br />
If you wish to get your share styling for all supported themes, add its name and color to _shares.scss and build css.<br />
Currently _shares.scss contains following collections:<br />
$share-names: (‘twitter’, ‘facebook’, ‘googleplus’, ‘linkedin’, ‘pinterest’, ’email’, ‘stumbleupon’, ‘whatsapp’, ‘telegram’, ‘line’);$share-colors: (#00aced, #3b5998, #dd4b39, #007bb6, #cb2027, #3490F3, #eb4823, #29a628, #2ca5e0, #25af00);<br />
Each share has following parameters:<br />
label :String<br />
The default value of share label to display on the share button.<br />
logo :String<br />
A default value of share logo. Accepts css class or image url.<br />
shareUrl :String|function()<br />
A string or a function returning a string specifying the sharing url.<br />
It can contain any parameters in curly braces {param}. These parameters will be taken from share config.<br />
The {url} and {text} parameters are taken from jsSocials config.<br />
countUrl :String|function()<br />
A string or a function returning a string specifying the url to request shares count.<br />
It can contain any parameters in curly braces {param}. These parameters will be taken from share config.<br />
The {url} parameter is taken from jsSocials config.<br />
The countUrl option should be specified only if you are going to show share count (showCount is not false).<br />
getCount :function(data)<br />
A function retrieving count value from response received from countUrl.<br />
Accepts response data. The response data is used as count if function is not specified.<br />
If getCount returns a number, it will be formatted (e.g. 1200 to 1.2K).<br />
Return a string value to avoid automatic formatting.<br />
Adaptiveness<br />
Options showLabel and showCount accept function(screenWidth) that has screen width as an input parameter and returns the value specifying whether to show label (or count).<br />
By default showLabel function returns following values:</p>
<p>true for all screens wider than 1024px (large screen)<br />
true for all screens wider than 640px (small screen) when showCount is false<br />
false in all other cases</p>
<p>By default showCount function returns following values:</p>
<p>true for all screens wider than 640px (small screen)<br />
“inside” for all screens with width less than 640px (small screen)</p>
<p>These breakpoints are defined with jsSocials config options:<br />
{ smallScreenWidth: 640, largeScreenWidth: 1024}<br />
Thus these breakpoint values can be redefined in jsSocials config.<br />
The adaptive behavior can be easily redefined with custom showLabel and showCount functions.<br />
In this example we show counter for all screens wider than 1024px hiding count for other screens,<br />
and show label for screens wider 1280px hiding for other screens:<br />
$(“#share”).jsSocials({ showCount: function(screenWidth) { return (screenWidth > 1024); }, showLabel: function(screenWidth) { return (screenWidth > 1280); }, …});<br />
Custom Share Strategy</p>
<p>version added: 1.2</p>
<p>A custom share strategy can be used to redefine standard behavior of sharing or customize rendering of a sharing control.<br />
The sharing strategy is a function that accepts a single parameter { shareUrl: “http://your.share.url” } and should return a jQuery element.<br />
It should be added to jsSocials.shareStrategies hash.<br />
In the following example we define a sharing strategy that shares in a browser window with custom params and instead of link <a> uses custom </p>
<div> element:<br />
jsSocials.shareStrategies[“my_popup”] = function(args) { return $(“</p>
<div>“).click(function() { window.open(args.shareUrl, “MyShareWindow”, “width=800, height=600, location=1, resizeable=1, menubar=0, scrollbars=0, status=0, titlebar=0, toolbar=0”); });}; $(“#share”).jsSocials({ shareIn: “my_popup”, shares: [“twitter”, “facebook”, “googleplus”]});<br />
License<br />
MIT © Artem Tabalin</p>
<p><a href="https://js-socials.com" target="_blank" rel="noopener"><strong>GitHub Repo</strong></a></p>
<div class="crp_related "><h4>Related Plugins:</h4><ul><li><a href="https://jqueryplugins.net/2021/08/18/lazyloadxt/" class="crp_link post-167"><span class="crp_title">lazyloadxt</span></a><span class="crp_excerpt"> Lazy Load XT jQuery plugin Table of Contents About Download /…</span></li><li><a href="https://jqueryplugins.net/2021/08/18/lazyloadxt-amd/" class="crp_link post-217"><span class="crp_title">lazyloadxt-amd</span></a><span class="crp_excerpt"> Lazy Load XT jQuery plugin Table of Contents About Download /…</span></li><li><a href="https://jqueryplugins.net/2021/08/18/mitch528-angular-froala-wysiwyg/" class="crp_link post-877"><span class="crp_title">@mitch528/angular-froala-wysiwyg</span></a><span class="crp_excerpt"> Angular Froala WYSIWYG Editor - Demo Angular 2, Angular 4, Angular…</span></li></ul><div class="crp_clear"></div></div>
</div><!-- .entry-content -->
</div><!-- .post-inner -->
<div class="section-inner">
</div><!-- .section-inner -->
<nav class="pagination-single section-inner" aria-label="Post" role="navigation">
<hr class="styled-separator is-style-wide" aria-hidden="true" />
<div class="pagination-single-inner">
<a class="previous-post" href="https://jqueryplugins.net/2021/08/18/jquery-facedetection/">
<span class="arrow" aria-hidden="true">←</span>
<span class="title"><span class="title-inner">jquery.facedetection</span></span>
</a>
<a class="next-post" href="https://jqueryplugins.net/2021/08/18/simplelightbox/">
<span class="arrow" aria-hidden="true">→</span>
<span class="title"><span class="title-inner">simplelightbox</span></span>
</a>
</div><!-- .pagination-single-inner -->
<hr class="styled-separator is-style-wide" aria-hidden="true" />
</nav><!-- .pagination-single -->
</article><!-- .post -->
</main><!-- #site-content -->
<div class="footer-nav-widgets-wrapper header-footer-group">
<div class="footer-inner section-inner">
<aside class="footer-widgets-outer-wrapper" role="complementary">
<div class="footer-widgets-wrapper">
<div class="footer-widgets column-one grid-item">
<div class="widget widget_block"><div class="widget-content">
<div class="wp-container-1 wp-block-group"><div class="wp-block-group__inner-container">
<figure class="wp-block-image size-full"><a href="https://jmjwebdesign.com/" target="_blank"><img loading="lazy" width="300" height="50" src="https://jqueryplugins.net/wp-content/uploads/2021/08/jmj-website-design-new-logo-dark-bg-e1628722344245.png" alt="" class="wp-image-23"/></a></figure>
</div></div>
</div></div><div class="widget widget_block"><div class="widget-content">
<div class="wp-container-2 wp-block-group"><div class="wp-block-group__inner-container"></div></div>
</div></div><div class="widget widget_block"><div class="widget-content">
<div class="wp-container-3 wp-block-group"><div class="wp-block-group__inner-container"></div></div>
</div></div> </div>
<div class="footer-widgets column-two grid-item">
<div class="widget widget_block widget_categories"><div class="widget-content"><ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-4"><a href="https://jqueryplugins.net/category/insights/">Insights</a> (5)
</li>
<li class="cat-item cat-item-6"><a href="https://jqueryplugins.net/category/plugins/">Plugins</a> (1,718)
</li>
<li class="cat-item cat-item-5"><a href="https://jqueryplugins.net/category/trends/">Trends</a> (1)
</li>
</ul></div></div> </div>
</div><!-- .footer-widgets-wrapper -->
</aside><!-- .footer-widgets-outer-wrapper -->
</div><!-- .footer-inner -->
</div><!-- .footer-nav-widgets-wrapper -->
<footer id="site-footer" role="contentinfo" class="header-footer-group">
<div class="section-inner">
<div class="footer-credits">
<p class="footer-copyright">©
2022 <a href="https://jqueryplugins.net/">JQuery Plugins</a>
</p><!-- .footer-copyright -->
<p class="powered-by-wordpress">
<a href="/privacy-policy/">Privacy/Contact</a>
</a>
</p><!-- .powered-by-wordpress -->
</div><!-- .footer-credits -->
<a class="to-the-top" href="#site-header">
<span class="to-the-top-long">
To the top <span class="arrow" aria-hidden="true">↑</span> </span><!-- .to-the-top-long -->
<span class="to-the-top-short">
Up <span class="arrow" aria-hidden="true">↑</span> </span><!-- .to-the-top-short -->
</a><!-- .to-the-top -->
</div><!-- .section-inner -->
</footer><!-- #site-footer -->
<style>.wp-container-1 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-1 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-1 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>
<style>.wp-container-2 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-2 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-2 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>
<style>.wp-container-3 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-3 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-3 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>
<script src='https://jqueryplugins.net/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.9' id='regenerator-runtime-js'></script>
<script src='https://jqueryplugins.net/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script>
<script id='contact-form-7-js-extra'>
var wpcf7 = {"api":{"root":"https:\/\/jqueryplugins.net\/wp-json\/","namespace":"contact-form-7\/v1"}};
</script>
<script src='https://jqueryplugins.net/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.6.1' id='contact-form-7-js'></script>
<script>
/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
</script>
</body>
</html>