OpenPLUTO

Integrating Bubbles with BearBlog

bubbly-bears

I added the Bubbles upvoting system to my site this morning.

At first, I just dropped in the script, let it render, and moved on.

It worked, but it felt like a widget. It sat on the page instead of belonging to it. That matters to me. My theme here is intentional and the bubbles script broke that aesthetic. If something looks like a plugin, it shatters the magic to me.

The shift

Instead of treating Bubbles like a button, I treated it like metadata.

Same as:

It is not asking for attention. Not showing up in the RSS feed. Just part of the afterword.

The result

🎧 SONG STATION
✉️ Reply by Email
🫧 3

That last line is the Bubbles count.

No button. No badge. No feature announcement.

Just a small smoke signal.

How to Get it Done

Two small tweaks changed the feel:

  1. Use the minimal Bubbles format.
  2. Strip the button styling and let it behave like text.

HTML

Drop this into your post template on Bear:

<div class="afterword">
  <p class="qt-line">
    <span class="qt-icon">✉️</span>
    <span class="qt-text">
      <a href="mailto:you@example.com?subject=re: {{ post_title }}">Reply by Email</a>
    </span>
  </p>

  <p class="qt-line qt-line--bubbles">
    <span class="qt-icon">🫧</span>
    <span class="qt-text">
      <span class="bubbles-vote" data-format="minimal"></span>
    </span>
  </p>
</div>

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

CSS

Add this to your theme:

.afterword {
  margin-top: 1.2rem;
  color: var(--muted, #888);
  font-size: 0.95em;
}

.afterword .qt-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.45rem 0;
  line-height: 1.4;
}

.afterword .qt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  flex-shrink: 0;
}

.afterword .qt-text {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.afterword .qt-line--bubbles .bubbles-vote-btn {
  --bt-fg: var(--muted, #888);
  --bt-accent: var(--accent, #4cc2ff);

  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted, #888);
  line-height: 1.4;
}

.afterword .qt-line--bubbles .bubbles-vote-btn:hover {
  color: var(--text, #ddd);
}

.afterword .qt-line--bubbles .bubbles-vote-num {
  color: var(--accent, #4cc2ff);
  font-variant-numeric: tabular-nums;
}

.afterword .qt-line--bubbles .bubbles-vote-tri {
  display: none;
}

The Bubbles system still does the work. This only changes how it shows up. Most integrations fail visually before they fail technically. This is one way to get them closer to a native BearBlog feel. ■