Custom Social Share Buttons / Links With jQuery - socialShare

Just another jQuery social sharing plugin that lets you create social share links with custom icons, buttons, styles and templates.

How to use it:

1. Load the minified version of the jQuery socialShare plugin after you've loaded jQuery JavaScript library.

<script src="jquery.js"></script>
<script src="jquery-socialshare.js"></script>

2. Load a theme CSS or iconic font (e.g. Font Awesome) of your choice to style the social share links.

<link rel="stylesheet" href="font-awesome.min.css">

3. Insert social share links into your webpage when needed.

<a href="#" class="custom-class amazon">Share with Amazon</a>

<a href="#" class="custom-class blogger">Share with Blogger</a>

<a href="#" class="custom-class buffer">Share with Buffer</a>

<a href="#" class="custom-class delicious">Share with Delicious</a>

<a href="#" class="custom-class digg">Share with Digg</a>

<a href="#" class="custom-class evernote">Share with Evernote</a>

<a href="#" class="custom-class facebook">Share with Facebook</a>

<a href="#" class="custom-class googleplus">Share with GooglePlus</a>

<a href="#" class="custom-class linkedin">Share with LinkedIn</a>

<a href="#" class="custom-class pinterest">Share with Pinterest</a>

<a href="#" class="custom-class pocket">Share with Pocket</a>

<a href="#" class="custom-class quora">Share with Quora</a>

<a href="#" class="custom-class reddit">Share with Reddit</a>

<a href="#" class="custom-class stumbleupon">Share with StumbleUpon</a>

<a href="#" class="custom-class tumblr">Share with Tumblr</a>

<a href="#" class="custom-class twitter">Share with Twitter</a>

<a href="#" class="custom-class email">Share by Email</a>

4. Initialize the plugin and specify the page URL you'd like to share with your friends.

$("a").jqss({
  url: '...'
});

5. Sometimes you might need a custom share link:

<a href="#" class="custom">Share with a custom template</a>

$.fn.jqss.templates['custom'] = 'https://custom.com?u={{URL}}&t={{TITLE}}';
$.fn.jqss.ariaLabels['custom'] = 'Custom';

6. All configuration options with default values.

$("a").jqss({
  usePopup: true,
  popupWidth: 600,
  popupHeight: 450,
  ariaLabelPrefix: "Share with",

  url: window.location.href,
  siteUrl: window.location.origin || window.location.protocol + "//" + window.location.hostname + ( window.location.port ? ":" + window.location.port : "" ),
  source: $head.find( "[name=site], [name=Site]" ).prop( "content" ) || window.document.title,
  title: $head.find( "[name=title], [name=Title]" ).prop( "content" ) || window.document.title,
  description: $head.find( "[name=description], [name=Description], [property='og:description'], [property='og:Description']" ).attr( "content" ) || window.document.title,
  image: $head.find( "[name=image], [name=Image], [property='og:image'], [property='og:Image']" ).prop( "content" ) || $( "img:first" ).prop( "src" ) || "",
  price: $head.find( "[property='og:product:price:amount']" ).prop( "content" ) || "",
  template: null,

  imageSelector: null,
  priceSelector: null,

  emailSubject: "I'm sharing \"{{TITLE}}\" with you",
  emailBody: "Because I think you'll find it very interesting.%0A%0A\"{{DESCRIPTION}}\"%0A%0AClick this link {{URL}} for more info.",

  twitterSource: ( $head.find( "[name='twitter:creator'], [name='twitter:site']" ).prop( "content" ) || "" ).replace( "@", "" ),

  onOpen: function() { },
  onClose: function() { }
});

Change log:

2017-03-23

• Bugs fixed

---

This awesome jQuery plugin is developed by pnmcosta. For more Advanced Usages, please check the demo page or visit the official website.