Adding Social Media Button to Drupal Site


Post:2021/11/15

Update:2021/11/19

Modules
addtoany
Adding Social Media Button to Drupal Site

Jhon Manny Loto

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

  1. In your command prompt type the following command: composer require 'drupal/addtoany:^1.15'
  2. When the download is complete, in your site go to module extend page and search the addtoAny module: /admin/modules
  3. 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";

 

References:

https://www.droptica.com/blog/addtoany-module-how-add-social-media-share-buttons-drupal/

https://www.addtoany.com/buttons/customize/drupal/standalone_services

https://www.inmotionhosting.com/support/edu/drupal/addtoany-drupal-module/

Profile picture for user Jhon Manny Loto
Jhon Manny Loto
Software Developer
My identity has been shaped in the countryside part of the Philippines! To travel around the world is something I wish of. In spite of the continual struggle, faith and courage were my main motivation to keep going because I believe no matter how you feel, just get up, dress up, show up and never give up. Great things are yet to come. Becoming part of Acret-PH is a great opportunity for me to nurture my knowledge and skills. I started with a zero-knowledge in Drupal, yet it was never a hindrance for me to cope up and learn since my seniors and fellow workmates have been very helpful.