Внимание! Документацию, примеры использования и рекомендации по установке на русском языке — вы можете найти на официальном сайте.
Useful jQuery plugin 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!
Simple install, can work through СDN, extensive documentation, developer support, SEO friendly, many options for customization of appearance, clean code without scripts tracking user activity on the page, high speed.
At ver. 3.0
we added share counters for most popular social networks and reorganize code.
At ver. 3.1.7
we added an external function getCount()
that updates counter from any place of your script. This can be useful if you create share buttons when the DOM is fully loaded. Small demo can be found on JSFiddle.
At ver. 3.2.2
we added special share buttons for mobile Apps, like Telegram or Viber.
At ver. 3.2.4
we drop support Twitter share count, 'cause official Twitter API update to version 1.1 and stop supporting old way to get URL share count (see this blog post). This is small instruction if you need it for ONLY one domain.
If you're looking for a simple basic demo, it's here.
Download goodshare.js from GitHub. Place plugin file to your project folder: ./path/to/your/project/folder/js/goodshare.min.js
.
Add to your project template (or something else):
<!-- jQuery 1.11.3 minify version from Google CDN JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- goodshare.js minify version -->
<script src="../path/to/your/project/folder/js/goodshare.min.js"></script>
If you want place plugin via fast CDN (special thanks to jsDelivr project and this issue), use this:
<!-- Latest 3.2.x goodshare.js minify version from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/jquery.goodshare.js/3.2.4/goodshare.min.js"></script>
For more speed and profit, use «all in one» solution from jsDelivr CDN:
<!-- jQuery 1.11.3 minify version and latest 3.2.x goodshare.js minify version from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/g/jquery@1.11.3,jquery.goodshare.js@3.2.4"></script>
vk
Вконтактеfb
Facebookok
Одноклассникиmr
Мой Мир@Mail.Rugp
Google Plusli
LinkedIntw
Twitterlj
LiveJournaltm
tumblrbl
Bloggerpt
Pinterestdi
Diggen
Evernoterd
Redditde
Delicioussu
StumbleUponpo
Pocketsb
Surfingbirdbf
Bufferip
Instapaperra
Readabilityxi
Xingwp
WordPress
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: class goodshare
and data-type
. For example:
<!-- Create button with share to Twitter -->
<button class="goodshare" data-type="tw">Share this to Twitter</button>
<!-- Create link with share to Facebook -->
<a href="#" class="goodshare" data-type="fb">Share this to Facebook</a>
<!-- Create div container with share to LinkedIn -->
<div class="goodshare" data-type="li">Share this to LinkedIn</div>
<!-- Create icon from Fontello.com with share to Google+ -->
<i class="goodshare icon-google-plus" data-type="gp"></i>
You can change these attributes as needed for your project:
Attribute | Description (default: value) |
---|---|
data-type | [required] Type (name) of social network (default: "vk") |
data-url | (optional) Current page URL (default: browser adress field) |
data-title | (optional) Current page title (default: head title) |
data-text | (optional) Current page description text (default: meta property="og:description") |
data-image | (optional) Current page image URL (default: meta property="og:image") |
We use event.preventDefault()
for event "click". So don't be afraid to use links like this:
<a href="#">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="#" class="goodshare" data-type="fb">
Share this to Facebook
<span data-counter="fb"></span>
</a>
Note: You may put this attribute to any element, even that hasn't class goodshare
. For example:
<!-- Create link with share to Facebook -->
<a href="#" class="goodshare" data-type="fb">Share this to Facebook</a>
...
...
<!-- Create external Facebook share counter -->
<div>
<div>All Facebook shares:</div>
<div data-counter="fb"></div>
</div>
Value of data-counter
attribute, see in this list of supported social networks and microblogs:
vk
Вконтактеfb
Facebookok
Одноклассникиmr
Мой Мир@Mail.Rugp
Google Plusli
LinkedIntm
tumblrpt
Pinterestrd
Redditsu
StumbleUponpo
Pocketsb
Surfingbirdbf
Bufferxi
Xing
Note: 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).
- Go to http://opensharecount.com and register (need auth with your Twitter account);
- Download goodshare.js;
- Found lines 490-494 and replace with this code:
if (existCount('[data-counter="tw"]')) {
var domain = 'http://example.com'; // It's domain that you entered when registering on http://opensharecount.com
$.getJSON('http://opensharecount.com/count.json?url=' + encodeURIComponent(domain) + '&callback=?', function(response) {
$('[data-counter="tw"]').text(roundCount(response.count));
});
};
Save and upload to your server.
Note: We're not authors of the web site opensharecount.com, if something not working — write to their support please!
This example shows one of decoration options with all supported social networks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My page with goodshare.js</title>
<style>
html, body {font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; text-align: center;}
a {color: #ffffff; display: inline-block; width: 150px; padding: 10px; margin: 2px auto; cursor: pointer;}
a[data-type="vk"] {background: #45668e;}
a[data-type="fb"] {background: #3b5998;}
a[data-type="ok"] {background: #ed812b;}
a[data-type="mr"] {background: #168de2;}
a[data-type="gp"] {background: #dd4b39;}
a[data-type="li"] {background: #0976b4;}
a[data-type="tw"] {background: #55acee;}
a[data-type="lj"] {background: #004359;}
a[data-type="tm"] {background: #35465c;}
a[data-type="bl"] {background: #f57d00;}
a[data-type="pt"] {background: #cc2127;}
a[data-type="di"] {background: #000000;}
a[data-type="en"] {background: #7ac142;}
a[data-type="rd"] {background: #5f99cf;}
a[data-type="de"] {background: #3399ff;}
a[data-type="su"] {background: #eb4924;}
a[data-type="po"] {background: #d3505a;}
a[data-type="sb"] {background: #26B1F6;}
a[data-type="bf"] {background: #323b43;}
a[data-type="ip"] {background: #428bca;}
a[data-type="ra"] {background: #990000;}
a[data-type="xi"] {background: #cfdc00;}
a[data-type="wp"] {background: #0087be;}
a[data-type="tg"] {background: #0088cc;}
a[data-type="vi"] {background: #8f5db7;}
a[data-type="wa"] {background: #43d854;}
a[data-type="ln"] {background: #00c300;}
</style>
</head>
<body>
<h1>My page with goodshare.js</h1>
<p>Useful jQuery plugin that will help your website visitors share a link on social networks and microblogs.<br />
Easy to install and configuring on any of your website!</p>
<div>
<a href="#" class="goodshare" data-type="vk">Вконтакте <span data-counter="vk"></span></a>
<a href="#" class="goodshare" data-type="fb">Facebook <span data-counter="fb"></span></a>
<a href="#" class="goodshare" data-type="ok">Одноклассники <span data-counter="ok"></span></a>
<a href="#" class="goodshare" data-type="mr">Мой Мир@Mail.Ru <span data-counter="mr"></span></a>
<a href="#" class="goodshare" data-type="gp">Google Plus <span data-counter="gp"></span></a>
<a href="#" class="goodshare" data-type="li">LinkedIn <span data-counter="li"></span></a>
<a href="#" class="goodshare" data-type="tw">Twitter</a>
<a href="#" class="goodshare" data-type="lj">LiveJournal</a>
<a href="#" class="goodshare" data-type="tm">tumblr <span data-counter="tm"></span></a>
<a href="#" class="goodshare" data-type="bl">Blogger</a>
<a href="#" class="goodshare" data-type="pt">Pinterest <span data-counter="pt"></span></a>
<a href="#" class="goodshare" data-type="di">Digg</a>
<a href="#" class="goodshare" data-type="en">Evernote</a>
<a href="#" class="goodshare" data-type="rd">Reddit <span data-counter="rd"></span></a>
<a href="#" class="goodshare" data-type="de">Delicious</a>
<a href="#" class="goodshare" data-type="su">StumbleUpon <span data-counter="su"></span></a>
<a href="#" class="goodshare" data-type="po">Pocket <span data-counter="po"></span></a>
<a href="#" class="goodshare" data-type="sb">Surfingbird <span data-counter="sb"></span></a>
<a href="#" class="goodshare" data-type="bf">Buffer <span data-counter="bf"></span></a>
<a href="#" class="goodshare" data-type="ip">Instapaper</a>
<a href="#" class="goodshare" data-type="ra">Readability</a>
<a href="#" class="goodshare" data-type="xi">Xing <span data-counter="xi"></span></a>
<a href="#" class="goodshare" data-type="wp">WordPress</a>
</div>
<div>
<h2>For iOS/Android mobile devices</h2>
<a href="#" class="goodshare" data-type="tg">Telegram</span></a>
<a href="#" class="goodshare" data-type="vi">Viber</span></a>
<a href="#" class="goodshare" data-type="wa">WhatsApp</span></a>
<a href="#" class="goodshare" data-type="ln">LINE</span></a>
</div>
<p>See goodshare.js on GitHub: <a href="https://github.com/enjoyiacm/goodshare.js" target="_blank">https://github.com/enjoyiacm/goodshare.js</a></p>.
<!-- jQuery 1.11.3 minify version and latest 3.2.x goodshare.js minify version from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/g/jquery@1.11.3,jquery.goodshare.js@3.2.4"></script>
</body>
</html>
Development and maintenance of goodshare.js
project engaged in Interactive agency «Central marketing». 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 or specialized IT-portals. Thank you!