CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Templates & Endpoint Parameters - AddToAny</title> <meta name="description" content="Templates & Endpoint Parameters"> <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:"Templates & Endpoint Parameters",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>Templates & Endpoint Parameters</h3> <div class="choose_platform_docs"> <a class="picon picon_website selected" href="/buttons/customize/templates" title="Any website"></a> <a class="picon picon_wordpress" href="/buttons/customize/wordpress/templates" title="WordPress"></a> <a class="picon picon_drupal" href="/buttons/customize/drupal/templates" title="Drupal"></a> </div> <div class="notes_content"> <p>With AddToAny templates, you can you can change the default text sent to many services, and you can add or override any querystring parameter for any service endpoint URL.</p> <h4>Template Examples</h4> <pre class="prettyprint for_www"> <span class="dim"><div class="a2a_kit a2a_kit_size_32 a2a_default_style"> <a class="a2a_button_email"></a> <a class="a2a_button_facebook"></a> <a class="a2a_button_sms"></a> <a class="a2a_button_whatsapp"></a> <a class="a2a_button_x"></a> </div> <script> var a2a_config = a2a_config || {}; a2a_config.templates = a2a_config.templates || {}; </span> a2a_config.templates.email = { subject: "Check this out: ${title}", body: "Click the link:\n${link}", }; a2a_config.templates.facebook = { app_id: "5303202981", redirect_uri: "https://static.addtoany.com/menu/thanks.html", }; a2a_config.templates.sms = { body: "Check this out: ${title} ${link}", }; a2a_config.templates.whatsapp = { phone: "15551234567", text: "I'm interested in ${title} posted here: ${link}", }; a2a_config.templates.x = { text: "Reading: ${title} ${link}", }; <span class="dim"></script> <script defer src="https://static.addtoany.com/menu/page.js"></script></span> </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.templates.email = { subject: "Check this out: ${title}", body: "Click the link:\n${link}", }; a2a_config.templates.facebook = { app_id: "5303202981", redirect_uri: "https://static.addtoany.com/menu/thanks.html", }; a2a_config.templates.sms = { body: "Check this out: ${title} ${link}", }; a2a_config.templates.whatsapp = { phone: "15551234567", text: "I'm interested in ${title} posted here: ${link}", }; a2a_config.templates.x = { text: "Reading: ${title} ${link}", }; </pre> <p>Use the <code>${link}</code> and <code>${title}</code> placeholders to designate where you want the shared link and title to be placed.</p> <p><strong>Tip</strong>: You can use <a href="/buttons/customize/events" title="Modify the share">AddToAny events</a> to modify AddToAny templates during the <em>share</em> event.</p> <div class="button_demo">  <div class="a2a_kit a2a_kit_size_32 a2a_default_style"> <a class="a2a_button_email"></a> <a class="a2a_button_facebook"></a> <a class="a2a_button_sms"></a> <a class="a2a_button_whatsapp"></a> <a class="a2a_button_x"></a> </div> <script> var a2a_config = a2a_config || {}; a2a_config.templates = a2a_config.templates || {}; a2a_config.templates.email = { subject: "Check this out: ${title}", body: "Click the link:\n${link}", }; a2a_config.templates.facebook = { app_id: "5303202981", redirect_uri: "https://static.addtoany.com/menu/thanks.html", }; a2a_config.templates.sms = { body: "Check this out: ${title} ${link}", }; a2a_config.templates.whatsapp = { phone: "15551234567", text: "I'm interested in ${title} posted here: ${link}", }; a2a_config.templates.x = { text: "Reading: ${title} ${link}", }; </script> <script defer src="https://static.addtoany.com/menu/page.js"></script>  </div> <br> <h4>Parameter Examples</h4> <p id="facebook">For Facebook, you can set an App ID and a post-share URL by customizing <a href="https://developers.facebook.com/docs/sharing/reference/share-dialog#params" target="_blank" rel="noopener">Facebook's endpoint parameters</a>.</p> <p><code>https://www.facebook.com/dialog/share?<span class="highlight">app_id</span>=<span style="padding-left:4px;padding-right:4px">…</span>&href=<span style="padding-left:4px;padding-right:4px">…</span>&<span class="highlight">redirect_uri</span>=<span style="padding-left:4px;padding-right:4px">…</span></code></p> <pre class="prettyprint"> a2a_config.templates.facebook = { <span class="highlight">app_id</span>: "5303202981", <span class="highlight">redirect_uri</span>: "", quote: "", }; </pre> <p>Facebook's <code>app_id</code> can be set to empty to use Facebook's old endpoint, which has less features and different parameters, but may support some publisher use cases such as removing Facebook's app attribution.</p> <p>Facebook's <code>redirect_uri</code> can be set to empty, or to a URL from one of the App Domains set for your Facebook app.</p> <p>Facebook's <code>quote</code> set to empty can enable a large preview image when supplied, and can enable the "Boost Post" button on a managed Facebook Page.</p> </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>