Useful modern JavaScript solution that will help your website visitors share a link on social networks and microblogs or mobile messengers. Easy to install and configuring on any of your website!
JavaScript HTML

README.md

goodshare.js logo github

goodshare.js npm version

Useful jQuery plugin modern JavaScript solution that will help your website visitors share a link on social networks and microblogs or mobile messengers. Easy to install and configuring on any of your website!

Warning! No more depending on jQuery! Since 4.0.0, we'll no longer support the old goodshare.js version (3.2.9 and lower). Thank you jQuery, but ES6 is better and cleaner.

Browser support. Branch 4.x of goodshare.js do not support IE11 and older (check ES6 support table). For working with zombie browsers, please use polyfills and Babel (for goodshare.min.js too!).

Features

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 (recommended)

$ npm install goodshare.js --save

Work through CDN

<!-- goodshare.js minify version -->
<script src="https://cdn.jsdelivr.net/jquery.goodshare.js/4/goodshare.min.js"></script>

Old way to install

Download goodshare.min.js and place file to your project template (before close body tag):

<!-- goodshare.js minify version -->
<script src="/path/to/goodshare.min.js"></script>

List of supported social networks and microblogs

Note: If you don't see your social network, please let us know and we'll try to add it!

For iOS/Android mobile devices

Share links

Plugin 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>

Note for description and image

By default, goodshare.js search this tags for get description and image (for some social networks):

<head>
  ...
  <meta name="description" content="Current page description."/>
  <link rel="image_src" href="http://your-site.com/path/to/image.jpg"/>
  ...
</head>

Note for <a> links

We use event.preventDefault() for event «click». So don't be afraid to use links like this:

<a href="#" data-social="...">My link</a>

Share counters

To display counter, 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>

Note: You also may put this attribute to any element.

Value of data-counter attribute, see in this list of supported social networks and microblogs:

Note: Google Plus, Surfingbird, StumbleUpon, Pocket and Xing counters use Yahoo Query Language (YQL). It may impose some restrictions on use, associated with limit queries to Yahoo (we try to find another solution for this, if you know — write issue to us).

How to get Twitter share counter after API 1.1 changes?

Simple solution for single domain: http://opensharecount.com

Note: We're not authors of the web site opensharecount.com, if something not working — write to their support please!

How to reorganize social networks? Simple!

  • First, clone goodshare.js repository to you computer:
$ cd ~/my-develop-dir/
$ git clone https://github.com/koddr/goodshare.js.git
  • Next, open file ./src/goodshare.js at your favorite IDE;
  • Comment out or delete unwanted lines with social networks providers;
  • Last, run build and packing to minify file (required Babel and Webpack):
$ babel src -d dist
$ webpack ./dist/goodshare.js ./goodshare.min.js -p

Customize share link

If you want to replace any default share parameters (URL, title, descripton, image) — just edit social network provider and re-build script.

export let vkontakte_share = new Vkontakte(
  'http://your-another-site.com/', // URL
  'New title of current page', // title
  'New description of current page.', // description
  'http://your-another-site.com/path/to/new-image.jpg' // image
).shareWindow();

Customize share counter

If you want to replace default share counter URL (get from window.location.href) — just edit social network provider and re-build script.

export let vkontakte_counter = new Vkontakte(
  'http://your-another-site.com/' // URL
).getCounter();

Modules for popular CMS

Developers

Development and maintenance of goodshare.js project engaged by Vikky Shostak (Koddr). If you want to write a «thank you» or ask us about something, use this e-mail.

Your help

If you want help, we will be glad reviews about goodshare.js on personal blogs (including Twitter), online media and/or specialized IT-portals. Thank you!

License

The MIT License (MIT)