AddToAny Share Buttons

AddToAnyプラットフォームとの連携により、Facebook、Mastodon、Pinterest、WhatsAppなど100以上のサービスに対応したソーシャルメディア共有ボタンとフォローボタンを提供します。

addtoany
45,658 sites
97
drupal.org
gui integration theme
social media share buttons social sharing facebook mastodon pinterest whatsapp email sharing follow buttons social icons AddToAny content sharing viral marketing
Drupal 8 Drupal 9 Drupal 10 Drupal 11

インストール

Drupal 11, 10, 9 v2.0.7
composer require 'drupal/addtoany:^2.0'
Drupal 8 v8.x-1.22
composer require 'drupal/addtoany:8.x-1.22'

概要

AddToAny Share Buttonsは、AddToAnyユニバーサル共有プラットフォームをDrupalと統合し、訪問者が包括的なソーシャルメディアサービス群を通じてコンテンツを共有できるようにします。このモジュールは、Retinaスクリーンを含むすべてのディスプレイで美しく表示されるスケーラブルベクター（SVG）アイコンを提供します。

このモジュールはDrupalのEntityディスプレイシステムとシームレスに統合され、管理画面のManage Displayインターフェースを通じて、任意のコンテンツEntity（Node、Media、Commentなど）に共有ボタンを配置できます。また、共有機能とフォロー機能の両方に対応した専用Blockと、Views一覧での共有ボタン表示のためのViewsフィールド統合も提供します。

AddToAnyの機能には以下が含まれます：ユニバーサル共有メニュー、ネイティブ共有メニュー、共有カウンター、カスタムカラーボタン、カスタムアイコン、Google Analytics統合、アナリティクスソフトウェア用のイベントトラッキング、BitlyやカスタムURL短縮サービスを使用したリンクトラッキング、UTMパラメータ、50以上の言語での自動ローカライゼーション。モジュールは最適なパフォーマンスのために非同期で読み込まれ、登録やアカウント管理は不要です。

Features

  • Facebook、Mastodon、Pinterest、WhatsApp、Reddit、LinkedIn、メール、SMSなど100以上のソーシャルメディアサービスをサポートするユニバーサル共有ボタン
  • 数学的に正確で、任意のサイズに拡大縮小可能、高PPI/Retinaディスプレイに最適化されたスケーラブルベクターグラフィックス（SVG）アイコン
  • Manage Display設定を通じて、Node、Media、Comment、およびあらゆるコンテンツEntityに共有ボタンを配置できるEntityディスプレイ統合
  • 2種類のBlockタイプ：Share Buttons Block（現在のページ/コンテンツの共有用）とFollow Buttons Block（ソーシャルプロフィールへのリンク用）
  • Viewsベースのコンテンツ一覧で共有ボタンを表示するためのViewsフィールド統合
  • 特定のソーシャルサービスの選択と並び順を指定できるHTMLコードによるカスタマイズ可能なサービスボタン
  • 8から999ピクセルまで設定可能なアイコンサイズ
  • ユニバーサルボタンのカスタマイズオプション：デフォルトSVGアイコン、カスタム画像URL、または非表示
  • 高度なAddToAny設定用のカスタムJavaScriptおよびCSSサポート
  • 追加HTML/JavaScriptでの動的コンテンツ用Token統合
  • 最適なページパフォーマンスのための非同期読み込み
  • 50以上の言語での自動ローカライゼーション
  • イベントトラッキング機能を備えたGoogle Analytics統合
  • 高度なレイアウト管理のためのDisplay Suite互換性

Use Cases

基本的なコンテンツ共有

Entity設定で「Node」にチェックを入れ、サイト構築 > コンテンツタイプ > Article > 表示管理 にアクセスして、ブログ投稿や記事で共有ボタンを有効にします。「AddToAny」コンポーネントをレイアウト内の希望の位置にドラッグします。デフォルト設定にはFacebook、Mastodon、Emailボタンが含まれています。

カスタムサービス選択

