A zero-configuration button for adding
applause / claps to web pages and blog-posts
By Colin Eberhardt
|
$ yarn add applause-button
Alternatively, you can download the distribution files, or serve them, from CDN:
https://unpkg.com/applause-button/dist/applause-button.js
https://unpkg.com/applause-button/dist/applause-button.css
Include the Applause button JavaScript and stylesheet in your page, then add the applause-button
element,
and you're good to go!
<head>
<!-- add the button style & script -->
<link rel="stylesheet" href="applause-button.css" />
<script src="applause-button.js"></script>
</head>
<body>
<!-- add the button! -->
<applause-button style="width: 58px; height: 58px;"/>
</body>
The applause button automatically persists the number of 'claps' given on a page, using a simple cloud-hosted endpoint.
You can see the button in action on the Scott Logic blog.
A few tips for styling and configuration
color
attribute, e.g.
<applause-button color="red" />
, or for more flexibility, just apply CSS.multiclap
attribute to true
.url
attribute, e.g. <applause-button url="google.com" />
initialClapCount
property, which
returns a Promise which resolves to the initial count (see the source of this page for an example).clapped
event
(again, see the source of this page for an example).api
property to point to your end-point. The code
for the back-end hosted at api.applause-button.com
is
open sourced on GitHub.The applause button is backed by a lightweight serverless architecture giving it a relatively low running cost, however it does serve around 100,000 requests each day, and this doesn't come for free!
The following table shows the top ten websites that use applause button and the monthly cost of supporting each.
Consumer | Monthly Cost |
---|
Please consider donating towards these running costs (approx $50 per month) via the open collective website.
The applause button is primarily designed to be consumed via the visual component. However, you are welcome to access the APIs that support it, as long as you don't do anything silly!
Here's a brief overview of the API methods, all of which are available via https://api.applause-button.com
Gets the number of claps for a page based on the HTTP Referer header. You can also provide the url via the querystring, however a Referer must still be set (this avoids requests from robots etc ...)
$ curl -e robot https://api.applause-button.com/get-claps?url=applause-button.com/
7963
POST - /get-multiple
Gets the number of claps for multiple pages in a single request, this is the preferred option for retrieving multiple clap counts. The clap counts for up to 100 URLs can be requested as a JSON array, with the results returned in JSON.
$ curl 'https://api.applause-button.com/get-multiple' \
-H 'Content-Type: text/plain' --data-binary \
'["applause-button.com/", "blog.scottlogic.com/2018/10/19/living-in-an-accessible-world.html"]'
[{"claps":7200,"url":"applause-button.com/"},{"claps":138,"url":"blog.scottlogic.com/2018/10/19/living-in-an-accessible-world.html"}]