Shariff Social Media Buttons
heise online の Shariff ライブラリを使用して、プライバシーに配慮したソーシャルメディア共有ボタンを提供します。
shariff
インストール
composer require 'drupal/shariff:^2.0'
概要
Shariff モジュールは、heise online が開発したプライバシーに配慮した Shariff 共有ボタンライブラリを Drupal に統合します。サードパーティのスクリプトを読み込んでユーザーを追跡する従来のソーシャル共有ボタンとは異なり、Shariff を使用するとウェブサイト訪問者はプライバシーを損なうことなくソーシャルネットワークでコンテンツを共有できます。
このモジュールは、共有ボタンを表示する2つの主要な方法を提供します。任意のリージョンに配置できる設定可能な Block、または Node コンテンツタイプの擬似フィールドとして表示できます。Twitter、Facebook、LinkedIn、WhatsApp、Telegram、Pinterest など、24のソーシャルネットワークとサービスをサポートしています。
Shariff は、複数のカラーテーマ（カラー、グレー、ホワイト）、異なるボタンスタイル（テキスト付き標準、アイコンのみ、カウント付きアイコン）、縦または横の向き、さまざまな CSS バリアントなど、豊富なカスタマイズオプションを提供します。オプションのバックエンドサーバーコンポーネントを設定することで、ユーザーのプライバシーを損なうことなく共有カウントを表示できます。
このモジュールは、最新の Web Share API もサポートしており、ブラウザのネイティブ共有機能が利用可能な場合に Shariff ボタンを自動的に非表示にできます。
Features
- サードパーティのスクリプトを読み込んでユーザーを追跡しない、プライバシーに配慮したソーシャル共有ボタン
- 24のソーシャルネットワークをサポート：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、Buffer
- 任意のテーマリージョンに設定可能な Block として共有ボタンを表示
- Manage Display を通じて Node コンテンツタイプの擬似フィールドとして共有ボタンを表示
- 3つのカラーテーマ：カラー（ブランドカラー）、グレー、ホワイト
- 3つのボタンスタイル：標準（アイコン + テキスト + カウント）、アイコンのみ、アイコン + カウント
- 水平または垂直のボタン配置
- 3つの CSS バリアント：Complete（Font Awesome 含む）、Minimal（すでに Font Awesome を使用しているサイト向け）、None（カスタムスタイリング）
- ユーザー追跡なしで共有カウントを表示するためのオプションのバックエンド URL 統合
- 個々の Block インスタンスをカスタマイズするための Block ごとの設定オーバーライド
- ブラウザのネイティブ共有が利用可能な場合に Shariff を非表示にする Web Share API サポート
- 22言語をサポートする自動言語検出
- カスタマイズ可能な件名と本文でのメール共有
- Twitter via 属性（ツイートに @username メンションを追加）
- Pinterest メディア URL 指定
- 分析用のリファラートラッキングコードサポート
- ユーザーとカテゴリ設定による Flattr 統合
- Shariff 情報ページを表示するための Info ボタン
Use Cases
GDPR 準拠のソーシャル共有
GDPR やその他のプライバシー規制に準拠する必要があるウェブサイトに対して、Shariff はサードパーティの追跡スクリプトを読み込まないソーシャル共有ボタンを提供します。サイト全体で訪問者を追跡する標準的な Facebook や Twitter ボタンとは異なり、Shariff ボタンはユーザーが積極的に共有をクリックしたときにのみリクエストを行います。
ブログ記事の共有
読者がお気に入りのソーシャルネットワークでコンテンツを共有することを促すために、記事ページに Shariff Block または擬似フィールドを追加します。オーディエンスに関連するサービスを設定し（例：プロフェッショナルなコンテンツには LinkedIn、ビジュアルコンテンツには Pinterest）、認識しやすいブランドボタンのためにカラーテーマを使用します。
サイドバーソーシャル共有ウィジェット
垂直方向の Shariff Block をサイドバーリージョンに配置して、ユーザーがスクロールしても追従する永続的な共有ウィジェットを作成します（CSS でスティッキーポジショニングと組み合わせた場合）。スペースを節約するためにアイコンのみのボタンスタイルを使用します。
追跡なしの共有カウント
Shariff バックエンドサーバーをセットアップしてバックエンド URL を設定し、ボタンに共有カウントを表示します。これにより、訪問者のプライバシーを損なうサードパーティの追跡スクリプトを埋め込むことなく、ソーシャルプルーフ（コンテンツが何回共有されたか）を表示できます。
モバイル最適化共有
「Web Share API がサポートされている場合は Block を非表示」オプションを有効にして、ネイティブ共有をサポートするモバイルデバイスやブラウザで Shariff ボタンを自動的に非表示にします。サポートされているブラウザのユーザーは、代わりにデバイスの組み込み共有シートを使用できます。
複数の共有設定
異なるページタイプに対して異なるサービス選択を持つ複数の Shariff Block を作成します。例えば、プロフェッショナルなコンテンツには Twitter と LinkedIn を持つ Block、ライフスタイルコンテンツには Pinterest と Facebook を持つ別の Block。各 Block はデフォルト設定をオーバーライドできます。
Tips
- 設定のドラッグ可能なテーブルを使用して、最初に表示するサービスを簡単に並べ替えます - 最も人気のあるネットワークを先頭に配置してください
- テーマにすでに Font Awesome が含まれている場合は、重複するアイコンフォントの読み込みを避けるために 'Minimal' CSS オプションを選択してください
- ネイティブ共有がより良いエクスペリエンスを提供するモバイルフレンドリーなサイトでは、Web Share API 非表示を有効にしてください
- ユーザーがコンテンツを共有したときに @メンションされるように Twitter Via ユーザーを設定し、エンゲージメントの追跡に役立ちます
- 分析でソーシャルトラフィックを追跡するために、リファラートラッキングコード（UTM パラメータなど）を使用してください
- 擬似フィールドは Node ページでは Block よりも設定が簡単ですが、Block はより柔軟な配置が可能です
- キャッシュタグは適切に設定されています - 設定が変更されると Block は自動的にクリアされます
- プライバシーを重視するサイトにとって、Shariff はユーザーが積極的に共有をクリックするまで訪問者を追跡しないため、優れた選択肢です
Technical Details
Admin Pages 1
/admin/config/services/shariff
有効なサービス、外観、統合オプションを含む Shariff ソーシャルメディア共有ボタンのデフォルト設定を構成します。
Hooks 4
hook_entity_extra_field_info
すべての Node コンテンツタイプに 'Shariff 共有ボタン' 擬似フィールドを定義し、Manage Display を通じてボタンを表示できるようにします。
hook_node_view
shariff_field 擬似フィールドが Node 表示で有効になっている場合に Shariff ボタンをレンダリングします。タイトル生成のために Metatag モジュールと統合します（利用可能な場合）。
hook_library_info_alter
異なるインストール場所（ルート libraries、build サブフォルダ、dist サブフォルダ）をサポートするために Shariff ライブラリのパスを動的に更新します。
hook_theme_suggestions_block_alter
Shariff Block のテーマ提案として 'block_shariff' を追加します。
Troubleshooting 6
Shariff ライブラリが libraries フォルダに正しくインストールされていることを確認します。/admin/reports/status のステータスレポートで 'Shariff Library' 要件を確認してください。libraries/shariff/shariff.complete.js と CSS ファイルが存在することを確認します。
'Minimal' CSS オプションを使用している場合は、テーマまたは別のモジュールによって Font Awesome が読み込まれていることを確認してください。そうでない場合は、Font Awesome アイコンを含む 'Complete' CSS バリアントに切り替えてください。
共有カウントには設定された Shariff バックエンドサーバーが必要です。設定でバックエンド URL をバックエンドインスタンスを指すように設定してください。バックエンドはサーバーとクライアントブラウザの両方からアクセス可能である必要があります。
デフォルトでは、Shariff はページの canonical URL とタイトルを使用します。Node の場合、利用可能であれば Metatag と統合します。設定で固定の URL/タイトルを設定するか、適切な canonical URL と og:url メタタグが設定されていることを確認してください。
Block ごとのカスタマイズオプションをすべて表示するには、Block 設定で「Shariff デフォルト設定を使用」のチェックを外してください。チェックされている場合、Block は /admin/config/services/shariff のグローバル設定を使用します。
Shariff 擬似フィールドは各コンテンツタイプの Manage Display で有効にする必要があります。構造 > コンテンツタイプ > [タイプ] > 表示管理 に移動し、「Shariff 共有ボタン」フィールドを表示可能なリージョンにドラッグしてください。
Security Notes 4
- Shariff はプライバシーを念頭に置いて設計されています - ボタンはユーザーが共有をクリックするまでサードパーティのスクリプトを読み込まないため、クロスサイトトラッキングを防止します
- URL 値（バックエンド、メール、メディア、情報 URL）は XSS 攻撃を防ぐために UrlHelper::stripDangerousProtocols を使用してサニタイズされます
- ユーザーが提供したすべての設定は、出力前に Html::escape を使用してエスケープされます
- モジュールは Drupal のセキュリティカバレッジを使用し、セキュアなコーディング慣行に従っています