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:
- Include Shareaholic.js on the page
- Add
data-app="share_buttons"
anddata-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