CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Share Buttons Examples & Documentation - AddToAny</title> <meta name="description" content="Customize your share buttons to do exactly what you need, and take advantage of powerful AddToAny features. AddToAny is made for customization."> <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" /> <link rel="stylesheet" href="https://static.addtoany.com/css/prettify-mar-2013.css" media="print" onload="this.onload=null;this.media='all'"> <meta property="og:description" content="Get sharing buttons for your website visitors to share content on any social media service. AddToAny is the universal sharing platform for websites and apps."> <meta property="og:image" content="https://static.addtoany.com/images/icon-200-3.png"> <meta property="og:title" content="AddToAny Share Buttons: Custom Sharing On Your Website"> <meta property="og:url" content="https://www.addtoany.com/"> <style> .category { min-height: 340px; } .category h4 { margin: 22px 0 12px 0; } .customization_options{text-align:left} ul.customization_options{list-style:none;margin:0;padding:0} ul.customization_options li{margin:0;padding:0} ul.customization_options li a{display:block;padding:8px 0} .choose_platform_docs { background-color: #f4f5f6; border: 1px solid transparent; border-bottom-color: #b1b1b1; border-radius: 0 0 0 10px; line-height: 0; position: absolute; right: 0; top: 0; } .choose_platform_docs a.picon { background-position: 12px 50%; background-repeat: no-repeat; background-size: 36px; border: 1px solid transparent; border-bottom: none; border-radius: 10px 10px 0 0; display: inline-block; height: 60px; margin: -1px; width: 60px; } .choose_platform_docs a.picon:hover, .choose_platform_docs a.picon.selected { background-color: #ffffff; border-color: #b1b1b1; } .choose_platform_docs a.picon:first-child { background-position: 22px 50%; border-left-color: #b1b1b1; border-radius: 0 10px 0 10px; width: 70px; } .choose_platform_docs a.picon:first-child:hover, .choose_platform_docs a.picon.selected:first-child { border-left: none; } .for_cms, .for_wordpress, .for_drupal { display: none; } @media (max-width: 800px) { .main > h2 { margin-top: 40px; } .choose_platform_docs { border-radius: 0 0 0 4px; } .choose_platform_docs a.picon { background-position: 6px 50%; background-size: 18px; border-radius: 4px 4px 0 0; height: 30px; width: 30px; } .choose_platform_docs a.picon:first-child { background-position: 11px 50%; border-radius: 0 4px 0 4px; width: 35px; } .notes_content { margin: 0 10px; } .category { min-height: auto; } } .for_www { display: block; } </style> <script>var platform_icons=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0],href=e[o&&n?0:o?1:2],sheets=t.document.styleSheets;r.rel="stylesheet",r.href=href,r.media="only x",a.parentNode.insertBefore(r,a);function toggleMedia(){var defined;for(var i=0;i<sheets.length;i++){if(sheets[i].href&&sheets[i].href.indexOf(href)>-1){defined=true;}} if(defined){r.media="all";} else{setTimeout(toggleMedia);}} toggleMedia();},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}}; platform_icons([ "https://static.addtoany.com/css/picons.2.svg.css", "https://static.addtoany.com/css/picons.2.png.css", "https://static.addtoany.com/css/picons.2.old.css" ]);</script> <noscript><link href="https://static.addtoany.com/css/picons.2.old.css" rel="stylesheet"></noscript><script> var customize_ui={is_customize_index:true,platforms:{"drupal":["Drupal","Drupal module"],"wordpress":["WordPress","WordPress plugin"]}};!function(t){function e(){var e=document,o=t.is_customize_index,n=t.topic||"",i=t.platforms,r=function(t,e){return!!i[t]&&(void 0!==e?i[t][e]:t)},c=function(t){var i=r(t),c=r(t,0)||"",a=i||"";i?(h("none",e.querySelectorAll(".for_www, .for_wordpress, .for_drupal")),h("block",e.querySelectorAll(".for_cms, .for_"+t))):(h("none",e.querySelectorAll(".for_cms, .for_wordpress, .for_drupal")),h("block",e.querySelectorAll(".for_www")));var s=e.querySelector(".choose_platform_docs a.picon_"+(i||"website"));if(s.classList.add("selected"),m(s.parentNode.children,(function(t){t!==s&&t.classList.remove("selected")})),o){r(location.href.split("/")[5])?(m(e.querySelectorAll("ul.customization_options li.for_"+t+" a"),(function(e){e.setAttribute("href",t+"/"+e.getAttribute("href").split("/").pop())})),e.querySelector(".main > h2").innerHTML=c+" Sharing Customization",document.title=c+" Share Buttons Examples & Documentation - AddToAny"):(m(e.querySelectorAll("ul.customization_options li a"),(function(t){t.setAttribute("href",t.getAttribute("href").split("/").pop())})),e.querySelector(".main > h2").innerHTML="Sharing Customization",document.title="Share Buttons Examples & Documentation - AddToAny")}else{var u=e.querySelector(".main > h2 > a");u.innerHTML=c+" Sharing Customization",u.setAttribute("href","/buttons/customize/"+a),document.title=n+(i?" - "+c+" Sharing":"")+" - AddToAny"}d=t},a=!!history.state,s=location.href,u=s.split("/"),l=r(u[5])||"www",d=l;function f(t){var e=window.matchMedia("(prefers-reduced-motion: reduce)");document.startViewTransition&&!e.matches?document.startViewTransition(t):t()}function m(t,e){[].forEach.call(t,e)}function h(t,e){m(e,(function(e){e.style.display=t}))}window.addEventListener("popstate",(function(t){var e=location.href,o=!a&&e==s,n=-1!=e.indexOf("#");if(a=!0,!o&&!n){var i=t.state;f(i?function(){c(i)}:function(){c(l)})}})),m(e.querySelectorAll(".choose_platform_docs a"),(function(t){t.addEventListener("click",(function(t){var e=this;if(e.classList.add("selected"),void 0!==history.pushState){t.preventDefault();var o=e.getAttribute("href"),n=o.split("/"),i=r(n[3])||"www",a=e.getAttribute("title");i!=d&&(history.pushState(i,a,o),f((function(){c(i)})))}}))}))}"loading"!=document.readyState?e():document.addEventListener("DOMContentLoaded",(function(){e()}))}(customize_ui)</script> </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 current_page" 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>Sharing Customization</h2> <div class="notes"> <h3>Customize your share buttons</h3> <div class="choose_platform_docs"> <a class="picon picon_website selected" href="/buttons/customize/" title="Any website" data-preload="no"></a> <a class="picon picon_wordpress" href="/buttons/customize/wordpress" title="WordPress" data-preload="no"></a> <a class="picon picon_drupal" href="/buttons/customize/drupal" title="Drupal" data-preload="no"></a> </div> <div class="notes_content container_12 columns_3"> <div class="category grid_4"> <h4>Popular Features</h4> <ul class="customization_options"> <li class="for_www for_wordpress"><a href="floating_share_buttons">Floating Share Buttons</a></li><li class="for_www for_drupal for_wordpress"><a href="image_sharing">Image Share Buttons</a></li><li class="for_www for_drupal for_wordpress"><a href="follow_buttons">Follow Buttons</a></li><li class="for_www for_drupal for_wordpress"><a href="share_counters">Share Counters</a></li><li class="for_www for_drupal for_wordpress"><a href="share_count_recovery">Share Count Recovery</a></li> </ul> </div> <div class="category grid_4"> <h4>Custom Buttons</h4> <ul class="customization_options"> <li class="for_www for_drupal for_wordpress"><a href="standalone_services">Default Share Buttons</a></li><li class="for_www for_drupal for_wordpress"><a href="icon_color">Custom Color Buttons</a></li><li class="for_www for_drupal for_wordpress"><a href="custom_icons">Custom Image Buttons</a></li><li class="for_www for_wordpress"><a href="center_align_buttons">Center-Align Buttons</a></li><li class="for_www for_drupal for_wordpress"><a href="square_icons">Square Buttons</a></li> </ul> </div> <div class="category grid_4"> <h4>Full Control</h4> <ul class="customization_options"> <li class="for_www for_drupal for_wordpress"><a href="events">Share Event Handling & Modifying</a></li><li class="for_www for_drupal for_wordpress"><a href="templates">Templates & Endpoint Parameters</a></li><li class="for_www for_drupal for_wordpress"><a href="link_tracking">Link Tracking & URL Shorteners</a></li><li class="for_www for_drupal for_wordpress"><a href="asynchronous_loading">Asynchronous Loading</a></li><li class="for_www for_drupal for_wordpress"><a href="translation_localization">Translation & Localization</a></li><li class="for_www for_wordpress"><a href="host_cache">Self-host & Cache Script</a></li> </ul> </div> <div class="category grid_4"> <h4>Official Buttons</h4> <ul class="customization_options"> <li class="for_www for_drupal for_wordpress"><a href="facebook_like_button">Facebook Like Button</a></li><li class="for_www for_drupal for_wordpress"><a href="twitter_tweet_button">Twitter Tweet Button</a></li><li class="for_www for_drupal for_wordpress"><a href="pinterest_pin_it_button">Pinterest Save Button</a></li><li class="for_www for_drupal"><a href="linkedin_share_button">LinkedIn Share Button</a></li> </ul> </div> <div class="category grid_4"> <h4>Universal Menu</h4> <ul class="customization_options"> <li class="for_www for_drupal for_wordpress"><a href="prioritize_services">Prioritize Services</a></li><li class="for_www for_drupal for_wordpress"><a href="add_services">Custom Services</a></li><li class="for_www for_drupal for_wordpress"><a href="remove_services">Exclude Services</a></li><li class="for_www for_drupal for_wordpress"><a href="menu_icon_color">Custom Color Menu Buttons</a></li><li class="for_www for_drupal for_wordpress"><a href="css_style_colors">Menu Style & Colors</a></li><li class="for_www for_drupal for_wordpress"><a href="no_rounded_corners">Square Corners</a></li> </ul> </div> <div class="category grid_4"> <h4>Mini Menu</h4> <ul class="customization_options"> <li class="for_www for_drupal for_wordpress"><a href="on_click">Display Mini Menu on Click</a></li><li class="for_www for_drupal for_wordpress"><a href="on_hover">Display Mini Menu on Hover</a></li><li class="for_www for_drupal for_wordpress"><a href="hover_delay">Display Mini Menu on Hover Delay</a></li><li class="for_www for_drupal for_wordpress"><a href="number_services">Number of Services</a></li><li class="for_www for_drupal for_wordpress"><a href="orientation">Mini Menu Orientation</a></li><li class="for_www"><a href="static_menu">Static Mini Menu</a></li> </ul> </div> <div class="category grid_4"> <h4>Sharing Examples</h4> <ul class="customization_options"> <li class="for_www for_drupal for_wordpress"><a href="page_url_title">URL & Title to Share</a></li><li class="for_www for_drupal for_wordpress"><a href="thanks">Thanks for Sharing</a></li><li class="for_www for_drupal for_wordpress"><a href="twitter_message">Twitter Message</a></li><li class="for_www for_drupal for_wordpress"><a href="email_template">Email Template</a></li> </ul> </div> <div class="category grid_4"> <h4 class="for_www">Single Instance</h4> <ul class="customization_options"> <li class="for_www"><a href="single_button_customize">Single - Customize</a></li><li class="for_www"><a href="single_button_current_page">Single - Share Current Page</a></li><li class="for_www"><a href="single_button_specific_page">Single - Share Specific Page</a></li> </ul> </div> <div class="category grid_4 clearfix"> <h4 class="for_www">Multiple Instances</h4> <ul class="customization_options"> <li class="for_www"><a href="multiple_buttons_customize">Multiple - Customize</a></li><li class="for_www"><a href="multiple_buttons_current_page">Multiple - Share Current Page</a></li><li class="for_www"><a href="multiple_buttons_different_pages">Multiple - Share Different Pages</a></li> </ul> </div> </div> </div> <script defer src="https://static.addtoany.com/menu/page.js"></script> <script src="/js/prettify-mar-2013/prettify.js"></script> <script>prettyPrint()</script> </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></body> </html>