Appreciate Button

Add a like button to an Eleventy blog

In Eleventy, the button goes in the layout your posts use, so every post gets one with its own count.

Before you start: get a key

  1. Sign in with GitHub on the dashboard and add your site.
  2. Create a button. In its allowed origins, list every address your site is served from, one per line and without a path, such as https://example.com. Add the address you preview on locally too, exactly as the browser shows it. A page on an origin that is not listed cannot load the button, so nobody else can use your key.
  3. Copy the key. It starts with pk_. Below, it stands in as pk_YOUR_BUTTON_KEY.

1. Find the post layout

Layouts live in the includes folder, _includes/ by default. A post names its layout in its front matter (layout: layouts/post.njk), often through a directory data file such as posts/posts.json. The official base blog uses _includes/layouts/post.njk.

2. Add the tag after the content

{{ content | safe }}

<script src="https://appreciate-button.com/widget.js" data-key="pk_YOUR_BUTTON_KEY" async></script>

That is Nunjucks; in a Liquid layout the content line is {{ content }}. The tag is the same in every template language.

3. Check it

Run npx @11ty/eleventy --serve and open a post at http://localhost:8080, after adding that address to the button's allowed origins.