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.

Examples

Share to Facebook:

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

Copy Link (with QR Code):

<button data-app="share_buttons"
        data-app-config='{"service":"copy_link"}'></button>

Open Shareaholic All Share Panel:

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

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="https://google.com" 
        data-app="share_buttons" 
        data-app-config='{"service":"facebook"}'></button>

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

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

List of service codes: https://www.shareaholic.com/api/share/#services