CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Replace AddThis with AddToAny, the perfect alternative to AddThis."> <meta property="og:image" content="https://static.addtoany.com/images/addtoany-to-the-rescue-addthis-alternative.png"> <meta property="og:title" content="Replace AddThis with AddToAny, the perfect alternative to AddThis."> <meta property="og:url" content="https://www.addtoany.com/ext/addthis/"> <title>How to replace AddThis with AddToAny, the AddThis alternative</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/css/main.18.min.css" rel="stylesheet"> <script>!function(){var e;(e=document.documentElement).className+=e.className?" svg":"svg";}();</script> <style> @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } </style> <script type="module" src="/js/prefetch.1.min.js"></script> <script blocking="render" defer src="/js/transition.1.min.js"></script> <link rel="expect" href="#header .logo :first-child" blocking="render" /> <link rel="expect" href="#header a[href='/share']" blocking="render" /> <style> h4{margin:40px 0 0 0;} #rescue_image{height:auto;max-width:100%;} pre.prettyprint.addthis_box_shadow{box-shadow:2px 2px 0px 0px #FF6550;border:1px solid #FF6550 !important;} .addthis_noun{box-shadow:0px 2px 0px 0px #FF6550;} pre.prettyprint.addtoany_box_shadow{box-shadow:2px 2px 0px 0px #0166FF;border:1px solid #0166FF !important;} .addtoany_noun{box-shadow:0px 2px 0px 0px #0166FF;} .fully_rounded .a2a_svg { border-radius: 50% !important; } .a2a_kit.a2a_default_style{height:36px;} .a2a_kit.a2a_default_style.a2a_flex_style{height:40px;} </style> <script defer src="https://static.addtoany.com/menu/page.js"></script> <link rel="stylesheet" href="https://static.addtoany.com/css/prettify-mar-2013.css" media="print" onload="this.onload=null;this.media='all'"> </head> <body> <div id="header"> <div class="header_content clearfix"> <div class="hdr_l"> <h2 class="logo"><a href="/" title="AddToAny Share Buttons">AddToAny</a></h2> </div> <div class="hdr_r"> <a class="hdr_link" href="/buttons/" title="Get the share buttons">Get</a> <a class="hdr_link" href="/buttons/customize/" title="Customize the share buttons">Customize</a> <a class="hdr_link" href="/share" title="Share a link">Share</a> <a class="hdr_link" href="/buttons/faq/" title="Frequently asked questions and answers">FAQ</a> </div> </div> </div> <div id="page"> <div class="main"> <h2><span class="addthis_noun">AddThis</span> to <span class="addtoany_noun">AddToAny</span></h2> <div class="notes_content"> <img id="rescue_image" src="https://static.addtoany.com/images/addtoany-to-the-rescue-addthis-alternative.svg" alt="RIP AddThis. AddToAny to the rescue!" width="2400" height="1260"> <br><br> <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> <br> <p>This guide serves to help publishers & developers manually migrate from <span class="addthis_noun">AddThis</span> to <span class="addtoany_noun">AddToAny</span>.</p> <p>For sites on specific platforms, check out <a href="/buttons/">AddToAny's official plugins</a> for WordPress, Drupal, Cloudflare, and many others.</p> </div> <div class="notes_content"> <p>💡 Take note of which <span class="addthis_noun">AddThis</span> buttons are in use on your site as you'll be switching them out for <span class="addtoany_noun">AddToAny</span> buttons.</p> <h4>Contents</h4> <ul> <li> <a href="#main-script">Main Script</a> <ul> <li><a href="#replace-script">Replacing the Script</a></li> </ul> </li> <li> <a href="#inline-buttons">Inline Buttons</a> <ul> <li><a href="#replace-inline-share-buttons">Replacing Inline Share Buttons</a></li> <li><a href="#replace-inline-follow-buttons">Replacing Inline Follow Buttons</a></li> </ul> </li> <li> <a href="#floating-buttons">Floating Buttons</a> <ul> <li><a href="#add-floating-share-buttons">Adding Floating Share Buttons</a></li> </ul> </li> <li> <a href="#image-share-buttons">Image Share Buttons</a> <ul> <li><a href="#over-images">Adding Share Buttons Over Images</a></li> <li><a href="#media-attribute">Replacing the Shared Media Attribute</a></li> </ul> </li> <li> <a href="#design-style">Design & Style</a> <ul> <li><a href="#match-wide-rectangular-style">Matching the Wide Rectangular Style</a></li> </ul> </li> </ul> <br id="main-script"> <h3>Main Script</h3> <h4 id="replace-script">Replacing the Script</h4> <p>First, find on your site/pages the <span class="addthis_noun">AddThis</span> script tag, which looks something like:</p> <pre class="prettyprint addthis_box_shadow"> <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=example"></script> </pre> <p>Then replace it with the <span class="addtoany_noun">AddToAny</span> script tag:</p> <pre class="prettyprint addtoany_box_shadow"> <script defer src="https://static.addtoany.com/menu/page.js"></script> </pre> <p>✅ The main part is done!</p> <p>Now you can <a href="/buttons/customize/">add AddToAny buttons to your site</a>, or you can continue this guide to replace specific types of <span class="addthis_noun">AddThis</span> buttons with equivalent <span class="addtoany_noun">AddToAny</span> buttons.</p> <br id="inline-buttons"> <h3>Inline Buttons</h3> <p><em>Inline</em> buttons are buttons that are placed in a specific part of a page and typically scroll along with the content. This differs from <a href="#floating-buttons"><em>floating</em> buttons</a> that always stay in place even as the user scrolls.</p> <h4 id="replace-inline-share-buttons">Replacing Inline Share Buttons</h4> <p>Find each instance of <span class="addthis_noun">AddThis</span> share buttons code, which looks something like these examples:</p> <pre class="prettyprint addthis_box_shadow"> <div class="addthis_inline_share_toolbox"></div> </pre> <pre class="prettyprint addthis_box_shadow"> <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> </pre> <p>Replace each instance with the <a href="/buttons/customize/standalone_services">AddToAny share buttons</a> code, for example:</p> <pre class="prettyprint addtoany_box_shadow"> <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> </pre> <div class="button_demo"> <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> </div> <p> 💡 Use the <span class="addtoany_noun">AddToAny</span> <a href="/services/">service code directory</a> to find a service's code to use in each <code>a2a_button_<em>example</em></code> class name. Most service codes are predictable with a few exceptions, for example: The service code for <a href="/services/google_gmail_button">Gmail</a> is <code>google_gmail</code>, and the service code for <a href="/services/copy_link_button">Copy Link</a> is <code>copy_link</code>. </p> <h4 id="replace-inline-follow-buttons">Replacing Inline Follow Buttons</h4> <p>Find each instance of <span class="addthis_noun">AddThis</span> follow buttons code, which looks something like these examples:</p> <pre class="prettyprint addthis_box_shadow"> <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> </pre> <p>Replace each instance with the <a href="/buttons/customize/follow_buttons">AddToAny follow buttons</a> code, for example:</p> <pre class="prettyprint addtoany_box_shadow"> <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> </pre> <div class="button_demo"> <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> </div> <p>Using CSS code, you can also make the buttons fully rounded like <span class="addthis_noun">AddThis</span>' last style for follow buttons.</p> <pre class="prettyprint addtoany_box_shadow"> <style> /* Make the AddToAny follow buttons fully rounded. */ .a2a_follow .a2a_svg { border-radius: 50% !important; } </style> </pre> <div class="button_demo"> <div class="a2a_kit a2a_kit_size_32 a2a_default_style a2a_follow fully_rounded"> <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> </div> <br id="floating-buttons"> <h3>Floating Buttons</h3> <p><em>Floating</em> buttons stay in place on the screen even as the user scrolls. <span class="addthis_noun">AddThis</span> required an account to use floating buttons, so there's no <span class="addthis_noun">AddThis</span> floating code directly on your site to replace; however, <span class="addtoany_noun">AddToAny</span> offers floating bars that are highly customizable.</p> <h4 id="add-floating-share-buttons">Adding Floating Share Buttons</h4> <p>🪄 <span class="addtoany_noun">AddToAny</span>'s <a href="https://wordpress.org/plugins/add-to-any/">WordPress plugin</a> and <a href="https://www.cloudflare.com/apps/addtoany">Cloudflare app</a> provide a no-code way to add floating share buttons to your site.</p> <p>Check out <span class="addtoany_noun">AddToAny</span>'s <a href="/buttons/customize/floating_share_buttons">floating share buttons code</a>. For example, here's <span class="addtoany_noun">AddToAny</span> code for floating bars on desktop & mobile:</p> <pre class="prettyprint"> <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> </pre> <pre class="prettyprint"> <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> </pre> <p>Using CSS code, you can also configure when a vertical bar displays (on desktop) and when a horizontal bar displays (on mobile):</p> <pre class="prettyprint"> <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> </pre> <br id="image-share-buttons"> <h3>Image Share Buttons</h3> <p>From a dashboard, <span class="addthis_noun">AddThis</span> offered image share buttons that appeared on hover, and Pinterest image sharing that could be set with a <code>data-media</code> or <code>addthis:media</code> attribute.</p> <p><span class="addtoany_noun">AddToAny</span> provides <a href="#over-images">image share buttons</a> that can appear on hover, or automatically on all visible images (with some rare layout exceptions). <span class="addtoany_noun">AddToAny</span> also supports image sharing through <a href="#media-attribute">the <code>data-a2a-media</code> attribute</a> so an image (and/or page) can be shared to any service.</p> <p>💡 To change a shared page's <em>preview image</em> on services such as Facebook and LinkedIn, <a href="/ext/meta-tags/">set the image URL in a meta tag</a> on the page. Only a few services such as Pinterest and Tumblr accept arbitrary images.</p> <h4 id="over-images">Adding Share Buttons Over Images</h4> <p>Check out <a href="/buttons/customize/image_sharing">AddToAny image sharing</a> to enable image sharing to services that accept arbitrary images (mainly Pinterest, Tumblr, Houzz, and Yummly).</p> Here's an example of <span class="addtoany_noun">AddToAny</span> set to always display image share buttons over visible images: <pre class="prettyprint"> <script> <span class="dim_code">var a2a_config = a2a_config || {};</span> 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"> </pre> <div class="button_demo"> <script> var a2a_config = a2a_config || {}; a2a_config.overlays = a2a_config.overlays || []; a2a_config.overlays.push({ showOn: 'visible', services: ['pinterest', 'tumblr', 'houzz', 'yummly', 'addtoany'], target: 'img#image-sharing-example-default', }); </script> <img loading="lazy" id="image-sharing-example-default" class="img_responsive" src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" height="291" width="440" alt="Dracaena cinnabari" style="margin:10px"> </div> <h4 id="media-attribute">Replacing the Shared Media Attribute</h4> <p>Find each instance of an <span class="addthis_noun">AddThis</span> <code>data-media</code> or <code>addthis:media</code> attribute, which looks something like these examples:</p> <pre class="prettyprint addthis_box_shadow"> <div class="addthis_toolbox addthis_32x32_style addthis_default_style" addthis:url="https://example.com/page.html" addthis:title="Example Page with Image" <span class="highlight">addthis:media="https://example.com/image.png"</span> >...</div> </pre> <pre class="prettyprint addthis_box_shadow"> <div class="addthis_sharing_toolbox" data-url="https://example.com/page.html" data-title="Example Page with Image" <span class="highlight">data-media="https://example.com/image.png"</span> >...</div> </pre> <p>Replace each instance with an <span class="addtoany_noun">AddToAny</span> instance that includes the <code>data-a2a-media</code> attribute, for example:</p> <pre class="prettyprint addtoany_box_shadow"> <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" <span class="highlight">data-a2a-media="https://example.com/image.png"</span> > <a class="a2a_button_pinterest"></a> <a class="a2a_button_tumblr"></a> <a class="a2a_dd"></a> </div> </pre> <br id="design-style"> <h3>Design & Style</h3> <p>Designers & developers have full CSS control over <span class="addtoany_noun">AddToAny</span> styling, and we offer some class names to help match <span class="addthis_noun">AddThis</span>' last style.</p> <h4 id="match-wide-rectangular-style">Matching the Wide Rectangular Style</h4> <p>Use the <code>a2a_flex_style</code> & <code>a2a_color_buttons</code> class names to expand an <span class="addtoany_noun">AddToAny</span> instance to the max width of its container, and to fill in the color of rectangular buttons.</p> <pre class="prettyprint"> <div class="a2a_kit a2a_kit_size_32 a2a_default_style <span class="highlight">a2a_flex_style</span> <span class="highlight">a2a_color_buttons</span>"> <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> </pre> <div class="button_demo"> <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> </div> <p>Thanks for migrating to AddToAny. <a href="/contact/">Let us know</a> if you have any feedback!</p> </div> </div> <div id="footer"> <div class="footer_cols"> <div> <h2>Features</h2> <a href="/buttons/customize/floating_share_buttons" title="Floating Share Bars that are responsive for mobile and desktop, and can show and hide on scroll">Floating Share Buttons</a> <a href="/buttons/customize/image_sharing" title="Share your images directly to Facebook, Pinterest, Tumblr, Houzz, and more">Image Share Buttons</a> <a href="/buttons/customize/share_counters" title="Show the share count next to your share buttons">Share Counts</a> <a href="/buttons/customize/share_count_recovery" title="Recover lost share counts after a change in URLs, a new domain, or a move to HTTPS from HTTP">Share Count Recovery</a> <a href="/buttons/customize/follow_buttons" title="Link to your Instagram, Snapchat, YouTube, and other social media and RSS feeds">Follow Buttons</a> <a href="/ext/google_analytics/" title="Sharing analytics in Google Analytics">Google Analytics</a> </div> <div> <h2>Plugins</h2> <a href="https://wordpress.org/plugins/add-to-any/" title="Share Buttons for WordPress, the most popular WordPress sharing plugin">WordPress Share Plugin</a> <a href="https://www.drupal.org/project/addtoany" title="Share Buttons for Drupal, the most popular Drupal sharing module">Drupal Share Module</a> <a href="/buttons/for/joomla" title="Share Buttons for Joomla, available as a plugin and a module in one extension">Joomla Share Extension</a> <a href="https://www.cloudflare.com/apps/addtoany" title="Share Buttons for Cloudflare sites">Cloudflare Share App</a> <a href="/buttons/" title="All share button plugins for WordPress.com, Blogger, Tumblr, and more platforms, websites and apps">Share Buttons for Sites</a> <a href="/buttons/for/email_newsletter" title="Get share buttons for use in email">Share Buttons for Email</a> </div> <div> <h2>Browser Tools</h2> <a href="https://addons.mozilla.org/en-US/firefox/addon/addtoany-share/" title="Share button for Mozilla Firefox">AddToAny for Firefox</a> <a href="https://chrome.google.com/webstore/detail/addtoany-share-anywhere/ffpgijchhhkhnokafdeklpllijgnbche" title="Share button for Google Chrome">AddToAny for Chrome</a> <a href="/users/bookmarklet" title="Share button for your browser's Bookmarks Bar">AddToAny Bookmarklet</a> <a href="/services/" title="Services directory and bookmarklets">Service Bookmarklets</a> <a href="/share" title="Share a page to any service">Share a URL</a> <a href="/share/preferences" title="Set your preferred services">Sharing Preferences</a> </div> <div> <h2>Resources</h2> <a href="/buttons/customize/" title="Customize your share buttons">Customize AddToAny</a> <a href="/services/" title="Services directory and share button codes">Service Codes</a> <a href="/buttons/api/" title="JavaScript API reference">JavaScript API</a> <a href="/buttons/faq/" title="Answers to frequently asked questions">Questions & Answers</a> <a href="/blog/" title="The AddToAny Blog">AddToAny News</a> <a href="/contact/" title="Contact AddToAny">Contact AddToAny</a> </div> </div> <div class="legal"> <span>© 2006–2024</span> <a href="/terms" title="Terms of Service">Terms</a> <a href="/privacy" title="Privacy Policy">Privacy</a> </div> </div> </div><script src="/js/prettify-mar-2013/prettify.js"></script> <script>prettyPrint()</script> </body> </html>