Appreciate Button

Add a like button to a plain HTML page

One script tag, pasted where the button should appear. Nothing to install and nothing to build.

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.

Paste the tag

Put it at the end of the article, or wherever the button belongs:

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

The script draws the button right after itself. Each page gets its own count, taken from its address without the query string or fragment, so the same tag can go on every page.

Or place the element yourself

Load the script once, for example in the <head>, and put the element where you want it. This is also how to show several buttons on one page: give each a data-item so they count separately. 

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

<appreciate-button data-key="pk_YOUR_BUTTON_KEY"></appreciate-button>

Check it

Open the page in a browser. The button appears gray with a count of 0; click it and the count goes up. If it shows an error instead, the page's origin is missing from the button's allowed origins. Opening the file straight from disk (file://) does not work: serve it, for example with npx serve, and allow that address.