How I added the Bubbles upvote widget to my Pika hosted blog.

I just read that a couple of days ago Pika announced the ability to add custom code. You can’t do too much, but a few things are possible.

So today with a little bending of some (coding) rules, I was able to add the Bubbles upvote widget to my posts.

The Bubbles embed widget is this…

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

But there is no way to add the bubbles-vote div/class within Pika. So I had to change the Bubbles script and utilise a Pika element I wasn’t using.

In the Bubbles embed script there is this function…

function run() {
  var els = document.querySelectorAll('.bubbles-vote');
  for (var i = 0; i < els.length; i++) init(els[i]);
}

So I changed the querySelectorAll from .bubbles-vote to .site-tags, copied the script into the Custom <body> code section within the Pika settings.

And hey presto, it worked!

The other thing I did was to change the look of it via CSS to make it fit the theme of my blog.

However, by doing this I’ll forgo the tags that litter the footer of my posts. But I’m cool with it.

And I’d prefer to have the Bubbles upvote widget.

Known issue:
If Bubbles doesn’t have your post (slug/url) listed, the upvote widget will be hidden and the tags for the post will be displayed.