simple appreciation|
for the small web
two lines of code. zero tracking. infinite appreciation
use cases
blog appreciation
quick anonymous feedback
how i built a privacy-first like button
a short story about building iine and why privacy matters on the web
docs helpfulness
feedback for your side-project's docs
installation guide
step-by-step instructions for setting up iine on your website
features
zero friction
add to any html or ssg in seconds. no account required
privacy first
no timestamps, no ips, no tracking. hosted in switzerland
free forever
for the small web. self-host for high traffic, please ♡
built-in security
privacy-respecting rate limiting and input validation
made with love
no data collection. just support for the indie web
setup
1
add the script
include this in your html, before the closing body tag
<script src="https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js"></script>2
add a button
drop this html wherever you want the button to appear
<button class="iine-button" aria-hidden="true"></button>1
add the script
include this in your html, before the closing body tag
<script src="https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js"></script>2
add a button
⚠️ change value="/your-page" to your page's path (e.g. value="/blog")
<form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" method="post">
<input type="hidden" name="page_slug" value="/your-page">
<button type="submit" class="iine-button" aria-hidden="true">
<noscript>❤️</noscript>
</button>
</form>customise your buttons
choose your icon
preview
<button
class="iine-button"
data-icon="heart"
aria-hidden="true">
</button><button
class="iine-button"
data-icon="thumbs_up"
aria-hidden="true">
</button><button
class="iine-button"
data-icon="upvote"
aria-hidden="true">
</button><button
class="iine-button"
data-icon="🔥"
aria-hidden="true">
</button>css styling
.iine-button — main button element
.iine-button.clicked — added after click
.icon — icon container (svg or emoji)
.counter — number display
why iine?
core principles
- privacy first: no ips, no tracking
- cost effective: minimal data = low cost
- free: as in freedom (AGPL) and gratis
- light: minimal code, no dependencies
- caring: built for the small web
the story
i'm Óscar, author of iine
i wanted simple engagement buttons for my blog and an excuse to build my first project w/ backend
for sustainability and privacy, iine does not store individual timestamps or user agents or ips. it's just counters that go up
hoping others in the indie web community might find it useful, i've made it free〜