TL;DR; — I’ve created an Applause Button, a zero-configuration button for adding applause / claps to web pages and blog-posts.

Positive Reinforcement

The need for positive reinforcement is a very ‘human’ trait, with young children actively seeking positive feedback:

“Mum, mum, look at my picture” “Yes, that’s *wonderful*. Aren’t you talented!” “Dad, dad, look at me, look at me …”

And while the need for positive feedback diminishes as we get older, it never fully goes away. We still crave praise and complements, however for some reason we tend to get a little more coy about both giving and receiving praise.

This coyness, and the impersonal nature of the internet, can be a little demoralising for bloggers. How can you get this much needed feedback on whether people liked your writings?

Bloggers have used a few techniques for eliciting some sort of feedback. The first is simply hits or visits to each post which are easily gleaned from Google Analytics. However visiting a website isn’t really an affirmative action and most authors need feedback that is a bit more personal.

Other methods of determining the popularity of posts could be to check Twitter, reddit or Hacker News for related conversations (and hopefully praise). But the effort required to do this is significant and unless you write something quite impactful you’re unlikely to make a ‘dent’ on any of these channels.

On our company blog we used to use the (undocumented) tweet count API to provide some kind of popularity metric. Unfortunately this was shut down a while back and none of the alternatives really worked. When I finally removed tweet counts I asked our authors whether they wanted some way of receiving positive feedback, and if so, what form it should take.

Almost everyone pointed to this site, Medium, and its clap functionality.

Claps!

Medium introduced claps around one year ago, and since then has made a few tweaks to allow multiple claps. Generally speaking this feature has been well received, with some authors delving into the behaviour around clapping to produce some interesting analysis.

This feature, which could have been seen as a novelty at first, clearly works. It gives readers an easy way to express positive feedback, and authors an easy way to measure it.

Re-creating this feature on our own blog felt like a fun weekend project!

Our blog is a statically generated site, so we don’t have Wordpress or other CMS backend as a means of storing ‘claps’. So a viable solution needed to have its own back-end.

I also wanted to make it easy for anyone else to use this feature, so the backend should be supplied as an integrated service, i.e. using this ‘clap’ button shouldn’t require installation / hosting of a back-end.

I had a quick look around to see whether anyone had already implemented something like this. I found a codepen and associated article which mimicked the visual effect of the medium clap button, but no back-end. I also found kudos please, which is a similar concept, but the back-end was written in PHP, and would require hosting.

Cool … a greenfield project!

Applause Button

I set to work creating Applause Button, with the goal of making it as easy as possible to integrate it with any existing website or blog.

I decided to use web components, or more specifically custom elements, removing the need for a JavaScript API for constructing / initialising the button. I’m not going to go into the details of how this button was implemented, the code is all on GitHub, it’s just a couple of hundred lines of code.

When the button is clicked, or clapped, it sends an HTTP request to the applause button back-end. The HTTP Referer is used to determine the page which hosts the button, meaning that there is no configuration required at all. Adding the button is as easy as this …

<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 back-end uses the serverless pattern, with AWS Lambda functions providing two API methods, `get-claps` and `update-claps`, and the claps for each URL is stored in DynamoDb. These lambda functions execute within tens of milliseconds, and as a result the cost is minimal. When we started using this on our blog, which is relatively high traffic, the cost of the 1000s of lambda invocations were still within the AWS free tier. The back-end code is also on GitHub for those that are interested.

Open Source, Open Service

Part of my motivation for implementing this is an experiment. I love the way that Open Source allows you to share your creations with other, no costs, no warranties, no worries. However, if you want to freely share something that requires hosting, things aren’t quite so easy.

After a few months the Applause Button has become quite popular, and it is now costing ~$400 per annum in hosting costs. While I’m using this as a good excuse to practice my ‘serverless’ skills and keep costs at a minimum, it is clear I need to find a way to fund this. I’d be grateful if you’d consider a small donation to the project’s open collective fundraiser.

For now, if you fancy giving it a go … http://applause-button.com/