I am a big fan of bubbles.town, a relatively new website to make it easier to discover the indieweb of personal blogs. Sounds familiar? I run indieblog.page where the idea is that you can discover new blogs one random post at a time.

Bubble's approach is a different one. Instead of showing you random posts, they want to “bubble up” the best posts by user votes, similar to what Reddit or Hackernews do. However unlike on those sites, the posts are not user submitted but automatically imported via RSS (Incidentally bubbles.town was seeded in part with data from indieblog.page).

A big issue with this approach is that their "New" page is basically a firehose of all blog posts - the more blogs are added to the site, the faster the new feed will update. That makes it harder to discover posts that are a few days old and these posts then miss their chance to be seen and upvoted.

One solution is to make bubbles votes visible through other means. So why not utilize a mechanism we used to see a lot in the olden times? A little widget at the end of your own blog posts letting readers know, the post can be bubbled up!

I had looked multiple times for such a thing in bubble's documentation but could not find anything about it. Until I saw such a widget at another blog which made me look harder.

So here's the PSA: there is a bubbles vote widget and it has good documentation. As to be expected, it's just a little Javascript to add to your blog's template and you're good to go.

You can see it at the end of this post (though I sprinkled a bit of custom CSS on top).

PS: feel free to upvote older posts of mine

PPS: for bubbles readers – it doesn't always have to be coffee, there's a buy me a beer link below

EDIT: here's how added the bubbles to the button

div.bubbles-vote {
    a.bubbles-vote-btn {
        /* the bubble after the label */
        span:last-child::after {
            content: ' 🫧';
        }
 
        position: relative;
        display: inline-block;
        font-weight: 600;
        transform-origin: center center;
 
        &:hover {
            /* bobbing on hover */
            animation: bob 0.8s ease-in-out infinite;
        }
 
        /* small bubbles */
        &::before,
        &::after {
            content: "🫧";
            position: absolute;
            right: 0;
            font-size: 0.7em;
            opacity: 0;
            pointer-events: none;
        }
 
        /* animate the bubbles */
        &::before {
            animation: floatUp 1.2s ease-out infinite;
        }
 
        &::after {
            animation: floatUp 1.2s ease-out infinite 0.6s;
            left: 1.5em;
        }
    }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50%      { transform: translateY(0) rotate(-1.5deg); }
}
 
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(0) scale(0.4); }
  20%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-30px) scale(1) translateX(8px); }
}

Similar posts:

• Weekend Project: indieblog.page