Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

shariff-customize

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

shariff-customize

Shariff enables website users to share their favorite content without compromising their privacy.

1.7.5
latest
Source
npm

Version published: 6 years ago

Weekly downloads: 1; decreased by-83.33%

Maintainers: 1

Weekly downloads

Created: 10 years ago

Source

Shariff enables website users to share their favorite content without compromising their privacy. Demo

Facebook, Google+ and Twitter 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, tweets and plus-ones. 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
Include CSS in <head>:
- build/shariff.complete.css contains all dependencies
- use build/shariff.min.css, if Font Awesome is already included in your site
Include JavaScript right before </body>:
- build/shariff.complete.js contains all dependencies
- use build/shariff.min.js, if jQuery is already included in your site
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
$ grunt demo

Make sure you have installed the Grunt CLI. Run grunt demo to start a local web server which displays several button configurations. The demo page uses shariff-backend-node to request and display share counts.

Options (data attributes)

Attribute	Description	Default
`data-backend-url`	The path to your Shariff backend, see below. Settings the value to `null` disables the backend feature. No counts will occur.	`null`
`data-lang`	The localisation to use. Available: `de`, `en`, `es`	`de`
`data-orientation`	`vertical` will stack the buttons vertically.	`horizontal`
`data-referrer-track`	A string that will be appended to the share url. Can be disabled using `null`.	`null`
`data-services`	An entity-encoded JSON string containing an array of service names to be enabled. Example: `data-services="["facebook","googleplus"]"` Available service names: `twitter`, `facebook`, `googleplus`, `mail`, `info`	(all enabled)
`data-theme`	We include two color schemes, `standard` or `grey`.	`standard`
`data-twitter-via`	Screen name of the user to attribute the Tweet to	`null`
`data-url`	The canonical URL of the page to check.	page's canonical URL or `og:url` or current URL

data-theme custom = customize html container yourself (see demo/custom-links.html).

Backends

In order to display share counts with Shariff, you need one of the following backends:

Third-party backends:

shariff-backend-java

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.

Keywords

FAQs

What is shariff-customize?

Is shariff-customize popular?

Is shariff-customize well maintained?

Package last updated on 20 Nov 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install