This time I will share jQuery Plugin and tutorial about Minimal jQuery Social Share Button Plugin For jQuery – Sharetastic, hope it will help you in programming stack.
| File Size: | 51.3 KB |
|---|---|
| Views Total: | 9048 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Sharetastic is a simple and lightweight jQuery plugin that displays custom social share buttons with SVG based social icons to share your content on Facebook, Twitter, Linkedin, WhatsApp, Pinterest, Instagram, Flickr, Print, and Email.
Features:
- Dead simple to use.
- 3 built-in themes.
- Fully customizable via Sass variables.
How to use it:
1. Download and include the jQuery Sharetastic plugin’s files after you have jQuery library included.
1 |
<link rel="stylesheet" href="sharetastic.css"> |
2 |
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> |
3 |
<script src="sharetastic.js"></script> |
2. Create a div container in which you want to place the social share buttons.
1 |
<div class="sharetastic"></div> |
3. Initialize the plugin and done.
1 |
$('.sharetastic').sharetastic(); |
4. Change the default theme by add the following CSS classes to the div container.
1 |
<div class="sharetastic sharetastic--simple"></div> |
2 |
<div class="sharetastic sharetastic--reversed" style="background-color: #000;"></div> |
5. Enable / disable social networks you prefer.
1 |
$('.sharetastic').sharetastic({ |
2 |
feed: { |
3 |
facebook: true, |
4 |
<a href="https://www.jqueryscript.net/tags.php?/twitter/">twitter</a>: true, |
5 |
linkedin: true, |
6 |
email: true |
7 |
} |
8 |
}); |
6. Customize the content you want to share.
01 |
$('.sharetastic').sharetastic({ |
02 |
customFeeds: { |
03 |
myCustomFeed: { |
04 |
class: 'sharetastic__button sharetastic__button--myCustomFeed', |
05 |
href: 'http://myCustomFeed.com', |
06 |
target: '_blank', |
07 |
icon: '<svg width="10" height="19" class="sharetastic__icon"><use xlink_href="#myCustomFeed"/></svg>' |
08 |
} |
09 |
}, |
10 |
}); |
7. Add a custom label to the sharetastic.
1 |
<div class="sharetastic"> |
2 |
<span class="sharetastic__label">Share this:</span> |
3 |
</div> |
8. Full config options.
01 |
<a href="https://www.jqueryscript.net/tags.php?/popup/">popup</a>: true, |
02 |
services: { |
03 |
facebook: { |
04 |
order: 0, |
05 |
name: 'Facebook', |
06 |
href: 'https://www.facebook.com/sharer/sharer.php?' + this.generateUrl('u=') + this.generateTitle('&title=') + this.generateDescription('&description='), |
07 |
icon: { |
08 |
width: 32, |
09 |
height: 32, |
10 |
id: 'sharetastic-facebook' |
11 |
} |
12 |
}, |
13 |
instagram: false, |
14 |
twitter: { |
15 |
order: 2, |
16 |
name: 'Twitter', |
17 |
href: 'http://twitter.com/home?status=' + this.generateTitle() + this.generateUrl(' - '), |
18 |
icon: { |
19 |
width: 32, |
20 |
height: 32, |
21 |
id: 'sharetastic-twitter' |
22 |
} |
23 |
}, |
24 |
pinterest: { |
25 |
order: 3, |
26 |
name: 'Pinterest', |
27 |
href: 'http://pinterest.com/pin/create/link/?' + this.generateUrl('url=') + this.generateTitle('&description=') + this.generateImage('&media='), |
28 |
icon: { |
29 |
width: 32, |
30 |
height: 32, |
31 |
id: 'sharetastic-pinterest' |
32 |
} |
33 |
}, |
34 |
linkedin: { |
35 |
order: 4, |
36 |
name: 'LinkedIn', |
37 |
href: 'https://www.linkedin.com/shareArticle?mini=true' + this.generateUrl('&url=') + this.generateTitle('&title=') + this.generateDescription('&summary='), |
38 |
icon: { |
39 |
width: 32, |
40 |
height: 32, |
41 |
id: 'sharetastic-linkedin' |
42 |
} |
43 |
}, |
44 |
googleplus: { |
45 |
order: 5, |
46 |
name: 'Google +', |
47 |
href: 'https://plus.google.com/share?' + this.generateUrl('url='), |
48 |
icon: { |
49 |
width: 32, |
50 |
height: 32, |
51 |
id: 'sharetastic-googleplus' |
52 |
} |
53 |
}, |
54 |
flickr: false, |
55 |
tumblr: { |
56 |
order: 7, |
57 |
name: 'Tumblr', |
