AddToAny Module: How to Add Social Media Share Buttons to Drupal
December 3, 2024 | News | No Comments
Nowadays we have social media everywhere, so having the ability to share content on your website is essential.
By default Drupal doesn’t provide social media sharing buttons out of the box. However, when delivering Drupal services, we use modules that can help with this. The most popular solution is the AddToAny module.
AddToAny module provides a huge number of share buttons including the universal (‘+’), Facebook, Twitter, Pinterest, Reddit and many more.
And popular AddToAny features list is also impressive:
- Floating share bars for mobile, desktop, and various site layouts;
- Image share buttons to share your images;
- Share counts and share count recovery;
- Google Analytics integration;
- Vector sharing icons made for mobile, Retina and high-PPI displays;
- Universal sharing button and smart menu;
- Visitor personalization;
- International support (i18n/localization);
- Accessibility and graceful degradation;
- Cross-browser and backward compatibility;
- Optimized performance and efficient loading via world-class CDNs;
- Complete control for publishers & developers of all sizes
Dates
The first version of the module was released on 15 April 2008, the latest update – 15 may 2020.
The module can be installed on:
- Drupal 7 (7.x-4.16 stable release version);
- Drupal 8 (8.x-1.14 stable release version);
- Since 8.x-1.13+ it supports Drupal 9 as well.
All stable releases for this project are covered by the security advisory policy.
Module popularity
According to the statistical data from the module’s page, it is currently used by about 47.000 websites.
Module creators
The module is created and maintained by the only person – micropat (see his profile).
What is the module used for?
It is a highly customizable module, allowing to share content probably to any social media. It has a very friendly and excellent documentation with many examples.
Unboxing
To install AddToAny go to the webpage or do it via composer:
composer require drupal/addtoany
Configure placement
By default, share buttons are disabled and placed in Manage display section of each content type, e.g. Structure > Content types > Blog post > Manage display. Be sure it is enabled before we continue.
Configure AddToAny
To configure AddToAny options, go to Administration > Configuration > Web services > AddToAny.
Let’s go through each section briefly.
Buttons section
AddToAny uses SVG sharing icons that can be scaled to any size, the default value is 32×32 pixels. You can customize the share buttons by editing the “Service Buttons HTML Code” box. More details can be found in the official documentation, where you will find the additional feature examples, such as:
- Share event handling & modifying;
- Templates & endpoint parameters;
- Link tracking & URL shorteners;
- Custom color buttons;
- Image share buttons;
- Share counters;
- Share count recovery;
- etc.
Here are a few examples.
Like buttons:
<a ></a>
<a ></a>
<a ></a>
Share counts buttons:
<a ></a>
<a ></a>
<a ></a>
<a ></a>
Under the universal button section you can also customize the + button or even remove it:
Additional Options section
Here you can add some custom JS or CSS code for AddToAny with no need to do it programmatically.
As an option, you can for example set a custom color to perfectly match any design’s color scheme. Just add the following JS code to your “Additional JavaScript” box on the Configuration page.
a2a_config.icon_color = "#0166ff";
Entities section
In this section you can toggle the content entities where AddToAny will be available to interact with.
Once the AddToAny Share Buttons module is installed and enabled, a few sharing buttons will appear on your page. Let’s check out how they look.
By default we have a “+” icon (called the “Universal Button”), next Facebook share is there, as well as Twitter, and email. Clicking the “Universal Button” you will see all available share buttons for other services.
And here is an example of Twitter sharing popup. When a visitor clicks one of the buttons, a pre-populated post pops up.
Let’s dive into the documentation and see if we can adjust the template.
Voila, you can change the default message, by adding the following JavaScript code:
var a2a_config = a2a_config || {};
a2a_config.templates = a2a_config.templates || {};
a2a_config.templates.twitter = {
text: "Reading: ${title} ${link} by me",
hashtags: "sharing,social"
};
Hook & Templates
If you think that standard settings is not enough, you can try extending the addtoany-standard.html.twig template.
The default theme implementation to standard AddToAny buttons includes the following variables:
- addtoany_html: HTML for AddToAny buttons;
- button_image: URL for universal button;
- button_setting: Setting of button;
- button_size: Size of buttons;
- universal_button_placement: Value of ‘before’ or ‘after’ to place button;
- link_url: Value of URL to share;
- link_title: Value of page title to share.
There is also one hook, allowing you to programmatically alter the entity types that the AddToAny pseudo-field is available for:
/**
* @param array $types
* The entity types.
*/
function hook_addtoany_entity_types_alter(&$types) {
// Add the "taxonomy_term" entity type.
$types[] = 'taxonomy_term';
}
Alternative solutions
There are a few other options that you might want to investigate. Here is the list:
- Better Social Sharing Buttons (Drupal 8 & 9);
Has less settings options and services. According to the description this module delivers the most clean solution without making a lot of external calls, having tracker scripts, or even connecting to ad servers.
- Sharethis (Drupal 8 beta version);
- Service links (only Drupal 7 version);
- Addthis (only Drupal 7 alpha version).
Summary
Now you have all the necessary information on how to add social links to your Drupal site on the example of the AddToAny module. However, if you want to know more about how to most effectively use this module for your website, please contact our Drupal consultants. Once you have installed this module, you will get a very customizable platform with many fine features, which makes your content easy to share.
Keyword: drupal agency