Clap button · open source · one tag
A clap button for your website, the way Medium does it.
Readers clap as many times as they liked the post, up to a limit you set. Each clap fills the icon a little more, and the count is kept for every page on its own. It works on any site that can take a script tag: a static blog, WordPress, Ghost, or a React app.
Clap for this page. Up to ten times.
Each clap is counted on the server, and the tenth fills the icon. Reload: your claps are still counted, because the limit is kept on the server, not in your browser.
No instance connected
This copy of the page is not connected to a server, so the demo is off.
Add the clap button
Sign in with GitHub, add your site and create a button. You get a key starting with
pk_. Put this where the claps should appear, at the end of your post
template:
<script src="https://appreciate-button.com/widget.js" data-key="pk_YOUR_BUTTON_KEY" async></script>One button covers the whole blog: claps are counted per page (its address without the query string), so every post gets its own count without setting anything up. The guides show exactly where the tag goes on each platform.
How claps work here
- Several claps per reader. Ten by default, anything from 1 to 1,000 per button. At one it is a plain like button.
- The limit holds. Readers are told apart by a keyed hash of their IP address and browser, never stored as is. Clearing cookies or storage does not give more claps.
- No cookies, no accounts, no tracking. Nothing to put in a cookie banner.
- Your icon. A heart by default, or any SVG you upload: a hand, a star, your logo. It starts gray and fills with colour from the bottom as the claps add up.
- Your data. Use the hosted instance, or run your own server with MySQL. The code is MIT licensed.
Coming from Medium?
Medium lets each reader clap up to 50 times, and only for stories on Medium. Here the claps live on your own site and the limit is yours to choose. How it compares to Medium claps.