Make AddToAny Block Sticky in Drupal 8

27 Nov 2017
Social Media Widgets

In this article we will describe, how to implement AddToAny block sticky in Drupal 8. This article will explain the implementation with help of screenshots, code samples and explanations. AddToAny is a Drupal module which allows you to add social widgets like Facebook Share, GooglePlus Share, Twitter share, Whatsapp Share and many more social media sharing easy. Module provides AddToAny as a block and part of content. Here we will use the AddToAny block and we will make it sticky and vertically aligned instead of horizontally aligned with help of some extra CSS. So, let's dive in and get started.

Install AddToAny Module.

  • Download AddToAny Module and install.
  • Goto "admin/config/services/addtoany" and do the configuration changes as per your need. By default Facebook, Google and Twitter Share icons are listed.AddToAny Configure Page
  • You can add whatsapp icon as well. To do that add:
    <a class="a2a_button_whatsapp"></a>
  • You can add or remove universal button from the set of other social buttons.
  • Now, Goto "admin/structure/block" and enable "AddToAny buttons" Block in any reason you want to.

Now you have successfully implemented the AddToAny module and you can check it on your web page. But till now the widget is not floating and it is horizontally aligned. Now to make it vertically aligned and sticky. We need to add add some CSS.

CSS To make AddToAny Block Sticky

Now, go back to AddToAny configure page and this time open the "ADDITIONAL OPTIONS" section in the configuration. And add some CSS in the Additional CSS box.

Additional Options

#block-addtoanybuttons .addtoany_list {
position:fixed;
z-index: 500;
left: 40px;
top: 250px;
}
#block-addtoanybuttons .addtoany_list a {
display:block;
}

Now, this will make your AddToAny Block Sticky / Floating.

AddToAny Block Sticky Social Icons

You can change the CSS as per your placement requirement. If you want to hide the whatsapp icon on desktop, you can add media query for that.