Adding Social Media Button to Drupal Site

One way to add a social media button to your drupal site, like facebook, LinkedIn, Twitter and other social media platforms, is using the AddtoAny module. Browser and Drupal social media plugins help visitors share your content among their online network friends. The AddToAny Drupal module adds a small group of social media buttons at the bottom of your pages or depends on your configuration. Using this module, it has many services and you can customize the services if you need to and it is now easier to to share via Gmail, Yahoo Mail, Outlook.com, AOL Mail, and any other web-based email or desktop email client.

How To Install AddToAny Module

To Install the AddToAny Share Button module, go to the Drupal Module and search AddToAny Module or you can access through this link: https://www.drupal.org/project/addtoany

In your command prompt type the following command: composer require 'drupal/addtoany:^1.15'

When the download is complete, in your site go to module extend page and search the addtoAny module: /admin/modules

Select the module and install. By default, share buttons are disabled and placed in Manage display of each content type, Structure > Content types > [Name of Content Type] > Manage Display. And enabled the addtoany field according to your requirements. And now you can see the Social media buttons in your page.

Customize the AddToAny Module

AddToAny social media buttons are set to display in comments and content types by default. You can check a published article to see the results of your changes below configuration.

Buttons Section

AddToAny uses SVG sharing icons that can be scaled to any size according to your design requirement, however the default value is 32x32 pixels. You can customize the share buttons by editing the "Service Buttons HTML Code" box. In this field put your customized html layout for the sharing icon. But make sure the service of each service is present. Service class names take the form of a2a_button_service-code. Be sure to look up the standard service code to use for each service.

<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_pinterest"></a>

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.

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";