goalgorilla / shariff
Fork of npm-asset/shariff for the Open Social Drupal distribution. Not maintained for use outside of Open Social
Installs: 38
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 177
Language:JavaScript
Type:npm-asset
Replaces
- npm-asset/shariff: 3.2.2
This package is auto-updated.
Last update: 2024-10-29 06:13:14 UTC
README
We forked this repository for internal use and may abandon this at any time without any notice. We did this because we needed to make changes to the Shariff library which was no longer actively maintained.
Shariff – Give Social Media Buttons Some Privacy
Shariff enables website users to share their favorite content without compromising their privacy. Demo
Some social service providers like e.g. Facebook supply official sharing code snippets which quietly siphon personal data from all page visitors. Shariff enables visitors to see how popular your page is on Facebook and share your content with others without needless data leaks.
Shariff (/ˈʃɛɹɪf/)
is an open-source, low-maintenance, high-privacy solution maintained by German computer magazine c't and heise online.
Shariff consists of two parts: a simple JavaScript client library and an optional server-side component. The latter fetches the number of likes or shares. Share buttons and share counts work without a connection between your visitors' browsers and social networks (unless they decide to share, of course).
Getting Started
- Download the latest release
- Upload all files included in the release
- Include CSS in
<head>
:shariff.complete.css
uses the dependencies included in the release files- if Font Awesome is already included in your site, use
build/shariff.min.css
- Include JavaScript right before
</body>
:shariff.complete.js
uses the dependencies included in the release files- if jQuery is already included in your site, use
build/shariff.min.js
- Insert one or more
<div class="shariff">
elements. - Customize the look using data-* attributes.
To enable the counters in the buttons, see section Backends.
Usage example:
<!DOCTYPE html> <html> <head> <link href="/path/to/shariff.min.css" rel="stylesheet"> </head> <body> <h1>My article</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <h2>Minimum buttons:</h2> <div class="shariff"></div> <h2>More advanced buttons:</h2> <div class="shariff" data-backend-url="/path/to/backend" data-url="http://www.example.com/my-article.html" data-theme="grey" data-orientation="vertical"></div> <!-- immediately before </body> --> <script src="/path/to/shariff.min.js"></script> </body> </html>
Getting Started using npm
You can also use Shariff's node package by installing it via npm
:
$ cd my-project
$ npm install shariff --save
Edit your JS main script, include Shariff and initialize it in one or more containers:
// my-app.js var Shariff = require('shariff'); var $ = require('jquery'); var buttonsContainer = $('.some-selector'); new Shariff(buttonsContainer, { orientation: 'vertical' });
Running demo site
After downloading Shariff, install its dependencies by running npm install
.
$ git clone https://github.com/heiseonline/shariff.git
$ cd shariff
$ npm install
$ npm run dev
Options (data attributes)
Constructor arguments
All data attributes above are also available as constructor arguments in JavaScript. However, the
leading data-
is omitted and the name is in camelCase instead of kebab-case:
var buttonsContainer = $('.some-selector'); new Shariff(buttonsContainer, { backendUrl: '/my/backend/url', orientation: 'vertical', mailUrl: 'mailto:me@example.com', });
Supported browsers
Shariff supports the following Browsers:
- Firefox
- Google Chrome
- Internet Explorer/Edge
- Safari
The current and previous major releases of Firefox, Google Chrome, Internet Explorer/Edge and Safari are supported on a rolling basis.
Supported services
Shariff supports the following social sharing services:
- AddThis
- buffer
- diaspora*
- Flattr
- Qzone
- StumbleUpon
- Telegram
- Tencent Weibo
- Threema
- Tumblr
- VK
In addition, the service Info
provides a button to show an info page about the social sharing buttons.
The URL of this page can be set with an option. Default value: http://ct.de/-2467514
, i.e. the c't article introducing Shariff.
Backends
In order to display share counts with Shariff, you need the following backend:
Third-party backends:
Once you have one of these backends up and running, insert its URL into the data-backend-url
attribute. For example, if the backend runs under http://example.com/my-shariff-backend/
, the data-backend-url
should be /my-shariff-backend/
. The script will handle the rest.
Third-party integrations
This is a list of integrations for third-party systems:
- Contao integration
- Drupal module
- Joomla! 3 Shariff Plugin
- Kirby-CMS Shariff-Plugin
- MediaWiki Extension
- Open Monograph Press Plugin
- Pagekit Extension
- Serendipity
- SilverStripe Module
- Symfony ShariffBundle
- TYPO3 Plugin rx_shariff
- Wordpress Plugin shariff-sharing
- WordPress Plugin Shariff Wrapper
- Xenforo [ITM] ctSSB for Xenforo 1.5
- Xenforo [WMTech] Social Share Privacy Plugin
- Magento 2 Shariff Social Share