Bubbles 🫧 Blog

A small thing I've been wanting for a while: you can now drop a snippet on your blog that shows the live Bubbles vote count for each post. Scroll to the bottom of this post to see it in action.

The full guide lives at https://bubbles.town/embed but here's the short version:

It's one line of HTML and a script tag:

<div class="bubbles-vote"></div>
<script src="https://bubbles.town/vote.js" defer></script>

That's everything you need. The widget figures out the post's URL, looks it up on Bubbles, and renders a small text link with the count. Clicking it opens the entry on Bubbles in a new tab, where readers can vote or join the discussion over in the Fediverse.

If the post isn't on Bubbles yet, the widget renders nothing at all. Once it gets imported via feed polling, the count shows up on the next page load automatically.

There's also a minimal variant for when you want something compact inline, like next to an author name or date:

<div class="bubbles-vote" data-format="minimal"></div>

That renders as only 3▲.

If your blog doesn't set <link rel="canonical"> or use <article> tags, you can pass data-url manually. The embed page explains when.

Looking forward to seeing this on your blogs. 🫧
Ben

Update Apr 16: There's now a third variant, data-format="emoji". It renders as plain text, inheriting font, size, and color from the surrounding page, so the widget blends into an afterword or byline instead of looking like a separate button.

<div class="bubbles-vote" data-format="emoji"></div>
<script src="https://bubbles.town/vote.js" defer></script>

Thanks to William Parker, whose Bear Blog customization showed how nicely the minimal variant can disappear into the text. The new variant packages that idea so you don't have to write the custom CSS.