diff --git a/assets/js/main.js b/assets/js/main.js
index f29ef901..d71b39e6 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -7,3 +7,40 @@ function updateAccentColor() {
 }
 setInterval(updateAccentColor, 15000)
 updateAccentColor()
+
+const performClap = (e) => {
+  e.preventDefault();
+  const btn = e.currentTarget;
+  btn.disabled = true;
+  fetch(btn.parentElement.action, { method: 'POST', headers: new Headers({ 'Accept': 'application/json' }) })
+    .then(res => res.json())
+    .then(data => {
+      localStorage.setItem(clapKey(btn.parentElement.action), data.claps);
+      setClapCount(btn, data.claps);
+      btn.parentElement.classList.add('clapped')
+      btn.disabled = false;
+    })
+    .catch(e => console.error(`Failed to automate the clap: ${e}`))
+}
+
+const clapKey = (action) => `clap:${(new URL(action)).pathname}`;
+
+const setClapCount = (btn, clapCount) => {
+  const count = btn.querySelector('span');
+  if (count) {
+    count.textContent = Math.max(count.textContent, clapCount)
+  } else {
+    const newCount = document.createElement('span');
+    newCount.textContent = clapCount;
+    btn.appendChild(newCount);
+  }
+}
+
+for (const btn of document.querySelectorAll('form.claps button')) {
+  const lastClappedTo = localStorage.getItem(clapKey(btn.parentElement.action));
+  if (lastClappedTo) {
+    btn.parentElement.classList.add('clapped')
+    setClapCount(btn, lastClappedTo)
+  }
+  btn.addEventListener("click", performClap)
+}
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index 5ceb434b..2e713284 100644
--- a/assets/scss/_main.scss
+++ b/assets/scss/_main.scss
@@ -23,8 +23,6 @@ html {
   }
 }
 
-
-
 body {
   position:relative;
   margin: 0;
@@ -613,6 +611,26 @@ a[href^="#fn:"] {
   }
 }
 
+form.claps {
+  float: right;
+
+  &.clapped {
+    color: var(--accent);
+  }
+
+  button:disabled svg {
+    animation: pulse 500ms infinite ease-in-out;
+  }
+
+  svg {
+    font-size: 1.5em;
+
+    &:only-child {
+      margin: 0;  
+    }
+  }
+}
+
 .post.poetry {
   width: auto;
 
@@ -638,6 +656,17 @@ a[href^="#fn:"] {
   .post-info {
     text-align: center;
     margin-top: 60px;
+
+    form.claps {
+      margin-top: 1em;
+      text-align: center;
+      float: none;
+      display:inline-block;
+
+      svg {
+        font-size: 1em;
+      }
+    }
   }
 }
 
@@ -971,4 +1000,10 @@ mark {
   vertical-align: -0.125em;
   width: 1em;
   height: 1em;
-}
\ No newline at end of file
+}
+
+@keyframes pulse {
+  0% { opacity: 0.5; }
+  50% { opacity: 1; }
+  100% { opacity: 0.5; }
+}
diff --git a/config.toml b/config.toml
index 480c043c..d868a5cd 100644
--- a/config.toml
+++ b/config.toml
@@ -48,6 +48,9 @@ date = ["date", "publishDate", "lastmod", ":git"]
   # Default theme "light" or "dark"
   defaultTheme = "dark"
   themeColor = "#252627"
+
+  clapshost = "byjp-claps.web.val.run"
+  
   [params.favicon.color]
     mask = "#252627"
     msapplication = "#252627"
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 60d50c2d..ba65f028 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -106,6 +106,8 @@
 
     {{ if ne .Type "site-infra" }}
       <div class="post-info">
+        {{ partial "claps.html" (dict "url" .RelPermalink) }}
+
         {{ if in .Params.tags "from-twitter" }}
           <p>
             {{ partial "svg.html" (dict "name" "twitter") }}
diff --git a/layouts/calendar/single.html b/layouts/calendar/single.html
index c575a7d3..574a8599 100644
--- a/layouts/calendar/single.html
+++ b/layouts/calendar/single.html
@@ -54,6 +54,7 @@
     <hr />
 
     <div class="post-info" id="post-info">
+      {{ partial "claps.html" (dict "url" .RelPermalink) }}
       {{ partial "tags.html" .Params.tags }}
 
       {{ with .Params.location }}<p>
diff --git a/layouts/partials/claps.html b/layouts/partials/claps.html
new file mode 100644
index 00000000..02d746de
--- /dev/null
+++ b/layouts/partials/claps.html
@@ -0,0 +1,19 @@
+{{- $relperma := .url -}}
+{{- $style := .style | default "clap" -}}
+<form class="claps" action="https://{{ site.Params.clapsHost }}{{ $relperma }}" method="post">
+  <button type="submit">
+    {{- partial "svg.html" (dict "name" $style) -}}
+    {{- $url := printf "https://%s" site.Params.clapsHost -}}
+    {{- $cacheKey := print $url (now.Format "-2006-01-02") -}}
+    {{- with resources.GetRemote $url (dict "key" $cacheKey) -}}
+      {{- with .Err -}}
+        {{- errorf "%s" . -}}
+      {{- else -}}
+        {{- $data := .Content | transform.Unmarshal -}}
+        {{- with (index $data $relperma) }}<span>{{ . }}</span>{{ end -}}
+      {{- end -}}
+    {{- else -}}
+      {{- errorf "Unable to get all clap counts" -}}
+    {{- end -}}
+  </button>
+</form>
\ No newline at end of file
diff --git a/layouts/partials/memex-footer.html b/layouts/partials/memex-footer.html
index 9c6c3984..c2ba2aaf 100644
--- a/layouts/partials/memex-footer.html
+++ b/layouts/partials/memex-footer.html
@@ -1,4 +1,5 @@
 <div class="post-info">
+  {{ partial "claps.html" (dict "url" .RelPermalink) }}
   {{ partial "tags.html" .Params.tags }}
   {{ partial "series-tags.html" . }}
   <p>
diff --git a/layouts/photos/single.html b/layouts/photos/single.html
index c5bcfc03..2318a038 100644
--- a/layouts/photos/single.html
+++ b/layouts/photos/single.html
@@ -21,6 +21,7 @@
         <hr />
 
         <div class="post-info">
+            {{ partial "claps.html" (dict "url" .RelPermalink "style" "heart") }}
             {{ if in .Params.tags "from-instagram" }}
                 <p>
                     {{ partial "svg.html" (dict "name" "instagram") }}
diff --git a/layouts/poetry/single.html b/layouts/poetry/single.html
index f0875f94..3d275ad7 100644
--- a/layouts/poetry/single.html
+++ b/layouts/poetry/single.html
@@ -20,6 +20,7 @@
     <div class="post-info">
       <p><date datetime="{{ dateFormat .Site.Params.dateformHTML .Date }}" data-pagefind-sort="date">{{ dateFormat .Site.Params.dateform .Date }}</date></p>
       <p><a href="../">back</a></p>
+      {{ partial "claps.html" (dict "url" .RelPermalink "style" "heart") }}
     </div>
 
   </main>