Appreciate Button

Add a like button to an Astro blog

Put the script and the element in the layout your posts use. The button is a plain custom element, so it needs no integration or client directive.

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

In the official blog template it is src/layouts/BlogPost.astro; in your project, it is the layout your post pages or content collection entries render with.

2. Add the script and the element after the slot

<slot />

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

is:inline tells Astro to leave the script as it is instead of bundling it. With view transitions, the button notices the navigation and loads the new post's count by itself; loading the script again is harmless.

3. Check it

Run npm run dev and open a post at http://localhost:4321, after adding that address to the button's allowed origins.