Getting AddThis sharing set up exactly how I wanted took some digging the first time around. Maybe, like me, you wanted AddThis’s functionality but with your own styles, and not the AddThis brand buttons. Here’s how I set it up, allowing for full customization.
Before going further, here’s a short list of things to consider before working with AddThis:
You should have included AddThis’s script before your document’s closing body tag. AddThis’s script will only work remotely; host locally or on a server. AddThis links will not work when certain adblock browser extensions are enabled; I’ve found adblock plus gave me no problems, but ublock origin did.
The Code And Setup
1 2 3 4 5 6 7
For the HTML, we use anchors each with a class that the AddThis scripts and stylesheets recognize, such as “addthis_button_facebook”. Sharing will be fully functional when clicking on an anchor with this class for the corresponding platform. Meaning, these classes are required, or at least in this setup.
When you first create these anchors with the “addthis_button_socialplatform” class, AddThis will create a span as well that will contain a small image; I simply style that span with a “display: none”, and carry on with my own styles.
1 2 3 4 5 6
The AddThis anchor attributes are the following:
Considerations For Facebook And Email
Email (not mailto, but AddThis’s email sharing) and Facebook sharing stand out amongst all the other platforms here in that they both require a little extra.
If you change the content you want to share to Facebook and it isn’t updating, you’ll want to paste the url of the page you’re sharing into Facebook’s sharing debugger. While mailto will open your device’s default mail client, then populate the subject based on the mailto attributes, “addthis_button_email” populates its fields based on the AddThis config variable (seen below).
1 2 3 4
Only one of these will work per page. Also, in case you’re familiar with the old AddThis email modal, I feel I should warn you that they’ve done away with that and instead AddThis email opens a new window.
Alternatively, you could create an email template in your AddThis dashboard. I’ll admit AddThis has good documentation for this.
Finally, you may want to “display: none” on “#at-cv-lightbox”; this modal can popup after first visit to a page using AddThis.