Blog

Adding Share Buttons to Your Emails (Or When You Can’t Use JavaScript)

email-icon

There are some instances where JavaScript won’t work, such as email and with some content management systems. Yet we have a simple solution that can still get sharing buttons onto your next email campaign.

Basic Usage

To get our JavaScript-free buttons into your code, grab our newsletter code, and enter the URL you’d like to share. Our page will generate the code for you to add a Facebook, Twitter, and AddThis button for your site or email.

Configuring the email newsletter buttons

Please note that you can’t share the email that the buttons are in unless you have a web-accessible version of it. Also, like with our other tools, Facebook uses Open Graph tags so you’ll need to have those on the page you’re sharing (the link you’re including) to make sure Facebook displays the right title, image, and description when it’s shared.

Advanced Usage

If you want more than three buttons or if you want different services, you can read the pattern in the code to get it to do that. Let’s take a look at the code the above screenshot generates:

<!-- AddThis Button BEGIN -->
<a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&amp;url=http%3A%2F%2Fwww.example.com%2F&amp;pubid=ra-4da371d82c643e7b" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" border="0" alt="Facebook" /></a>
<a href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?pco=tbx32nj-1.0&amp;url=http%3A%2F%2Fwww.example.com%2F&amp;pubid=ra-4da371d82c643e7b" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/twitter.png" border="0" alt="Twitter" /></a>
<a href="http://www.addthis.com/bookmark.php?source=tbx32nj-1.0&amp;=300&amp;pubid=ra-4da371d82c643e7b&amp;url=http%3A%2F%2Fwww.example.com%2F " target="_blank"  ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/more.png" border="0" alt="More..." /></a>
<!-- AddThis Button END -->

See the pattern? The links for the Twitter and Facebook buttons all have /forward/ in them. So if we, for instance, wanted to add a Reddit button the code would look like this:

<a href="http://api.addthis.com/oexchange/0.8/forward/reddit/offer?pco=tbx32nj-1.0&amp;url=http%3A%2F%2Fwww.example.com%2F&amp;pubid=ra-4da371d82c643e7b" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/reddit.png" border="0" alt="Twitter" /></a>

And the button would look like this:

Reddit

You can find a complete list of the available services on our services list. Note that this will only work with our native services. Third-party buttons like Facebook Like and Pinterest Pinit require JavaScript which, as we know, can’t run in an email.

Custom Images

Because our email newsletter buttons follow a pattern using your own images is very easy. All you need to do is replace the src attribute in the <img> tag with the absolute URL of your image. The absolute URL is the full URL of an asset online, including the protocol (http), the domain (www.example.com), and the path (/image.png).

So, if you had your own Facebook button at http://www.example.com/facebook_button.png, the code to use that button instead of our own would be:

<a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&amp;url=http%3A%2F%2Fwww.example.com%2F&amp;pubid=ra-4da371d82c643e7b" target="_blank" ><img src="http://www.example.com/facebook_button.png" border="0" alt="Facebook" /></a>

Benefits of Using Email Newsletter Code

With any email campaign, you’re probably keen on understanding what’s performing well, and what’s driving the results you’re looking for. As with any AddThis tool, the email newsletter code is something you can easily track in your AddThis analytics. Clearly see what email campaign is driving more fans and followers to your social profiles!

Use JavaScript When You Can

When you can’t use JavaScript with your content management system, such as Google Pages, or email delivery services, the email newsletter option would be a great fit! But when you can use JavaScript, you’ll reap more of the benefits AddThis tools has to offer. Check out some of the latest website widgets we have for you to choose from.

If you’ve got any questions we’re here to help at help@addthis.com

  • bikan0e

    Cool workaround. Nice!

  • whoa, very good idea! Is it working good with gmail?

  • GRACIAS

  • gracias

  • Vitaly Shadov

    Working good with gmail. I like it.

  • I don’t think it’s working with Gmail. You can’t add code in the mail or I don’t know how it’s possible.

  • Hi Pawer, the examples above are mostly for HTML emails (for example, newsletters) or CMS where you can’t use JavaScript. It won’t work in the example you set above.

  • it’s so great point for my marketing strategies.Many thank to AddThis Team !

  • Hey This is great but what if you want the buttons to be follow buttons and not share buttons?

  • The examples above are for when you’re coding an email to send through a service such as MailChimp. But once they arrive in someone’s Gmail inbox, the buttons will look great!

  • The examples above are for when you’re coding an email to send through a service such as MailChimp. But once they arrive in someone’s Gmail inbox, the buttons will look great!

  • Our follow buttons have JS, so unfortunately they won’t work in email.

  • Our follow buttons have JS, so unfortunately they won’t work in email.

  • Any plans to support the follow buttons in a similar method?

  • Yes! We’re planning on it though no date’s been set just yet.

  • anwar waqar alvi anwar waqar a

    If you are going to add follow button as well as share button to gmail will be a great idea to identify the dedtination.

  • Jason Au

    I couldn’t find the options to grab the code as mentioned in the above article?

  • Good catch, Jason. We recently moved that option to this page: support.addthis.com/customer/portal/articles/1586082-email-newsletter-buttons#.U5i1UK1dWKG We’ll be updating this blog post in a sec. Thanks for the heads up!

  • There is a way! Here are our Newsletter Sharing Buttons that’ll let you do that: https://www.addthis.com/dashboard#gallery/atblog/tools/newsletter-share

  • roger’d

    That’s great, thank you very much for your help! You guys rock!

  • No, YOU rock! :) We’re happy to help!

  • No, YOU rock! :) We’re happy to help!

  • wow wow, Adding Share Button with email. I think very happy. Nice!