goodshare.js

goodshare.js

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! Since 4.0.0 we don't support old jQuery versions of goodshare.js. Thank you jQuery, but ES6 is better and cleaner.

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

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

• vkontakte Вконтакте
• facebook Facebook
• odnoklassniki Одноклассники
• mymailru Мой Мир@Mail.Ru
• googleplus Google Plus
• linkedin LinkedIn
• twitter Twitter
• livejournal LiveJournal
• tumblr Tumblr
• blogger Blogger
• pinterest Pinterest
• digg Digg
• evernote Evernote
• reddit Reddit
• delicious Delicious
• stumbleupon StumbleUpon
• pocket Pocket
• surfingbird Surfingbird
• liveinternet LiveInternet
• buffer Buffer
• instapaper Instapaper
• readability Readability
• xing Xing
• wordpress WordPress
• baidu Baidu
• renren Renren
• weibo Weibo

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

• telegram Telegram
• viber Viber
• whatsapp WhatsApp
• line LINE

Description

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

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:

• vkontakte Вконтакте
• facebook Facebook
• odnoklassniki Одноклассники
• moimir Мой Мир@Mail.Ru
• googleplus Google Plus
• linkedin LinkedIn
• tumblr Tumblr
• pinterest Pinterest
• reddit Reddit
• stumbleupon StumbleUpon
• pocket Pocket
• surfingbird Surfingbird
• buffer Buffer
• xing Xing

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!

Example

This example shows one of decoration options with all supported social networks.

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)