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.
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.
Yes. We have a simple live demo! Just click me :D Comming soon.
$ npm install goodshare.js --save<!-- goodshare.js minify version -->
<script src="https://cdn.jsdelivr.net/jquery.goodshare.js/4/goodshare.min.js"></script>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>vkontakteВконтактеfacebookFacebookodnoklassnikiОдноклассникиmymailruМой Мир@Mail.RugoogleplusGoogle PluslinkedinLinkedIntwitterTwitterlivejournalLiveJournaltumblrTumblrbloggerBloggerpinterestPinterestdiggDiggevernoteEvernoteredditRedditdeliciousDeliciousstumbleuponStumbleUponpocketPocketsurfingbirdSurfingbirdliveinternetLiveInternetbufferBufferinstapaperInstapaperreadabilityReadabilityxingXingwordpressWordPressbaiduBaidurenrenRenRenweiboWeibo
Note: If you don't see your social network, please let us know and we'll try to add it!
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>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>We use event.preventDefault() for event «click». So don't be afraid to use links like this:
<a href="#" data-social="...">My link</a>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:
vkontakteВконтактеfacebookFacebookodnoklassnikiОдноклассникиmoimirМой Мир@Mail.RugoogleplusGoogle PluslinkedinLinkedIntumblrTumblrpinterestPinterestredditRedditstumbleuponStumbleUponpocketPocketsurfingbirdSurfingbirdbufferBufferxingXing
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).
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!
- First, clone
goodshare.jsrepository to you computer:
$ cd ~/my-develop-dir/
$ git clone https://github.com/koddr/goodshare.js.git- Next, open file
./src/goodshare.jsat 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 -pIf 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();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();- Drupal 7.x: https://github.com/nosov33/drupal_goodshare
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.
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!