A minimalist social sharing jQuery plugin, use any styles, themes, buttons or links. Includes templates and callbacks for popup open and close events.
View the Online Demo, it uses the Zocial CSS social buttons and Bootstrap presentation purposes.
Versions are incremented according to semver.
- jQuery 1.9.1+
Because I always found it tricky to find the right social sharing plugin for the bespoke websites I develop at my daily job @PMC-Digital. The existing plugins either relied on their own themes, styling, were hard to customize or heavy!
I also wanted to get started with Grunt, Bower and the possibilities of developing with these tools.
You can install this package either from a release or bower.
Download a compressed *-dist.zip file from the Releases Tab
bower install jquery-socialshare --saveInclude a <script> on your html file:
<script src="/your/path/to/jquery-socialshare.min.js"></script>or include it via CDN:
<script src="https://cdn.jsdelivr.net/npm/jquery-socialshare/dist/js/jquery-socialshare.min.js"></script>Configure your links/buttons with a class for the corresponding template:
<div class="social-container">
<a href="#" class="facebook" aria-label="Share this page with Facebook" role="button">Share on Facebook</a>
<button class="twitter" aria-label="Share this page with Twitter">Share on Twitter</button>
</div>Call the jqss plugin via javascript:
$(function () {
$(".social-container a, .social-container button").jqss();
});The plugin is packaged with templates for the following social networks: amazon, blogger, buffer, delicious, digg, evernote, pinterest, pocket, quora, reddit, tumbleupon, tumblr, email, linkedin, facebook, twitter and googleplus
You can add additional templates before initializing the plugin:
$(function () {
$.fn.jqss.templates['custom'] = 'https://custom.com?u={{URL}}&t={{TITLE}}';
$(".social-container a, .social-container button").jqss();
});It supports options with the all uppercase option name in the {{OPTIONNAME}} markup, the example above is using {{URL}} and {{TITLE}}.
Most options can be provided via data-attributes on each element. An option can be converted to a data-attribute by taking its name, replacing each uppercase letter with its lowercase equivalent preceded by a dash, and prepending data-jqss- to the result. For example, usePopup would be data-jqss-use-popup, template would be data-jqss-template, and ariaLabelPrefix would be data-jqss-aria-label-prefix.
Options set via data-attributes override any options set via javascript when initializing the plugin. Most options are global and would probably be set via javascript. The most common option to set with data-attribute on each element would be template in case you don't already specify it via a class that matches a template name.
Boolean. Default: true
Whether or not a popup is used or a new window is opened instead.
Number. Default: 600
The popup's width.
Number. Default: 450
The popup's height.
String. Default: Share with
The prefix applied to the element when usign the aria-label defined for the template.
String. Default: location.href
The url being shared that can be used as {{URL}} in a template.
String. Default: location.origin
The site url that can be used as {{SITEURL}} in a template.
String. Default: First value from meta tag(s) [name=site], [name=Site] from the document's head, if none is found the document.title.
The source that can be used as {{SOURCE}} in a template.
String. Default: First value from meta tag(s) [name=title], [name=Title] from the document's head, if none is found the document.title.
The title that can be used as {{TITLE}} in a template.
String. Default: First value from meta tag(s) [name=description], [name=Description], meta[property='og:description'], meta[property='og:Description'] from the document's head, if none is found the document.title.
The description that can be used as {{DESCRIPTION}} in a template.
String. Default: First value from meta tag(s) meta[name=image], meta[name=Image], meta[property='og:image'], meta[property='og:Image'] from the document's head, if none is found the document's img:first.
The image url that can be used as {{IMAGE}} in a template.
String. Default: First value from meta tag(s) meta[property='og:product:price:amount'] from the document's head.
The price that can be used as {{PRICE}} in a template.
String. Default: null.
The template name to be used. This option is ignored if set via the plugin's initialization, however you can define it as data-attribute on each element if not making use of the class to determine the template to use. The email template type will not use a popup and the onOpen and onClose callbacks won't be called.
String. Default: null.
A custom jQuery selector to be used instead of the default image option. Supports more than one image concatenating them with ||.
String. Default: null.
A custom jQuery selector to be used instead of the default price option. Only supports one element's text value.
String. Default: I\'m sharing "{{TITLE}}" with you.
The subject to be used with the email mailto template. It supports all the options with the {{****}} markup.
String. Default: Because I think you\'ll find it very interesting.%0A%0A"{{DESCRIPTION}}"%0A%0AClick this link {{URL}} for more info..
The body to be used with the email mailto template. It supports all the options with the {{****}} markup.
String. Default: First value from meta tag(s) [name='twitter:creator'], [name='twitter:site'] from the document's head.
The source to be used with the twitter template.
Function. Default: empty
Callback method that is triggered when the popup or window opens, except for the email template. Sends the plugin's instance and element.
function( instance, element )
Function. Default: empty
Callback method that is triggered when the popup or window closes, except for the email template. Sends the plugin's instance and element.
function( instance, element )
Methods are accessed via the plugin's name jqss e.g. $('.social-container a.facebook').jqss('open')
Boolean callsback. Default: false
Method to open the element share template. The argument callsback determines whether the onOpen and onClose callback's should be called.
$('.social-container a.facebook').jqss('open');
Boolean callsback. Default: false
Method to close the element share template if it is already open. The argument callsback determines whether the onClose callback should be called.
$('.social-container a.facebook').jqss('close');