AddThis Tools Examples - See What AddThis Will Look Like On Your Site

<!DOCTYPE html> <html lang=""> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://www.addthis.com/examples/","20201220221450","https://web.archive.org/","web","/_static/", "1608502490"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="UTF-8"/> <title>AddThis Tools Examples - See What AddThis Will Look Like On Your Site - AddThis</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <meta name="title" content="AddThis Tools Examples - See What AddThis Will Look Like On Your Site - AddThis"> <meta itemprop="name" content="AddThis Tools Examples - See What AddThis Will Look Like On Your Site - AddThis"> <meta name="description" content="Wondering how AddThis will look like on your site before installing our tools? Try out these different AddThis examples."> <meta itemprop="description" content="Wondering how AddThis will look like on your site before installing our tools? Try out these different AddThis examples."> <meta name="keywords" content="AddThis Examples"> <meta itemprop="keywords" content="AddThis Examples"> <meta property="og:title" content="AddThis Tools Examples - See What AddThis Will Look Like On Your Site - AddThis"> <meta property="og:url" content="/web/20201220221450/https://www.addthis.com/examples"> <meta property="og:description" content="Wondering how AddThis will look like on your site before installing our tools? Try out these different AddThis examples."> <meta property="og:type" content="website"> <meta property="og:image" content="https://web.archive.org/web/20201220221450im_/https://www.addthis.com/images/placeholder.jpg"> <meta property="og:site_name" content="AddThis"> <meta name="HandheldFriendly" content="True"/> <meta name="MobileOptimized" content="320"/> <meta name="robots" content="all"/> <meta http-equiv="imagetoolbar" content="false"/> <meta name="google-site-verification" content="1Tv0JPiPJShyWlFB9yQ0uBDldtMrxv-tZry_gn3a8vM"/> <link rel="dns-prefetch" href="https://web.archive.org/web/20201220221450/https://fonts.googleapis.com/"> <link href="https://web.archive.org/web/20201220221450cs_/https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> <link media="all" href="/web/20201220221450cs_/https://www.addthis.com/dietsite-assets/css/truste/oracle_truste-c41cf489d2.css" rel="stylesheet" type="text/css"/> <link media="all" href="/web/20201220221450cs_/https://www.addthis.com/dietsite-assets/css/bootstrap/bootstrap-175104f5a3.min.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="/web/20201220221450cs_/https://www.addthis.com/dietsite-assets/css/at_main-934a21de3c.css">  <link media="all" href="/web/20201220221450cs_/https://www.addthis.com/dietsite-assets/css/examples/examples.css" rel="stylesheet" type="text/css"/> <script class="trustecm_done" trackertype="required" type="text/javascript" src="/web/20201220221450js_/https://www.addthis.com/dietsite-assets/js/shared/js-14d48979da.cookie-2.2.0.min.js"></script> <script src="/web/20201220221450js_/https://www.addthis.com/dietsite-assets/js/jquery-3-220afd743d.4.1.min.js" defer></script> <script src="/web/20201220221450js_/https://www.addthis.com/dietsite-assets/js/ConsentManager-7f4ff0f292.js"></script> <script src="/web/20201220221450js_/https://www.addthis.com/dietsite-assets/js/trustecm-activation-b07686edbc.js"></script> </head> <body class="page__examples">  <div id="consent_blackbar"></div> <div class="sitenav"> <div class="sitenav__container"> <div class="sitenav__content sitenav-dark"> <a class="sitenav__logo" href="/web/20201220221450/https://www.addthis.com/">AddThis</a> <nav class="sitenav__menu" role="navigation" aria-controls="primary-menu" aria-expanded="true"> <a class="sitenav__menu-link" href="/web/20201220221450/https://www.addthis.com/get" title="Tools">Tools</a> <a class="sitenav__menu-link" href="/web/20201220221450/https://www.addthis.com/academy" title="Academy">Academy</a> <a class="sitenav__menu-link" href="/web/20201220221450/https://www.addthis.com/blog" title="Blog">Blog</a> <a class="sitenav__menu-link" href="/web/20201220221450/https://www.addthis.com/academy/help" title="Help">Help</a> </nav> <a class="sitenav__button" href="/web/20201220221450/https://www.addthis.com/dashboard" title="Dashboard">Dashboard</a> <button class="sitenav__toggle" aria-controls="secondary-menu" aria-expanded="true"> <span class="sitenav__toggle-burger"></span> <span class="sitenav__toggle-text">Menu</span> </button> </div> </div> </div> <div id="wrapper"> <header> <h1>AddThis Examples</h1> <p>View different examples of AddThis website tools and learn how they can benefit you.</p> </header> <svg class="topLeftRounded" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewbox="50 20 50 80" preserveaspectratio="none"> <path d="M0,103 C15,100 35,50 50,50 L50,50 C65,50 85,100 100,100 Z"></path> </svg>  <section class="examples"> <div class="container"> <div class="examples__columns"> <div class="ecard"> <div class="ecard__top"> <span class="ecard__icon ecard__icon--share"></span> </div> <h3 class="ecard__title">Share Buttons</h3> <p class="ecard__text"> Increase visibility and make your content easily shared across the biggest social media channels like Facebook, Weibo, VK, and WhatsApp with our social Share Buttons. </p> <p class="ecard__text"> <b class="ecard__subhead">Helps Publishers With:</b> </p> <ul class="ecard__checklist"> <li>Increasing Brand Awareness and Recognition</li> <li>Generating New Visitors</li> </ul> <p class="ecard__text"> <b class="ecard__subhead">Tool Types:</b> </p> <ol class="ecard__numlist"> <li><a href="share-buttons/floating-bar" title="Floating Bar">Floating Bar</a></li> <li><a href="share-buttons/inline" title="Inline">Inline</a></li> <li><a href="share-buttons/expanding" title="Expanding">Expanding</a></li> <li><a href="share-buttons/image-sharing" title="Image Sharing">Image Sharing</a></li> <li><a href="share-buttons/popup" title="Popup">Popup</a></li> <li><a href="share-buttons/banner" title="Banner">Banner</a></li> <li><a href="share-buttons/slider" title="Slider">Slider</a></li> </ol> </div> <div class="ecard"> <div class="ecard__top"> <span class="ecard__icon ecard__icon--listbuilding"></span> </div> <h3 class="ecard__title">List Building</h3> <p class="ecard__text"> Grow your email list using our List Building feature! Connect directly to email marketing platforms including MailChimp, AWeber, Campaign Monitor, and Mad Mimi. </p> <p class="ecard__text"> <b class="ecard__subhead">Helps Publishers With:</b> </p> <ul class="ecard__checklist"> <li>Growing Your Email List</li> <li>Increasing Order Value</li> <li>Converting Visitors into Customers </li> <li>Reducing Cart Abandonment</li> </ul> <p class="ecard__text"> <b class="ecard__subhead">Tool Types:</b> </p> <ol class="ecard__numlist"> <li><a href="list-building/banner" title="Banner">Banner</a></li> <li><a href="list-building/popup" title="Popup">Popup</a></li> <li><a href="list-building/slider" title="Slider">Slider</a></li> </ol> </div> <div class="ecard"> <div class="ecard__top"> <span class="ecard__icon ecard__icon--tipjar"></span> </div> <h3 class="ecard__title">Tip Jar</h3> <p class="ecard__text"> Raise money in more ways than just ads, with no hassle. The Tip Jar connects your visitors to the web's most trusted payment platforms — no additional service or registration fees. </p> <p class="ecard__text"> <b class="ecard__subhead">Helps Publishers With:</b> </p> <ul class="ecard__checklist"> <li>Monetizing Your Website Traffic</li> <li>Raising Funds for Your Cause</li> </ul> <p class="ecard__text"> <b class="ecard__subhead">Tool Type:</b> </p> <ol class="ecard__numlist"> <li><a href="tip-jar/inline" title="Inline">Inline</a></li> </ol> </div> <div class="ecard"> <div class="ecard__top"> <span class="ecard__icon ecard__icon--follow"></span> </div> <h3 class="ecard__title">Follow Buttons</h3> <p class="ecard__text"> Build your social media following, one fan at a time, with easy-to-install Follow Buttons. Connect to over 65 social networks, including Facebook, Snapchat, Instagram, and more. </p> <p class="ecard__text"> <b class="ecard__subhead">Helps Publishers With:</b> </p> <ul class="ecard__checklist"> <li>Increasing Brand Recognition</li> <li>Creating Lifetime Fans</li> </ul> <p class="ecard__text"> <b class="ecard__subhead">Tool Types:</b> </p> <ol class="ecard__numlist"> <li><a href="follow-buttons/header" title="Header">Header</a></li> <li><a href="follow-buttons/inline" title="Inline">Inline</a></li> </ol> </div> <div class="ecard"> <div class="ecard__top"> <span class="ecard__icon ecard__icon--linkpromotion"></span> </div> <h3 class="ecard__title">Link Promotion</h3> <p class="ecard__text"> Use the Link Promotion tool to increase sales and drive traffic to specific pages on your site. Promote discounts, new articles, website alerts and much more! </p> <p class="ecard__text"> <b class="ecard__subhead">Helps Publishers With:</b> </p> <ul class="ecard__checklist"> <li>Increasing Sales</li> <li>Reducing Cart Abandonment</li> <li>Increasing Visibility for New Content or Products</li> </ul> <p class="ecard__text"> <b class="ecard__subhead">Tool Types:</b> </p> <ol class="ecard__numlist"> <li><a href="link-promotion/banner" title="Banner">Banner</a></li> <li><a href="link-promotion/popup" title="Popup">Popup</a></li> <li><a href="link-promotion/slider" title="Slider">Slider</a></li> </ol> </div> <div class="ecard"> <div class="ecard__top"> <span class="ecard__icon ecard__icon--relatedposts"></span> </div> <h3 class="ecard__title">Related Posts</h3> <p class="ecard__text"> Reduce website bounce rate and keep visitors engaged by showing relevant content using the Related Posts tool. </p> <p class="ecard__text"> <b class="ecard__subhead">Helps Publishers With: </b> </p> <ul class="ecard__checklist"> <li>Reducing Bounce Rate</li> <li>Increasing Time Spent on Site</li> </ul> <p class="ecard__text"> <b class="ecard__subhead">Tool Types:</b> </p> <ol class="ecard__numlist"> <li><a href="related-posts/footer" title="Footer">Footer</a></li> <li><a href="related-posts/inline" title="Inline">Inline</a></li> <li><a href="related-posts/slider" title="Slider">Slider</a></li> </ol> </div> </div> </div> </section> <svg class="bottomRightRounded" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewbox="0 20 50 80" preserveaspectratio="none"> <path d="M0,101 C15,100 35,50 50,50 L50,50 C65,50 85,100 100,100 Z"></path> </svg>  <section class="signup"> <div class="container"> <h2 class="signup__title">Free and Easy to Install</h2> <p class="signup__text"> At AddThis, we believe in simplicity. That's why we are providing you with free tools to help increase your online sales. No paid plans, no contracts, no pulling out your credit card. Just the simple freedom to use what you want, when you want it. </p> <a class="signup__btn" href="/web/20201220221450/https://www.addthis.com/register">Sign up, it's free!</a> </div> </section> <svg class="topLeftRounded" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewbox="50 20 50 80" preserveaspectratio="none"> <path d="M0,103 C15,100 35,50 50,50 L50,50 C65,50 85,100 100,100 Z"></path> </svg> <div class="footer-atLogo"> <svg id="emblem" width="120px" height="120px" viewbox="0 0 120 120"> <defs> <lineargradient x1="0%" y1="0%" x2="100%" y2="100%" id="emblem-grad"> <stop stop-color="#FF6E41" offset="0%"></stop> <stop stop-color="#F86955" offset="100%"></stop> </lineargradient> </defs> <circle fill="url(#emblem-grad)" cx="60" cy="60" r="60"></circle> <g transform="translate(12 12)"> <g transform="translate(48 48) scale(1.2)"> <path d="M47.5,88 L47.5,73.5 M27.5669873,82.3910162 L34.8169873,69.8336478 M13.1089838,67.5669873 L25.6663522,60.3169873 M8,47.5 L22.5,47.5 M13.6089838,27.5669873 L26.1663522,34.8169873 M28.4330127,13.1089838 L35.6830127,25.6663522 M48.5,8 L48.5,22.5 M68.4330127,13.6089838 L61.1830127,26.1663522 M82.8910162,28.4330127 L70.3336478,35.6830127 M88,48.5 L73.5,48.5 M82.3910162,68.4330127 L69.8336478,61.1830127 M67.5669873,82.8910162 L60.3169873,70.3336478" id="rays" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-dasharray="6,5,4,7" opacity="0" transform="translate(-48 -48)"> <animatetransform attributename="transform" attributetype="XML" type="rotate" from="0 48 48" to="360 48 48" additive="sum" dur="10s" repeatcount="indefinite"/> <animate attributename="stroke-dashoffset" attributetype="XML" from="0" to="200" dur="10s" repeatcount="indefinite"/> <animate attributename="opacity" attributetype="XML" from="0" to="1" dur="0.15s" begin="emblem.mouseenter" repeatcount="1" restart="whenNotActive" fill="freeze"/> <animate attributename="opacity" attributetype="XML" from="1" to="0" dur="0.5s" begin="emblem.mouseleave" repeatcount="1" restart="whenNotActive" fill="freeze"/> </path> <animatetransform attributename="transform" attributetype="XML" type="scale" from="0 0" to="1 1" additive="sum" dur="0.5s" repeatcount="1" restart="whenNotActive" fill="freeze" begin="emblem.mouseenter"/> </g> <path d="M36,32 L60,32 C62.209139,32 64,33.790861 64,36 L64,60 C64,62.209139 62.209139,64 60,64 L36,64 C33.790861,64 32,62.209139 32,60 L32,36 C32,33.790861 33.790861,32 36,32 Z M50,46 L50,40 L46,40 L46,46 L40,46 L40,50 L46,50 L46,56 L50,56 L50,50 L56,50 L56,46 L50,46 Z" fill="#FFFFFF" transform="translate(0 -8)"> <animatetransform attributename="transform" attributetype="XML" type="translate" from="0 -8" to="0 0" dur="0.15s" repeatcount="1" restart="whenNotActive" fill="freeze" begin="emblem.mouseenter"/> <animatetransform attributename="transform" attributetype="XML" type="translate" from="0 0" to="0 -8" dur="0.15s" repeatcount="1" restart="whenNotActive" fill="freeze" begin="emblem.mouseleave"/> </path> <text font-size="12" font-weight="bold" fill="#FFFFFF"> <tspan x="48" y="72" text-anchor="middle">Now Free!</tspan> <animate attributename="opacity" attributetype="XML" from="0" to="1" dur="0.5s" begin="emblem.mouseleave" repeatcount="1" restart="whenNotActive" fill="freeze"/> <animate attributename="opacity" attributetype="XML" from="1" to="0" dur="0.15s" begin="emblem.mouseenter" repeatcount="1" restart="whenNotActive" fill="freeze"/> </text> </g> </svg> </div> <footer class="footer"> <div class="footer__container"> <div class="footer__column"> <h4 class="footer__title">Tools</h4> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/get/share" title="The world鈥檚 most popular share buttons">Share Buttons</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/get/follow" title=" Build your online following, one fan at a time">Follow Buttons</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/get/related-posts" title="Recommend content to your website visitors">Related Posts</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/get/list-building" title=" Grow your email subscriber list">List Building</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/get/link-promotion" title=" Promote the right page at the right time">Link Promotion</a> </div> <div class="footer__column"> <h4 class="footer__title">Plugins</h4> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/social-buttons" title="The world鈥檚 most popular social networks with native social buttons">Social Plugins</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/wordpress" title="Plugins for your WordPress site - Increase your website traffic and get more followers">WordPress Social Plugins</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/share-buttons-for-amp/" title="Share Buttons for AMP">Accelerated Mobile Pages (AMP)</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/plugins" title="AddThis plugins for Tumblr, Blogger, Magento, Shopify and more!">CMS Plugin</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/integration" title="Email integrations with Hubspot, AWeber, MailChimp, and more!">Email Integration</a> </div> <div class="footer__column"> <h4 class="footer__title">Learn</h4> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/free-website-tools" title="Free Website Tools">Why AddThis?</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/examples" title="See what AddThis will look like on your site">Examples</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/blog" title="News and updates from AddThis">Blog</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/academy" title="An ever-growing library of resources to help you become a better marketer online">Academy</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/support" title="Let us know how we can help">Support</a> </div> <div class="footer__column"> <h4 class="footer__title">About</h4> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/about" title="Learn more about who we are">About</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/careers" title="We're on a mission. Ready to join?">Careers</a> <a class="footer__link" href="/web/20201220221450/https://www.addthis.com/contact" title="Connect with us!">Contact Us</a> </div> </div> <div class="footer__copyright"> <p class="footer__copyright-p"> <a class="footer__copyright-link" href="https://web.archive.org/web/20201220221450/https://datacloudoptout.oracle.com/" target="_blank">Opt Out of Targeted Advertising</a> </p> <p class="footer__copyright-p"> <a class="footer__copyright-link" href="https://web.archive.org/web/20201220221450/http://www.oracle.com/legal/privacy/addthis-privacy-policy.html" target="_blank" title="Your privacy is important.">Privacy</a> <a class="footer__copyright-link" href="/web/20201220221450/https://www.addthis.com/privacy/terms-of-service" title="Terms of Service">Terms of Service</a> <div id="teconsent"></div> </p> <p class="footer__copyright-p"> <small class="footer__copyright-small">Copyright © 2020, Oracle and/or its affiliates. All rights reserved.<br> Oracle and Java are registered trademarks of Oracle and/or its affiliates.<br>Other names may be trademarks of their respective owners.</small> </p> <p> <a class="footer__link" href="https://web.archive.org/web/20201220221450/https://www.oracle.com/legal/privacy/privacy-choices.html" target="_blank" title="Do Not Sell My Personal Information">Do Not Sell My Personal Information</a> </p> </div> </footer> </div> </div> <script async="async" type="text/javascript" src="https://web.archive.org/web/20201220221450js_/https://www.oracle.com/assets/truste-oraclelib.js" crossorigin></script> <script async="async" type="text/javascript" src="//web.archive.org/web/20201220221450js_/https://consent.trustarc.com/notice?domain=addthis.com&c=teconsent&js=bb卢iceType=bb&text=true" crossorigin></script>  <script class="trustecm" trackertype="functional" type="text/plain" active-src="https://www.oracle.com/us/assets/metrics/ora_addthis.js" async></script>   <script class="trustecm" trackertype="functional" type="text/plain" active-src="//nexus.ensighten.com/choozle/11751/Bootstrap.js" async></script>  <script class="trustecm" trackertype="advertising" type="text/plain" active-src="https://s7.addthis.com/addthis_widget.js#pub=at_com" async></script> <script class="trustecm" trackertype="advertising" type="text/plain" active-src="/dietsite-assets/js/moat-ce6f9ddc30.js" async></script> <script class="trustecm" trackertype="advertising" type="text/plain" active-src="/dietsite-assets/js/eloqua-d3a2dd1af7.js" async></script> <script class="trustecm" trackertype="functional" type="text/plain" active-src="/dietsite-assets/js/lazysizes-300b16f1c1.min.js" defer></script> <script class="trustecm_done" trackertype="required" type="text/javascript" src="/web/20201220221450js_/https://www.addthis.com/dietsite-assets/js/site-b0011c573c.main.js" defer></script> </body> </html>

CINXE.COM

AddThis Tools Examples - See What AddThis Will Look Like On Your Site - AddThis