Shariff Social Media Buttons
Provides privacy-friendly social media sharing buttons using the Shariff library by heise online.
shariff
Install
composer require 'drupal/shariff:^2.0'
Overview
The Shariff module integrates the privacy-friendly Shariff sharing buttons library by heise online into Drupal. Unlike traditional social sharing buttons that track users by loading third-party scripts, Shariff enables website visitors to share content on social networks without compromising their privacy.
The module provides two primary methods to display sharing buttons: as a configurable block that can be placed in any region, or as a pseudo-field on node content types. It supports 24 social networks and services including Twitter, Facebook, LinkedIn, WhatsApp, Telegram, Pinterest, and more.
Shariff offers extensive customization options including multiple color themes (colored, grey, white), different button styles (standard with text, icon-only, icon with count), vertical or horizontal orientation, and various CSS variants. An optional backend server component can be configured to display share counts without compromising user privacy.
The module also supports the modern Web Share API, allowing sites to automatically hide Shariff buttons when the browser's native sharing functionality is available.
Features
- Privacy-friendly social sharing buttons that don't track users by loading third-party scripts
- Support for 24 social networks: Twitter, Facebook, LinkedIn, Pinterest, VK, Xing, WhatsApp, AddThis, Telegram, Tumblr, Flattr, Diaspora, Reddit, StumbleUpon, Weibo, Flipboard, Pocket, Print, Tencent-Weibo, Qzone, Threema, E-Mail, Info Button, and Buffer
- Display sharing buttons as a configurable block in any theme region
- Display sharing buttons as a pseudo-field on node content types via Manage Display
- Three color themes: Colored (brand colors), Grey, and White
- Three button styles: Standard (icon + text + count), Icon-only, and Icon + Count
- Horizontal or vertical button orientation
- Three CSS variants: Complete (includes Font Awesome), Minimal (for sites already using Font Awesome), and None (custom styling)
- Optional backend URL integration for displaying share counts without user tracking
- Per-block settings override to customize individual block instances
- Web Share API support to hide Shariff when browser native sharing is available
- Automatic language detection with support for 22 languages
- Email sharing with customizable subject and body
- Twitter via attribution (@username mention in tweets)
- Pinterest media URL specification
- Referrer tracking code support for analytics
- Flattr integration with user and category settings
- Info button for displaying Shariff information page
Use Cases
GDPR-Compliant Social Sharing
For websites that need to comply with GDPR or other privacy regulations, Shariff provides social sharing buttons that don't load third-party tracking scripts. Unlike standard Facebook or Twitter buttons that track visitors across sites, Shariff buttons only make requests when users actively click to share.
Blog Post Sharing
Add the Shariff block or pseudo-field to article pages to encourage readers to share content on their preferred social networks. Configure services relevant to your audience (e.g., LinkedIn for professional content, Pinterest for visual content) and use the colored theme for recognizable brand buttons.
Sidebar Social Sharing Widget
Place a Shariff block in the sidebar region with vertical orientation to create a persistent sharing widget that follows users as they scroll (when combined with sticky positioning in CSS). Use icon-only button style to save space.
Share Counts Without Tracking
Set up a Shariff backend server and configure the Backend URL to display share counts on buttons. This shows social proof (how many times content was shared) without embedding third-party tracking scripts that compromise visitor privacy.
Mobile-Optimized Sharing
Enable the 'Hide block if Web Share API is supported' option to automatically hide Shariff buttons on mobile devices and browsers that support native sharing. Users on supported browsers can use their device's built-in share sheet instead.
Multiple Sharing Configurations
Create multiple Shariff blocks with different service selections for different page types. For example, a block with Twitter and LinkedIn for professional content, and another with Pinterest and Facebook for lifestyle content. Each block can override the default settings.
Tips
- Use the draggable table in settings to easily reorder which services appear first - place your most popular networks at the beginning
- If your theme already includes Font Awesome, select the 'Minimal' CSS option to avoid loading duplicate icon fonts
- Enable Web Share API hiding for mobile-friendly sites where native sharing provides a better experience
- Set a Twitter Via User to get @mentioned when users share your content, helping track engagement
- Use referrer tracking codes (like UTM parameters) to track social traffic in analytics
- The pseudo-field is simpler to set up than blocks for node pages, but blocks offer more placement flexibility
- Cache tags are properly configured - the block will automatically clear when settings change
- For privacy-conscious sites, Shariff is an excellent choice as buttons don't track visitors until they actively click to share
Technical Details
Admin Pages 1
/admin/config/services/shariff
Configure the default settings for Shariff social media sharing buttons including enabled services, appearance, and integration options.
Hooks 4
hook_entity_extra_field_info
Defines the 'Shariff sharing buttons' pseudo-field for all node content types, allowing buttons to be displayed via Manage Display.
hook_node_view
Renders the Shariff buttons when the shariff_field pseudo-field is enabled in the node display. Integrates with Metatag module if available for title generation.
hook_library_info_alter
Dynamically updates Shariff library paths to support different installation locations (root libraries, build subfolder, dist subfolder).
hook_theme_suggestions_block_alter
Adds 'block_shariff' as a theme suggestion for the Shariff block.
Troubleshooting 6
Verify the Shariff library is correctly installed in the libraries folder. Check Status Report at /admin/reports/status for the 'Shariff Library' requirement. Ensure files exist at libraries/shariff/shariff.complete.js and the CSS files.
If using the 'Minimal' CSS option, ensure Font Awesome is loaded by your theme or another module. Otherwise, switch to the 'Complete' CSS variant which includes Font Awesome icons.
Share counts require a configured Shariff backend server. Set the Backend URL in settings to point to your backend instance. The backend must be accessible from both the server and client browsers.
By default, Shariff uses the page's canonical URL and title. For nodes, it integrates with Metatag if available. You can set fixed URLs/titles in the settings, or ensure proper canonical URL and og:url meta tags are configured.
Uncheck 'Use Shariff default settings' in the block configuration to reveal all per-block customization options. When checked, the block uses global settings from /admin/config/services/shariff.
The Shariff pseudo-field must be enabled via Manage Display for each content type. Go to Structure > Content types > [Type] > Manage display and drag the 'Shariff sharing buttons' field to a visible region.
Security Notes 4
- Shariff is designed with privacy in mind - buttons don't load third-party scripts until users click to share, preventing cross-site tracking
- URL values (backend, mail, media, info URLs) are sanitized using UrlHelper::stripDangerousProtocols to prevent XSS attacks
- All user-provided settings are escaped using Html::escape before output
- The module uses Drupal's security coverage and follows secure coding practices