サービスボタンHTMLコードを編集して、表示するソーシャルサービスをカスタマイズします。AddToAnyクラス命名規則を使用して、優先順位順にボタンを追加します：<a class="a2a_button_facebook"></a>、<a class="a2a_button_twitter"></a>、<a class="a2a_button_linkedin"></a>など。利用可能なサービスの完全なリストはhttps://www.addtoany.com/buttons/customize/drupal/standalone_services をご覧ください。

ソーシャルメディアフォローバー

組織のソーシャルプロフィールにリンクするフォローボタンBlockを作成します。「AddToAny follow buttons」Blockをサイドバーまたはフッター領域に配置します。次のようなHTMLで設定します：<a class="a2a_button_facebook" href="https://facebook.com/YourPage"></a><a class="a2a_button_twitter" href="https://twitter.com/YourHandle"></a>

コンテンツ一覧へのViews統合

Viewsベースのコンテンツ一覧（ブログインデックス、ニュースアーカイブなど）に共有ボタンを追加します。Viewを編集し、フィールドを追加して、Contentカテゴリから「AddToAny share buttons」を選択します。一覧内の各アイテムには、正しいURLとタイトルを持つ独自の共有ボタンが表示されます。

Google Analyticsトラッキング

追加JavaScriptフィールドにJavaScriptを追加して、Google Analyticsでソーシャル共有イベントをトラッキングします：a2a_config.callbacks.push({share: function(data) { ga('send', 'social', data.service, 'share', data.url); }});

カスタムボタンスタイリング

追加CSSフィールドを使用して、サイトデザインに合わせた共有ボタンのスタイルを設定します。コンテナには.addtoany_listクラスを、サイズ固有のスタイルには.a2a_kit_size_XXをターゲットにします。ホバー状態は.addtoany_list a:hover spanをターゲットにしてカスタマイズできます。

UTMパラメータトラッキング

追加JavaScriptフィールドでAddToAnyのURLテンプレート機能を使用して、共有リンクにキャンペーントラッキングパラメータを追加します：a2a_config.templates = { twitter: '${title} ${link}?utm_source=twitter&utm_medium=social' };

Tips

  • テンプレートサジェスション（addtoany-standard--node--article.html.twig）を使用して、特定のコンテンツタイプのボタン外観をカスタマイズできます
  • Entityタイプ設定を変更した後は、変更を反映させるためにDrupalのCacheをクリアしてください
  • 特定のサービスボタンのみを表示したい場合は、「なし」を選択してユニバーサルボタンを完全に非表示にできます
  • 追加JavaScriptでのToken置換により、Nodeごとの動的コンテンツが可能です - Node固有のメタデータを含めるのに便利です
  • 最大のパフォーマンスのため、AddToAny外部スクリプトはページレンダリングをブロックしないようdefer属性付きで読み込まれます
  • Blockレベルの設定はグローバル設定を上書きし、サイトの異なる領域で異なる設定が可能です

Technical Details

Admin Pages 1
AddToAny /admin/config/services/addtoany

AddToAny共有ボタンの外観、サービスボタン、ユニバーサルボタン設定、およびEntityタイプの利用可否を設定します。

権限 1
AddToAnyの管理

AddToAnyモジュールの管理タスクを実行します。AddToAny設定フォームへのアクセスおよびBlockでのAddToAny HTMLの編集が含まれます。カスタムJavaScriptを追加できる機能があるため、このパーミッションはアクセス制限があります。

Hooks 1
hook_addtoany_entity_types_alter

AddToAny共有ボタンで利用可能なEntityタイプをモジュールが変更できるようにします。このhookを使用して、AddToAny設定にカスタムEntityタイプを追加したり、デフォルトのものを削除したりできます。

Security Notes 4
  • 「administer addtoany」パーミッションは、カスタムJavaScriptコードを追加できる機能があるため、アクセス制限があります
  • Blockでのカスタム JavaScriptを編集するには「administer addtoany」パーミッションが必要です
  • 外部JavaScriptはAddToAnyのCDN（static.addtoany.com）から読み込まれます - Content Security Policyを使用している場合は、このドメインが許可されていることを確認してください
  • モジュールはUrlHelper::stripDangerousProtocols()を使用してURLをサニタイズし、悪意のあるプロトコルによるXSSを防止します