AddToAny Share Buttons

Provides social media share and follow buttons through integration with the AddToAny platform, supporting over 100 services including Facebook, Mastodon, Pinterest, WhatsApp, and more.

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

Basic Content Sharing

Enable share buttons on blog posts and articles by checking 'Node' in the Entities settings, then visiting Structure > Content types > Article > Manage display. Drag the 'AddToAny' component to the desired position in the layout. The default configuration includes Facebook, Mastodon, and Email buttons.

Custom Service Selection

Customize which social services appear by editing the Service Buttons HTML code. Add buttons in order of preference using the AddToAny class naming convention: <a class="a2a_button_facebook"></a>, <a class="a2a_button_twitter"></a>, <a class="a2a_button_linkedin"></a>, etc. Visit https://www.addtoany.com/buttons/customize/drupal/standalone_services for the full list of available services.

Social Media Follow Bar

Create a follow buttons block to link to your organization's social profiles. Place an 'AddToAny follow buttons' block in a sidebar or footer region. Configure it with HTML like: <a class="a2a_button_facebook" href="https://facebook.com/YourPage"></a><a class="a2a_button_twitter" href="https://twitter.com/YourHandle"></a>

Views Integration for Content Lists

Add share buttons to Views-based content listings (blog indexes, news archives, etc.). Edit your View, add a field, and select 'AddToAny share buttons' from the Content category. Each item in the listing will have its own share buttons with the correct URL and title.

Google Analytics Tracking

Track social sharing events in Google Analytics by adding JavaScript to the Additional JavaScript field: a2a_config.callbacks.push({share: function(data) { ga('send', 'social', data.service, 'share', data.url); }});

Custom Button Styling

Style share buttons to match your site design using the Additional CSS field. Target the .addtoany_list class for the container and .a2a_kit_size_XX for size-specific styles. Hover states can be customized by targeting .addtoany_list a:hover span.

UTM Parameter Tracking

Add campaign tracking parameters to shared links using AddToAny's URL template feature in the Additional JavaScript field: a2a_config.templates = { twitter: '${title} ${link}?utm_source=twitter&utm_medium=social' };

Tips

  • Use template suggestions (addtoany-standard--node--article.html.twig) to customize button appearance for specific content types
  • Clear Drupal's cache after changing entity type settings for changes to take effect
  • The universal button can be hidden entirely by selecting 'None' if you only want specific service buttons
  • Token replacement in Additional JavaScript allows dynamic content per node - useful for including node-specific metadata
  • For maximum performance, the AddToAny external script loads with defer attribute to not block page rendering
  • Block-level settings override global settings, allowing different configurations for different site regions

Technical Details

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

Configure AddToAny share buttons appearance, service buttons, universal button settings, and entity type availability.

権限 1
Administer AddToAny

Perform administration tasks for the AddToAny module. Includes access to the AddToAny settings form and editing AddToAny HTML in blocks. This permission has restricted access due to the ability to add custom JavaScript.

Hooks 1
hook_addtoany_entity_types_alter

Allows modules to alter the entity types available for AddToAny share buttons. Use this hook to add custom entity types or remove default ones from the AddToAny configuration.

Security Notes 4
  • The 'administer addtoany' permission has restricted access due to the ability to add custom JavaScript code
  • Custom JavaScript in blocks requires the 'administer addtoany' permission to edit
  • External JavaScript is loaded from AddToAny's CDN (static.addtoany.com) - ensure this domain is allowed if using Content Security Policy
  • The module sanitizes URLs using UrlHelper::stripDangerousProtocols() to prevent XSS through malicious protocols