Amazon affiliates and automated contextual snippets in Jekyll

Whenever I link to an Amazon product on this blog, I use an affiliate link through the Amazon Affiliate program. They pay me a nominal amount for the referral and it doesn’t cost my users anything. I don’t always add a disclaimer for these links, but when I do I often mention that “clicking this link helps support the site.” It turns out — as pointed out to me by a reader (thanks Jean) — you’re not supposed to do that. But there is a standard disclosure provided by Amazon that I’ll be including on this site from now on.

Here’s the fun part of the post (and from here on out it’s specifically for Jekyll bloggers): my Jekyll site will now automatically add the aforementioned disclaimer any time I use an Amazon affiliate link. This just takes a few steps, which I’ll cover briefly. If you want to implement something like this on a Jekyll site and run into any issues with my explanation, I’d be happy to offer more guidance if you want to contact me¹. I imagine it would be easy enough on other sites, and I’ve created WordPress plugins that do similar as well.

Detecting Amazon Links

I want the disclosure paragraph to automatically be included whenever I use an Amazon affiliate link, but not on posts where I don’t. The first thing I did was add a Liquid filter that can simply return true if any form of an affiliate link url is found in the post content. I added this to my own set of filters, but you can set up a new file in /plugins/ if you need to:

module MyLiquidFilters
  # Checks if the post contains amazon affiliate links
  def has_amazon(input)
    input =~ /(https:\/\/amzn.to|tag=brettterpstra-20|amazon.com\/shop\/ttscoff)/i ? true : false
  end

  Liquid::Template.register_filter self
end

This matches shortened links (amzn.to), links with my affiliate tag in the query parameters (tag=), and my storefront (/shop/). You’ll note two of the patterns in the regular expression are for things specific to me: brettterpstra-20 is my own affiliate tag, and /shop/ttscoff is my storefront. (And hey, because I just linked it, the disclosure will now show up on this post. Neat.) You’ll need to change those to your own tag and storefront, optionally removing the storefront match entirely if you don’t have one.

Add an Include Template

You could put the markup right into your article template, but I like to use includes because I actually use a bunch of different versions of this (I’ll show a few examples at the end). In _includes/amazon_affiliate.html, I have this (again, you’ll want to edit slightly to fit your own site):

<p class="disclosure">BrettTerpstra.com is a participant in the 
Amazon Services LLC Associates Program, an affiliate advertising 
program designed to provide a means to earn fees when linking to 
Amazon.com and affiliated sites.</p>

Just for reference, I use the following in my site styles. Obviously, personal taste.

p.disclosure {
  font-size: .75em;
  background: #efefef;
  padding: 1em;
  font-style: italic;
  border: dotted 3px #ccc;
  border-radius: 10px;
}

Adding to the Template

To put this all to use, I use the Liquid filter to conditionally include the HTML in my article.html template:

{% capture amazon %}{{ content | has_amazon }}{% endcapture %}
{% if amazon == 'true' %}{% include custom/amazon_affiliate.html %}{% endif %}

It passes the content of the post through the has_amazon filter I defined at the beginning and captures the result to a variable. If the post content contains a match for any part of the regex, “amazon” gets set to true. Then I can just use a Liquid conditional to include the affiliate disclosure HTML in the article body.

There’s likely a more succinct way to do this in Liquid, i.e. skipping the capture step, but that’s what I got to work…

Other Examples

I do similar things with various other conditions. Most of them use post tags or classes from my YAML headers to trigger other includes. For example:

• Web Excursions get a snippet at the top automatically when the YAML includes post_class: bookmarks:

  {% if page.post_class == 'bookmarks' %}
  {% include custom/excursions.html %}
  {% endif %}

  You can see this in action on any Web Excursions post. post_class is meta that I use to apply the icons to right of each title on the index pages.

• Tips from my Bash Fun series (series: Bash Fun in the YAML) get a snippet at the end pointing to Ryan Irelan’s video series:

  {% if page.series == 'Bash Fun' %}
  {% include custom/shelltricks.html %}
  {% endif %}

  You can see this on any post in that series. I have a whole custom Jekyll setup for doing post series that I might share that at some point. You’ll also note that the blog automatically includes other posts from the current post’s series at the end as part of that plugin.

• Similarly, posts with a ‘podcasting’ tag get a link to Aaron Dowd’s podcasting course:

  {% if page.tags contains 'podcasting' %}
  {% include custom/successful-podcasting.html %}
  {% endif %}

  See that happen on the last post where I actually talked about podcasting…

Between my custom meta, tags, and content filters, I can have my blog automatically take care of remembering to mention (or disclaim) certain things any time the context is appropriate. It’s worth a bit of extra hacking for the time saved by not having to keep a checklist for each post.

BrettTerpstra.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means to earn fees when linking to Amazon.com and affiliated sites.