Appreciate Button

Add a like button to a Jekyll blog

GitHub Pages and other static hosts can't store a count, so Appreciate Button stores it. One tag in your post layout and every post has a button.

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. Open the post layout

Posts are rendered by _layouts/post.html. If your site has no such file, the layout comes from a theme gem such as Minima. Copy it into your site first: 

mkdir -p _layouts
cp "$(bundle info --path minima)/_layouts/post.html" _layouts/post.html

Replace minima with your theme's name. Jekyll uses your copy from then on.

2. Add the tag after the content

{{ content }}

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

3. Check it

Run bundle exec jekyll serve and open a post at http://127.0.0.1:4000. Allowed origins are compared exactly, so allow http://127.0.0.1:4000 as the browser shows it; localhost would be a different origin. On GitHub Pages, your live origin is https://<user>.github.io, or your custom domain.