├── LICENSE
├── README.md
├── example.html
├── sharing_buttons.css
├── sharing_buttons.js
└── sharing_buttons_white.css
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 QuadrupleA
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # private-secure-sharing-buttons
2 |
3 | Privacy-respecting, simple social sharing buttons in vanilla JavaScript.
4 |
5 | ## Introduction
6 |
7 | Most social-sharing-button services like [AddThis](https://addthis.com/) and [Shareaholic](https://shareaholic.com/) have little respect for your users' privacy, installing dozens of tracking cookies that follow your users around the web, and degrading the performance of your pages by making surreptitious requests in the background. Because of this, most adblockers now block them, making it hard for people to share your stuff at all.
8 |
9 | Most of the alternatives I found, like [Social Share Privacy](https://github.com/panzi/SocialSharePrivacy) which Bruce Schneier [uses on his blog](https://www.schneier.com/blog/archives/2013/03/changes_to_the.html), seemed a bit overengineered / overcomplicated, requiring node.js, build scripts, asset folders, several dependent libraries, code and settings split across multiple files, etc.
10 |
11 | I wrote this simple one-file script for use in my own projects, and thought I'd share it here for others to use too.
12 |
13 | It's written in native JavaScript, and doesn't require jQuery, React, Angular, or any other frameworks, which should make it easy to integrate into most sites. It installs no cookies, makes no additional HTTP requests, and does not call to any assets outside of your own server. It embeds some lightweight SVG icons from [Font Awesome](https://fontawesome.com) right in the JS file, and is styled using CSS that you can easily customize. It only notifies social networks when the visitor clicks a sharing icon.
14 |
15 | ## Examples
16 |
17 | Download the files and open `example.html` in a browser to see it in action.
18 |
19 | A live demo (scroll to bottom) is at: [tomrissacher.com](https://tomrissacher.com/)
20 |
21 | Screenshots of the two included styles:
22 |
23 | 
24 |
25 | ## Usage
26 |
27 | Add `sharing_buttons.js` and the CSS styles to your page. Then, do one of the following:
28 |
29 | ### Add buttons using data attributes:
30 |
31 | For this, no additional javascript is needed. Just add an element with `data-sharing-buttons="true"` and any other desired options prefixed by `data-`:
32 |
33 | ```html
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
45 |
46 |
47 | ```
48 |
49 | ### Add buttons using javascript:
50 |
51 | For programmatic control, you can initialize buttons using `AddSharingButtons(selector, options)`:
52 |
53 | ```html
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
71 |
72 |
73 | ```
74 |
75 | ### Options:
76 |
77 | I tried to keep the code and CSS simple, rather than provide a ton of options, to encourage developers to dig in and customize it themselves to suit their needs.
78 |
79 | Options are passed via `data-` attributes or the 2nd parameter to `AddSharingButtons()`.
80 |
81 | * __services__
82 | * Space-separated list of services you want sharing buttons for.
83 | * Default: `'twitter facebook email reddit pinterest tumblr'` (all of them)
84 | * __url__
85 | * URL you want to share.
86 | * Default: `location.href`
87 | * __title__
88 | * Title used in the post (not used by all services).
89 | * Default: `document.title`
90 | * __text__
91 | * Body text used in the post (not used by all services).
92 | * Default: meta description.
93 | * __image__
94 | * Absolute URL to image used in the post (not used by all services).
95 | * Default: meta `og:image` tag.
96 | * __labelHtml__
97 | * Label markup prefixing the buttons.
98 | * Default: `