Sign in

Embed the Bubbles vote count

Show readers how many people on Bubbles have voted for your post. The widget renders as a small text link under your article. One line of HTML and one script tag is all you need.

How it looks

Live preview, reading the count for one of the example posts:

Default snippet

Paste this anywhere in your blog post template, typically at the end of the article:

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

Renders as:

Minimal variant

A compact form without the label. Works well inline, for example next to an author name or date:

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

Renders as:

Which URL does it look up?

In this order:

  1. data-url="…" attribute on the mount div, if set
  2. A permalink found inside the surrounding <article> (rel="bookmark", or any link that resolves to a URL more specific than the current page)
  3. <link rel="canonical"> in the page head
  4. The current location.href

If your blog template shows the widget on both the listing page and the detail page, setting data-url explicitly is the most reliable option: 

<div class="bubbles-vote" data-url="https://your-blog.example/posts/my-article"></div>

What if the post isn't on Bubbles?

The widget renders nothing at all. Once the post is imported via feed polling, the count shows up on the next page load.

Styling

The widget uses two CSS custom properties you can override: 

.bubbles-vote-btn {
  --bt-fg: #666;        /* label color */
  --bt-accent: #2e8a7f; /* count + triangle color */
}

You can also override the classes directly: .bubbles-vote-btn, .bubbles-vote-num, .bubbles-vote-tri.

Privacy

The widget makes one anonymous GET request to bubbles.town/api/vote-count per mount point, without sending cookies. The script itself is the only third-party resource loaded.