Custom Icons for Share Buttons (use your own Design System / Style Guide)

You can use custom icons for Share Buttons. To make any element on a webpage a Share Button that is powered by Shareaholic with very simple HTML code:

  1. Include Shareaholic.js on the page
  2. Add data-app="share_buttons" and data-app-config="..." to the DOM element. Can be any DOM element - hrefs, buttons, etc.


Share to Facebook:

<button data-app="share_buttons" 

Copy Link (with QR Code):

<button data-app="share_buttons"

Open Shareaholic All Share Panel:

<button data-app="share_buttons" 

Open Native All Share Panel on Mobile:

<button data-app="share_buttons" 
        data-app-config='{"service":"all_share", "use_native": true}'></button>

To specify the link to be shared, follow these instructions:

<button data-link="" 

You may specify data-link just once if you have more than one button:

<div data-link="">
   <button data-app="share_buttons" data-app-config='{"service":"facebook"}'></button>
   <button data-app="share_buttons" data-app-config='{"service":"whatsapp"}'></button>

List of service codes:

Was this article helpful?
4 out of 10 found this helpful