Download
1. INCLUDE JS FILES
<script src="jquery.js"></script>
<script src="dist/jquery.socialshare.min.js"></script>
2. HTML
You can use these 2 classes to make a class clickable(open share dialogue) and show the share counts.
-
[service]-share and
-
[service]-count
where [service] = twitter/facebook/pinterest/linkedin/gPlus
Just add them wherever you want to use them
Class |
Description |
example |
[service]-share |
This is the class that becomes a link after clicking on which the sharing dialogue appears |
<div class="twitter-share"></div> |
[service]-count |
Class in which the share count appears |
<span class="twitter-count"></span> |
<div class="element">
<div class="twitter-share">
<span>Share on twitter</span>
<span class="twitter-count"></span> <!--====shows twitter share count==-->
</div>
<div class="facebook-share">
<span>Share on Facebook</span>
<span class="facebook-count"></span><!--=== shows facebook share count==-->
</div>
</div>
3. JAVASCRIPT
$('.element').socialShare({
image : 'image-url',
twitterVia : 'ritz078',
twitterHashTags : 'javascript,jquery'
})
4. OPTIONS
property |
default value |
Description |
url |
current page url |
The url that will be shared |
description |
current page meta tag description |
Can be set to be shared as description on twitter |
title |
current page title |
Title that will be shared |
twitter |
true |
set to false to disable |
pinterest |
true |
set to false to disable |
facebook |
true |
set to false to disable |
linkedin |
true |
set to false to disable |
gPlus |
true |
set to false to disable |
image |
null |
url of the image that will be shared with the links |
toWord |
true |
to convert count numbers into words eg: 12000 to 12K |
twitterVia |
null |
string containing the via value for twitter sharing eg: 'ritz078'.Mandatory if twitter is set to true |
twitterHashTags |
null |
comma separated values to be shared as hashtags in a single string.Mandatory if twitter is set to true. |