AddThis to AddToAny
This guide serves to help publishers & developers manually migrate from AddThis to AddToAny.
For sites on specific platforms, check out AddToAny's official plugins for WordPress, Drupal, Cloudflare, and many others.
💡 Take note of which AddThis buttons are in use on your site as you'll be switching them out for AddToAny buttons.
Contents
Main Script
Replacing the Script
First, find on your site/pages the AddThis script tag, which looks something like:
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=example"></script>
Then replace it with the AddToAny script tag:
<script async src="https://static.addtoany.com/menu/page.js"></script>
✅ The main part is done!
Now you can add AddToAny buttons to your site, or you can continue this guide to replace specific types of AddThis buttons with equivalent AddToAny buttons.
Inline Buttons
Inline buttons are buttons that are placed in a specific part of a page and typically scroll along with the content. This differs from floating buttons that always stay in place even as the user scrolls.
Replacing Inline Share Buttons
Find each instance of AddThis share buttons code, which looks something like these examples:
<div class="addthis_inline_share_toolbox"></div>
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_compact"></a>
</div>
Replace each instance with the AddToAny share buttons code, for example:
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_whatsapp"></a>
<a class="a2a_dd"></a>
</div>
💡 Use the AddToAny service code directory to find a service's code to use in each a2a_button_example class name.
Most service codes are predictable with a few exceptions, for example: The service code for Gmail is google_gmail, and the service code for Copy Link is copy_link.
Replacing Inline Follow Buttons
Find each instance of AddThis follow buttons code, which looks something like these examples:
<div class="addthis_inline_follow_toolbox">
<a class="addthis_button_facebook_follow" addthis:userid="example"></a>
<a class="addthis_button_twitter_follow" addthis:userid="example"></a>
<a class="addthis_button_pinterest_follow" addthis:userid="example"></a>
</div>
Replace each instance with the AddToAny follow buttons code, for example:
<div class="a2a_kit a2a_kit_size_32 a2a_default_style a2a_follow">
<a class="a2a_button_instagram" href="https://www.instagram.com/kevin"></a>
<a class="a2a_button_tiktok" href="https://www.tiktok.com/@khaby.lame"></a>
<a class="a2a_button_discord" href="https://discord.com/invite/roblox"></a>
<a class="a2a_button_youtube" href="https://www.youtube.com/user/YouTube"></a>
</div>
Using CSS code, you can also make the buttons fully rounded like AddThis' last style for follow buttons.
<style>
/* Make the AddToAny follow buttons fully rounded. */
.a2a_follow .a2a_svg { border-radius: 50% !important; }
</style>
Floating Buttons
Floating buttons stay in place on the screen even as the user scrolls. AddThis required an account to use floating buttons, so there's no AddThis floating code directly on your site to replace; however, AddToAny offers floating bars that are highly customizable.
Adding Floating Share Buttons
🪄 AddToAny's WordPress plugin and Cloudflare app provide a no-code way to add floating share buttons to your site.
Check out AddToAny's floating share buttons code. For example, here's AddToAny code for floating bars on desktop & mobile:
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_whatsapp"></a>
<a class="a2a_dd"></a>
</div>
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="left:50%; transform:translateX(-50%);">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_whatsapp"></a>
<a class="a2a_dd"></a>
</div>
Using CSS code, you can also configure when a vertical bar displays (on desktop) and when a horizontal bar displays (on mobile):
<style>
/* Hide the AddToAny vertical share bar when the screen is less than 981 pixels wide. */
@media screen and (max-width: 980px) {
.a2a_floating_style.a2a_vertical_style { display: none; }
}
/* Hide the AddToAny horizontal share bar when the screen is greater than 980 pixels wide. */
@media screen and (min-width: 981px) {
.a2a_floating_style.a2a_default_style { display: none; }
}
</style>
Image Share Buttons
From a dashboard, AddThis offered image share buttons that appeared on hover, and Pinterest image sharing that could be set with a data-media or addthis:media attribute.
AddToAny provides image share buttons that can appear on hover, or automatically on all visible images (with some rare layout exceptions). AddToAny also supports image sharing through the data-a2a-media attribute so an image (and/or page) can be shared to any service.
💡 To change a shared page's preview image on services such as Facebook and LinkedIn, set the image URL in a meta tag on the page. Only a few services such as Pinterest and Tumblr accept arbitrary images.
Adding Share Buttons Over Images
Check out AddToAny image sharing to enable image sharing to services that accept arbitrary images (mainly Pinterest, Tumblr, Houzz, and Yummly).
Here's an example of AddToAny set to always display image share buttons over visible images:
<script>
var a2a_config = a2a_config || {};
a2a_config.overlays = a2a_config.overlays || [];
a2a_config.overlays.push({
services: ['pinterest', 'tumblr', 'houzz', 'yummly', 'addtoany'],
showOn: 'visible',
});
</script>
<img src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" height="291" width="440" alt="Dracaena cinnabari">
Replacing the Shared Media Attribute
Find each instance of an AddThis data-media or addthis:media attribute, which looks something like these examples:
<div class="addthis_toolbox addthis_32x32_style addthis_default_style"
addthis:url="https://example.com/page.html"
addthis:title="Example Page with Image"
addthis:media="https://example.com/image.png"
>...</div>
<div class="addthis_sharing_toolbox"
data-url="https://example.com/page.html"
data-title="Example Page with Image"
data-media="https://example.com/image.png"
>...</div>
Replace each instance with an AddToAny instance that includes the data-a2a-media attribute, for example:
<div class="a2a_kit a2a_kit_size_32 a2a_default_style"
data-a2a-url="https://example.com/page.html"
data-a2a-title="Example Page with Image"
data-a2a-media="https://example.com/image.png"
>
<a class="a2a_button_pinterest"></a>
<a class="a2a_button_tumblr"></a>
<a class="a2a_dd"></a>
</div>
Design & Style
Designers & developers have full CSS control over AddToAny styling, and we offer some class names to help match AddThis' last style.
Matching the Wide Rectangular Style
Use the a2a_flex_style & a2a_color_buttons class names to expand an AddToAny instance to the max width of its container, and to fill in the color of rectangular buttons.
<div class="a2a_kit a2a_kit_size_32 a2a_default_style a2a_flex_style a2a_color_buttons"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_linkedin"></a> <a class="a2a_button_reddit"></a> <a class="a2a_button_mastodon"></a> <a class="a2a_button_whatsapp"></a> <a class="a2a_dd"></a> </div>
Thanks for migrating to AddToAny. Let us know if you have any feedback!