Mar 19, 2012

Add Read Later buttons to your newsletter

Our customers are always coming up with interesting ways to make email newsletters even better. That’s one of the many reasons we love what we do, and why we weren’t surprised when we saw The Do Lectures doing something especially clever in their newsletter.

You may remember The Do Lectures from our Customer Love series a few months ago. They host an annual gathering in Cardigan, Wales, where interesting people share stories about the work they’re doing and inspire others to act on their passions. They also publish Kindling, a weekly newsletter with links to the most inspiring articles, videos, ideas, and talks from the past week.

Take a look at a recent issue of Kindling. You’ll notice Read Later buttons alongside selected articles, so users can easily send the links to Instapaper. If you’re not familiar with Instapaper, it’s a service that lets you bookmark content on the Internet and save it for later. It’s handy when you don’t have time to read something at the moment, but don’t want to forget about it. Read Later buttons make content more accessible, so your readers can digest it whenever and however they want.

How can you add Read Later buttons to your own newsletters? Glad you asked! But first, a caveat. This will only work if you’re linking to web pages that already exist on the internet. You can’t, for example, create a Read Later button for the newsletter you are about to send out because the archive URL doesn’t exist yet. Cool? Okay, onward.

To get started, you’ll need to create a link to the URL you want people to be able to Read Later. It needs to be in the following format. Title and description are optional.

http://www.instapaper.com/hello2?url=___&title=___&description=___

Each value you supply (url, title, and description) must be URL-encoded. If you’re not sure what this means, don’t worry. You can use a free tool like Eric Meyer’s URL Decoder/Encoder to do this for you.

Let’s go through an example of how you might create an Instapaper-friendly URL. Say I want a Read Later button for our MailChimp Mobile guide. Here’s the normal URL before I encode it:

http://mailchimp.com/resources/guides/html/mailchimp-mobile/

Using Eric Meyer’s URL Decoder/Encoder, I can encode it and add it to the Instapaper-friendly url like so:

http://www.instapaper.com/hello2?url=http%3A%2F%2Fmailchimp.com%2Fresources%2Fguides%2Fhtml%2Fmailchimp-mobile%2F

The Decoder/Encoder also works for regular sentences, so you can use it to URL-encode the title and description as well.

Now that our Instapaper-friendly URL is ready to go, let’s test it. Here’s what the source code looks like:

<a href="http://www.instapaper.com/hello2?url=http%3A%2F%2Fmailchimp.com%2Fresources%2Fguides%2Fhtml%2Fmailchimp-mobile%2F&title=MailChimp%20Resources%3A%20MailChimp%20Mobile%0A&description=Tips%20on%20enhancing%20your%20MailChimp%20mobile%20experience">Read Later</a>

And here’s how the link looks in my email newsletter:

When I click the Read Later link, I’m redirected to Instapaper where I can choose to save the URL to my account.

Once saved, it will appear in my reading queue. Clicking the title in Instapaper takes me back to the MailChimp Mobile guide on MailChimp.com.

Now that the basic functionality is working, let’s make it look like a button so it stands out from all the other links. For various reasons I won’t go into, styling elements in HTML email templates is tricky. Our resident email-template coding genius cooked this up for you so it’ll work across email clients.

<table border="0" cellpadding="10" cellspacing="0" style="-webkit-border-radius:8px; -moz-border-radius:8px; background-color:#f8f8f8; border:1px solid #aaaaaa; border-radius:8px;">
  <tr>
    <td align="center" valign="middle" style="padding-top:3px; padding-bottom:2px;">
      <a href="http://www.instapaper.com/hello2?url=http%3A%2F%2Fmailchimp.com%2Fresources%2Fguides%2Fhtml%2Fmailchimp-mobile%2F&title=MailChimp%20Resources%3A%20MailChimp%20Mobile%0A&description=Tips%20on%20enhancing%20your%20MailChimp%20mobile%20experience" style="font-family:Helvetica; font-weight:bold; font-size:11px; color:#444444; text-decoration:none;" target="_blank">Read Later</a>
    </td>
  </tr>
</table>

Here’s the final product. It’s a live link so clicking it will add MailChimp’s mobile guide to your Instapaper queue.

Read Later

Now that you know how to add a Read Later button, what other clever ideas have you wanted to try in your newsletter? Are you doing something creative with your content? Let us know in the comments. We’d love to hear about it.