CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Image Share Buttons - AddToAny</title> <meta name="description" content="Image 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:"Image 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>Image Share Buttons</h3> <div class="choose_platform_docs"> <a class="picon picon_website selected" href="/buttons/customize/image_sharing" title="Any website"></a> <a class="picon picon_wordpress" href="/buttons/customize/wordpress/image_sharing" title="WordPress"></a> <a class="picon picon_drupal" href="/buttons/customize/drupal/image_sharing" title="Drupal"></a> </div> <div class="notes_content"> <p>AddToAny for images enables image sharing to services, and automatically displays share buttons over images. Image sharing works in galleries, sliders, slideshows, lightboxes, carousels, and even on dynamically loaded images. You can choose to <a href="#share-images-only" title="You can opt to share image links if you don't have a dedicated page per image">share image links</a> instead of page links, which is useful when a site doesn't have a dedicated page per image.</p> <h4>Default Image Buttons</h4> <p>In a default setup, Pinterest and AddToAny share buttons are overlayed vertically in the upper-left corner of images that are at least 200 x 200 pixels, and not within <code><header></code> or <code><footer></code> elements.</p> <pre class="prettyprint for_www"> <script> <span class="dim_code">var a2a_config = a2a_config || {};</span> a2a_config.overlays = a2a_config.overlays || []; a2a_config.overlays.push({ showOn: 'visible', }); </script> <script defer src="https://static.addtoany.com/menu/page.js"></script> </pre> <p class="for_drupal">In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.</p> <p class="for_wordpress">In WordPress, add the following JavaScript code to your "Additional JavaScript" box in Settings > AddToAny.</p> <pre class="prettyprint for_drupal for_wordpress"> a2a_config.overlays.push({ services: ['pinterest', 'addtoany'], showOn: 'visible', }); </pre> <div class="button_demo">  <script> var a2a_config = a2a_config || {}; a2a_config.overlays = a2a_config.overlays || []; a2a_config.overlays.push({ services: ['pinterest', 'addtoany'], showOn: 'visible', target: 'img#image-sharing-example-default', }); </script> <script defer src="https://static.addtoany.com/menu/page.js"></script>  <img 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>Custom Image Sharing</h4> <p>You can customize services, styles, and positions by adding an object with optional properties to the <code>a2a_config.overlays</code> array as in the following example.</p> <pre class="prettyprint for_www"> <script> <span class="dim_code">var a2a_config = a2a_config || {};</span> a2a_config.overlays = a2a_config.overlays || []; a2a_config.overlays.push({ services: ['pinterest', 'houzz', 'tumblr', 'addtoany'], showOn: 'visible', size: '50', style: 'horizontal', position: 'top center', }); </script> <script defer src="https://static.addtoany.com/menu/page.js"></script> <img src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" height="291" width="440" alt="Dracaena cinnabari"> </pre> <pre class="prettyprint for_drupal for_wordpress"> a2a_config.overlays.push({ services: ['pinterest', 'houzz', 'tumblr', 'addtoany'], showOn: 'visible', size: '50', style: 'horizontal', position: 'top center', }); </pre> <p>The object accepts some optional properties: <code>services</code>, <code>showOn</code>, <code>size</code>, <code>style</code>, <code>position</code>, <code>target</code>, <code>useImage</code>, <code>html</code>.</p> <div class="button_demo">  <script> var a2a_config = a2a_config || {}; a2a_config.overlays = a2a_config.overlays || []; a2a_config.overlays.push({ services: ['pinterest', 'houzz', 'tumblr', 'addtoany'], showOn: 'visible', size: '50', style: 'horizontal', position: 'top center', target: 'img#image-sharing-example-full', }); </script> <script defer src="https://static.addtoany.com/menu/page.js"></script>  <img id="image-sharing-example-full" class="img_responsive" src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" height="291" width="440" alt="Dracaena cinnabari" style="margin:10px"> </div> <h4>Services</h4> <p>Choose which services appear on images by specifying <a href="/services/">service code names</a> in the <code>services</code> property.</p> <pre class="prettyprint"> <span class="dim_code">a2a_config.overlays.push({</span> services: [ 'pinterest', 'houzz', 'tumblr', 'addtoany', ] <span class="dim_code">});</span> </pre> <h4 id="show-always">Show Always</h4> <p>Always show the buttons on visible images. This option is compatible with most sites, but you can instead show the buttons <a href="#show-on-hover" title="Show share buttons over images on hover">on hover</a> if your site has any issues with this option.</p> <pre class="prettyprint"> <span class="dim_code">a2a_config.overlays.push({</span> showOn: 'visible', <span class="dim_code">});</span> </pre> <h4 id="show-on-hover">Show On Hover</h4> <p>Only show the buttons on hover on desktop, and on tap on mobile.</p> <pre class="prettyprint"> <span class="dim_code">a2a_config.overlays.push({</span> showOn: 'hover', <span class="dim_code">});</span> </pre> <h4>Size</h4> <p>Choose the size of the buttons.</p> <pre class="prettyprint"> <span class="dim_code">a2a_config.overlays.push({</span> size: 50, <span class="dim_code">});</span> </pre> <h4>Style</h4> <p>Set the buttons to be <code>vertical</code> (the default) or <code>horizontal</code>.</p> <pre class="prettyprint"> <span class="dim_code">a2a_config.overlays.push({</span> style: 'horizontal', <span class="dim_code">});</span> </pre> <h4>Position</h4> <p>Set the position of buttons by specifying the vertical and horizontal positions delimited by a space. For example, you can choose <code>top left</code> (the default), <code>center right</code>, <code>bottom center</code>, or <code>center center</code>. </p> <pre class="prettyprint"> <span class="dim_code">a2a_config.overlays.push({</span> position: 'top center', <span class="dim_code">});</span> </pre> <h4 id="share-images-only">Share Images Only</h4> <p>For social media and search engine optimization, AddToAny image sharing by default shares the URL of a <em>page</em> containing an image. You can opt to share the URL of an <em>image</em> instead of the page, which has some tradeoffs. A preview of the image will show on Facebook, for example, but Facebook will be linking to the image directly instead of one of your pages. Twitter won't show a preview image, but will link to the image directly.</p> <p>Instead of this option, AddToAny recommends having a page (with <a href="https://www.addtoany.com/ext/meta-tags/" title="Use HTML meta tags to set a page's preview image for a few major services">meta tags</a>) per image you want shared, but some sites are not setup that way so we provide the <code>useImage</code> option as a workaround.</p> <pre class="prettyprint"> <span class="dim_code">a2a_config.overlays.push({</span> useImage: true, <span class="dim_code">});</span> </pre> <h4>Custom HTML</h4> <p>For further customization, you can specify the exact HTML you want to use for your share buttons overlay. The <code>html</code> property overrides all properties outlined above except <code>position</code>. HTML must begin with <code>div.a2a_kit.a2a_overlay_style</code> as in the following example.</p> <pre class="prettyprint"> <span class="dim_code">a2a_config.overlays.push({</span> html: '<div class="a2a_kit a2a_kit_size_50 a2a_overlay_style a2a_vertical_style" data-a2a-icon-color="seashell,midnightblue"><a class="a2a_button_pinterest"></a><a class="a2a_button_facebook"></a></div>', <span class="dim_code">});</span> </pre> <h4>Specific Images</h4> <p class="for_www for_drupal">Target specific images by providing one or more <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors" target="_blank" rel="noopener">CSS selectors</a>. The following example matches <code><img></code> elements that have the <code>share-image</code> class name.</p> <pre class="prettyprint for_www for_drupal"> <span class="dim_code">a2a_config.overlays.push({</span> target: 'img.share-image', <span class="dim_code">});</span> </pre> <p class="for_wordpress">Target specific images by providing one or more <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors" target="_blank" rel="noopener">CSS selectors</a>. The following example matches <code><img></code> elements that have an ancestor element with the <code>share-image</code> class name.</p> <pre class="prettyprint for_wordpress"> <span class="dim_code">a2a_config.overlays.push({</span> target: '.share-image img', <span class="dim_code">});</span> </pre> <h4>Excluding Images</h4> <p>You can exclude images by setting an image's <code>data-a2a-overlay</code> attribute to <code>false</code>.</p> <pre class="prettyprint"> <img src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" <span class="highlight">data-a2a-overlay="false"</span> height="291" width="440" alt="Dracaena cinnabari"> </pre> <h4>Image Title</h4> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt" target="_blank" rel="noopener"><code>alt</code> attribute</a> of an image is used for the shared title when specified, otherwise the current page's title is used.</p> <pre class="prettyprint"> <img src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" <span class="highlight">alt="Dracaena cinnabari"</span> height="291" width="440"> </pre> <h4>Image Description URL</h4> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-longdesc" target="_blank" rel="noopener"><code>longdesc</code> attribute</a> of an image is used for the shared URL when specified, otherwise the current page's URL is used.</p> <pre class="prettyprint"> <img src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" alt="Dracaena cinnabari" <span class="highlight">longdesc="https://www.example.com/dracaena-cinnabari.html#image-caption"</span> height="291" width="440"> </pre> </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>