CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Floating Share Buttons - AddToAny</title> <meta name="description" content="Floating Share Buttons"> <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:false,topic:"Floating Share Buttons",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><a href="/buttons/customize/">Sharing Customization</a></h2> <div class="notes"> <h3>Floating Share Buttons</h3> <div class="choose_platform_docs"> <a class="picon picon_website selected" href="/buttons/customize/floating_share_buttons" title="Any website"></a> <a class="picon picon_wordpress" href="/buttons/customize/wordpress/floating_share_buttons" title="WordPress"></a> </div> <div class="notes_content"> <p>AddToAny floating share buttons are available in vertical & horizontal fixed positions, and customizable for mobile, desktop, and all kinds of site layouts.</p> <h4>Vertical Share Bar</h4> <p>You can position floating vertical share buttons that are fixed alongside your site's content (like a sidebar), or docked to the far left or far right side of the user's screen.</p> <p class="for_www">The following example displays a vertical share bar that is <em>docked to the left side</em> of the user's screen, <code>150</code> pixels from the top.</p> <pre class="prettyprint for_www"> <div class="a2a_kit a2a_kit_size_32 a2a_floating_style <span class="highlight">a2a_vertical_style</span>" style="<span class="highlight">left:0px; top:150px;</span>"> <a class="a2a_button_facebook"></a> <a class="a2a_button_mastodon"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script defer src="https://static.addtoany.com/menu/page.js"></script> </pre> <p class="for_wordpress">In WordPress, go to Settings > AddToAny > Floating to enable and configure your vertical share bar.</p> <p class="for_www">The following example displays a vertical share bar that is <em>fixed relative to a parent element</em> (usually the site's main content), <code>150</code> pixels from the top of the page, and offset from the left of the parent element by <code>100</code> pixels. The parent element should have a specified width, and the vertical share bar code should placed as a descendant of that element as in following example. The current page displays this style on devices with a wide enough screen.</p> <pre class="prettyprint for_www"> <span class="dim_code"><div class="example_parent_element" style="margin:0 auto; width:900px;"></span> <div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="margin-left:<span class="highlight">-100</span>px; top:<span class="highlight">150</span>px;"> <a class="a2a_button_facebook"></a> <a class="a2a_button_mastodon"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script defer src="https://static.addtoany.com/menu/page.js"></script> <span class="dim_code"></div></span> </pre> <h4>Horizontal Share Bar</h4> <p>You can position horizontal share buttons in a "floating bar" that is usually best docked to the bottom of the user's screen for mobile devices.</p> <p class="for_www">The following example displays a horizontal share bar that is <em>docked to the bottom</em> of the user's screen on the right side. The current page uses this style.</p> <pre class="prettyprint for_www"> <div class="a2a_kit a2a_kit_size_32 a2a_floating_style <span class="highlight">a2a_default_style</span>" style="<span class="highlight">bottom:0px; right:0px;</span>"> <a class="a2a_button_facebook"></a> <a class="a2a_button_mastodon"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script defer src="https://static.addtoany.com/menu/page.js"></script> </pre> <p class="for_wordpress">In WordPress, go to Settings > AddToAny > Floating to enable and configure your horizontal share bar.</p> <p class="for_www">The following example displays a <em>center-aligned</em> horizontal share bar that is docked to the bottom of the user's screen.</p> <pre class="prettyprint for_www"> <div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="bottom:0px; <span class="highlight">left:50%; transform:translateX(-50%);</span>"> <a class="a2a_button_facebook"></a> <a class="a2a_button_mastodon"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script defer src="https://static.addtoany.com/menu/page.js"></script> </pre> <h4 class="for_www">Responsive Floating Share Buttons</h4> <p class="for_www">Using CSS media queries, you can specify mobile/desktop breakpoints for responsive floating share buttons. For example, it is common to hide a "docked" vertical share bar on the smaller screens of mobile and tablet devices.</p> <pre class="prettyprint for_www"> <style> /* Hide AddToAny vertical share bar when screen is less than 981 pixels wide */ @media screen and (max-width: 980px) { .a2a_floating_style.a2a_vertical_style { display: none; } } </style> </pre> <h4 class="for_www">Hide & Show On Scroll</h4> <p class="for_www">With the <code>data-a2a-scroll-show</code> attribute, you can hide a floating bar until the page has been scrolled down a specific number of pixels, such as past a header region.</p> <pre class="prettyprint for_www"> <div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" <span class="highlight">data-a2a-scroll-show="100"</span> style="left:0px; top:150px;"> </pre> <p class="for_www">You can also hide a floating bar when the page is scrolled down to a footer region by specifying a second value separated by a comma. This second value is the number of pixels from the <em>bottom</em> of the page.</p> <pre class="prettyprint for_www"> <div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" data-a2a-scroll-show="0<span class="highlight">,60</span>" style="bottom:0px; right:0px;"> </pre>  <script defer src="https://static.addtoany.com/menu/page.js"></script>   <div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="margin-left:-100px; top:150px;"> <a class="a2a_button_facebook"></a> <a class="a2a_button_mastodon"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div>   <div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="bottom:0px; right:0px;" data-a2a-scroll-show="0,40"> <a class="a2a_button_facebook"></a> <a class="a2a_button_mastodon"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </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>