Ridiculously Responsive Social Sharing Buttons
SVGアイコンを使用したレスポンシブなソーシャル共有・フォローボタンを提供し、Nodeに追加したりBlockとして配置できます。
rrssb
インストール
composer require 'drupal/rrssb:8.x-2.7'
composer require 'drupal/rrssb:8.x-2.5'
composer require 'drupal/rrssb:8.x-2.4'
概要
Ridiculously Responsive Social Sharing Buttons（RRSSB）モジュールは、RRSSB+ライブラリをDrupalに統合し、SVGベースのアイコンを使用した美しいレスポンシブなソーシャル共有ボタンを提供します。このモジュールはサードパーティスクリプトを必要としないため、ダウンロードサイズが小さく、ブラウザ互換性に優れています。
Shareボタン（訪問者にコンテンツをソーシャルネットワークで共有することを促す）またはFollowボタン（訪問者をあなたのソーシャルメディアプロフィールに誘導する）のいずれかを選択できます。複数のボタンセットを異なるボタンの組み合わせで設定でき、サイトの異なる部分に異なる設定を適用できます。
ボタンは、特定のNodeタイプの追加フィールドとして表示するか、テーマのレイアウトの任意の場所に配置できるBlockを介して表示できます。また、ViewsでボタンをViewsフィールドハンドラーとして表示することもできます。
このモジュールは、Facebook、Twitter/X、LinkedIn、Pinterest、Instagram、YouTube、GitHub、Reddit、WhatsApp、メールなど、19種類のソーシャルネットワークとアクションをサポートしています。各ボタンは、現在のページのURL、タイトル、画像のTokenを使用して適切な共有/フォローURLを自動生成します。
Features
- あらゆる画面サイズに適応する魅力的なSVGベースのアイコンを使用したレスポンシブなソーシャル共有ボタン
- Shareボタン（ソーシャルネットワークにコンテンツを共有）とFollowボタン（ソーシャルプロフィールへのリンク）の両方をサポート
- 異なるコンテキストに異なるボタンの組み合わせを設定できる複数のボタンセット設定
- 19種類の組み込みソーシャルネットワーク連携：Facebook、Twitter、X、LinkedIn、Pinterest、Instagram、YouTube、GitHub、Reddit、Tumblr、WhatsApp、メール、VK、Pocket、Hacker News、Delicious、印刷、電話、Join（ユーザー登録）
- 追加フィールドによるNodeタイプ連携 - 特定のコンテンツタイプにボタンを追加
- ページレイアウトの任意の場所に柔軟に配置できるBlock配置
- ViewsでボタンをViewsフィールドハンドラーとして表示するViews連携
- カスタマイズ可能な外観設定：サイズ、最小サイズ（縮小）、追加行サイズ（再拡大）、最小/最大行数、プレフィックステキスト、ボタンの配置
- 設定可能な画像Token フォールバックを持つTokenベースのURL生成
- 共有ダイアログの自動ポップアップ処理
- 有効なボタンのみのCSS自動生成によるページ読み込みの最適化
- フックによる拡張 - カスタムボタンの追加や既存ボタンの変更が可能
- 外観設定をリアルタイムでテストできるデモBlock
- ボタンCSSを再生成するDrushコマンド
- サードパーティスクリプト不要 - すべての機能が自己完結
Use Cases
ブログ記事に共有ボタンを追加
Facebook、Twitter/X、LinkedIn、メールボタンを含むShareボタンセットを設定します。管理画面 > サイト構築 > コンテンツタイプ > 記事に移動し、RRSSBタブでボタンセットを選択して保存します。その後、管理画面 > サイト構築 > コンテンツタイプ > 記事 > 表示管理でRRSSB疑似フィールドをボタンを表示したい位置に配置します。
フッター用のソーシャルフォローBlockを作成
管理画面 > 環境設定 > コンテンツ > RRSSB > 追加で新しいFollowボタンセットを作成します。ボタンタイプとしてFollowを選択し、ソーシャルネットワーク（Facebook、Instagram、YouTubeなど）のボタンを有効にして、それぞれのユーザー名を入力します。「フォローする」などのプレフィックステキストを追加します。その後、管理画面 > サイト構築 > BlockレイアウトでフッターリージョンにrRSSB Blockを配置します。
Viewsで共有ボタンを表示
Nodeを表示するViewを作成または編集します。新しいフィールドを追加し、リストから「RRSSB Buttons」を選択します。表示するボタンセットを設定します。共有ボタンは各NodeのURLとタイトルを共有リンクに自動的に使用します。
縦並びボタンレイアウトでカスタムスタイリング
ボタンセットの外観設定を編集します。「最小行数」を大きな値（例：10）に設定してボタンを縦に並べます。「サイズ」と「最小サイズ」を調整してボタンの寸法を制御します。レイアウトに必要な場合は「ボタンを右揃え」を有効にします。
カスタムソーシャルネットワークボタンを追加
カスタムモジュールでhook_rrssb_buttons()を実装して新しいボタンを定義します。適切なTokenを含むshare_urlやfollow_url、背景色、SVG文字列またはSVGファイルへのパスを提供します。ボタンはボタンセット設定フォームに自動的に表示されます。
ボタンの外観をリアルタイムでテスト
ページにRRSSB Demo Blockを配置します。このBlockは外観設定フォームを表示し、サイズ、縮小、再拡大、行設定を調整しながら保存せずに即座に変更を確認できます。好みの設定が見つかったら、実際のボタンセット設定に適用します。
Tips
- 異なるコンテキストに複数のボタンセットを使用 - サイドバー用のコンパクトセットと記事フッター用のフルセット
- Followボタンの場合、有効にした各ソーシャルネットワークのユーザー名/ハンドルを入力することを忘れずに
- 「Print」ボタンはJavaScriptを使用してブラウザの印刷ダイアログを起動 - 記事に便利
- 「Join」ボタンは/user/registerにリンク - サイトへの会員登録を促進するのに便利
- 「最小行数」を大きな値に設定すると縦並びボタンレイアウトになる
- 開発中はデモBlockを使用して外観設定を試してから確定
- モジュールはExternal Linkモジュールのアイコン追加からRRSSBリンクを自動的に除外
- ボタンCSSは自動生成されキャッシュされる - ボタン設定の変更時にCSSは自動再生成
- Pinterest共有の場合、コンテンツに画像があることを確認し、image_tokens設定を適切に設定
Technical Details
Admin Pages 4
/admin/config/content/rrssb
設定されたすべてのボタンセットとそのタイプ（ShareまたはFollow）を一覧表示します。ここから新しいボタンセットの追加、既存のボタンセットの編集、削除ができます。各行にはボタンセットのラベルとタイプが表示されます。
/admin/config/content/rrssb/add
ソーシャルボタンのカスタム選択と外観設定で新しいボタンセットを作成します。
/admin/config/content/rrssb/{rrssb_button_set}
既存のボタンセット設定を変更します。追加フォームと同じフィールドですが、既存の値が事前入力されています。
/admin/config/content/rrssb/{rrssb_button_set}/delete
ボタンセットを削除するための確認フォーム。この操作は元に戻せないという警告が表示されます。
権限 1
Hooks 2
hook_rrssb_buttons
ソーシャル共有ボタンの設定を提供します。モジュールが共有/フォローURL、色、SVGアイコンを持つ新しいソーシャルネットワークボタンを定義できるようにします。
hook_rrssb_buttons_alter
他のモジュールが提供するソーシャル共有ボタンの設定を変更します。URL、色の変更、ボタンの追加/削除に便利です。
Drush Commands 1
drush rrssb:gen-css
RRSSB+ライブラリ内のrrssb.buttons.cssファイルを再生成します。Drupal外でのスタンドアロンライブラリ使用や、利用可能なすべてのボタンスタイルでライブラリCSSを再生成する必要がある場合に便利です。
Troubleshooting 5
以下を確認してください：1）/admin/config/content/rrssbでボタンセットを作成した、2）Nodeタイプ設定でボタンセットを選択した、3）そのコンテンツタイプの表示管理設定でRRSSB疑似フィールドを有効にした、4）すべてのキャッシュをクリアした。
RRSSB+ライブラリがインストールされていません。Composerを使用している場合は、「composer require drupal/rrssb」を実行するとライブラリが自動的にインストールされます。そうでない場合は、https://github.com/AdamPS/rrssb-plus から手動でダウンロードしてlibraries/rrssb-plusに展開してください。
モジュールはCSSを動的に生成します。すべてのキャッシュをクリアしてCSSファイルを再生成してください。問題が解決しない場合は、ライブラリのiconsディレクトリがlibraries/rrssb-plus/iconsに存在し、.min.svgファイルがあることを確認してください。
ユーザー名フィールドは、ボタンタイプとして「Follow」が選択されている場合にのみ表示されます。一部のボタン（共有用のメールなど）はユーザー名を必要としないため、Followモードでもフィールドは表示されません。
ボタンセットの「画像を検索するためのToken」フィールドを設定します。デフォルトでは[node:field_image:entity:url]を試し、次にサイトロゴにフォールバックします。コンテンツタイプの画像フィールドに合わせてカスタマイズしてください。
Security Notes 3
- 「administer rrssb」権限は外部URLの設定が可能なため、制限付きアクセスとしてマークされています
- Followボタンに入力されたユーザー名はXSS攻撃を防ぐためにレンダリング前にHTMLエスケープされます
- 共有URLは安全なURL構築を確保するためにToken値にrawurlencode()を使用します