Useful
jQuery pluginmodern JavaScript solution for share a link from your website to social networks or mobile messengers. Easy to install and configuring on any of your website!
Simple install, extensive documentation, developer support, SEO friendly, many options for customization of appearance, clean code without scripts tracking user activity on the page, high speed.
Install via npm:
$ npm install goodshare.js --saveOr include from jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/goodshare.js@4/goodshare.min.js"></script>Script works with any HTML tags: <a> or <div> or <button> or other.
So you can choose any and add required attributes
data-social.
For example:
<!-- Create button with share to Twitter -->
<button data-social="twitter">Share this to Twitter</button>
<!-- Create link with share to Facebook -->
<a href="#" data-social="facebook">Share this to Facebook</a>
<!-- Create div container with share to LinkedIn -->
<div data-social="linkedin">Share this to LinkedIn</div>
<!-- Create icon from Fontello.com with share to Google+ -->
<i class="icon-google-plus" data-social="googleplus"></i>By default, goodshare.js search this tags for get title, description and image (for some social networks):
<head>
<title>Current page title</title>
<meta name="description" content="Current page description.">
<link rel="apple-touch-icon" href="http://example.com/path/to/image.png">
...
</head>If you want to add different url, title, description and image to share element — use special data-* attributes:
data-urlredefinesdocument.location.hrefdata-titleredefinesdocument.titledata-descriptionredefinesmeta[name="description"]data-imageredefineslink[rel="apple-touch-icon"]
Note: Please keep in mind, not all social networks support all of them data attributes!
To display share count, just add data-counter attribute to HTML element that will contain numbers. For example:
<!-- Create link with share to Facebook and counter -->
<a href="#" data-social="facebook">
Share this to Facebook
<span data-counter="facebook"></span>
</a>You also may put this attribute to any element.
- No more depending on jQuery! Since
4.x, no longer support the oldgoodshare.jsversion (3.2.9 and lower). Thank you jQuery, but ES6 is better and cleaner. - Browser support. Since
4.x,goodshare.jsdo not support Internet Explorer 10 and older (check ES6 support table).
Development and maintenance engaged by Vic Shóstak (aka Koddr).
If you want to say «thank you» and/or ask me about goodshare.js — create new issue.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent