Bubbles-Stimmen einbetten

Zeige deinen Lesern, wie viele Leute auf Bubbles für deinen Beitrag gestimmt haben. Das Widget rendert als kleiner Textlink unter dem Artikel. Du brauchst dafür eine Zeile HTML und ein Script-Tag.

Standard-Snippet

Füge das an beliebiger Stelle in dein Blog-Template ein, typischerweise am Ende des Artikels:

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

Ergebnis:

Minimal-Variante

Eine kompakte Form ohne Label. Eignet sich inline, zum Beispiel neben Autorenname oder Datum:

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

Ergebnis:

Emoji-Variante

Rendert als reiner Text (eine 🫧-Blase und der Zähler) und erbt Schriftart, Größe und Farbe vom umgebenden Text. Ideal für Afterword-Zeilen oder Fuß-Bylines, wo sich das Widget eher wie Teil des Fließtexts anfühlen soll und nicht wie ein separater Button. Inspiriert von wmprkrs Bear-Blog-Integration.

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

Ergebnis:

Welche URL wird nachgeschlagen?

In dieser Reihenfolge:

Das data-url="…"-Attribut am Mount-Div, falls gesetzt
Ein Permalink innerhalb des umschließenden <article>-Tags (rel="bookmark", oder irgendein Link, der auf eine spezifischere URL als die aktuelle Seite zeigt)
<link rel="canonical"> im Head der Seite
Die aktuelle location.href

Wenn dein Blog-Template das Widget sowohl auf der Listenseite als auch auf der Detailseite zeigt, ist das explizite Setzen von data-url am zuverlässigsten:

<div class="bubbles-vote" data-url="https://dein-blog.beispiel/posts/mein-artikel"></div>

Was passiert, wenn der Artikel nicht auf Bubbles ist?

Das Widget rendert in diesem Fall überhaupt nichts. Sobald der Beitrag via Feed-Polling importiert wurde, erscheint der Zähler beim nächsten Seitenaufruf.

Styling

Das Widget nutzt zwei CSS-Custom-Properties, die du überschreiben kannst:

.bubbles-vote-btn {
  --bt-fg: #666;        /* Label-Farbe */
  --bt-accent: #2e8a7f; /* Zahl + Dreieck */
}

Du kannst auch die Klassen direkt überschreiben: .bubbles-vote-btn, .bubbles-vote-num, .bubbles-vote-tri.

Datenschutz

Das Widget sendet pro Mount-Punkt einen anonymen GET-Request an bubbles.town/api/vote-count, ohne Cookies. Das Script selbst ist die einzige Drittressource, die geladen wird.

Feste Version mit Subresource Integrity

Das Standard-Snippet lädt vote.js und erhält alle Updates, die wir ausliefern, automatisch. Wenn du das Script stattdessen an eine bestimmte Version binden willst, damit ein kompromittierter Bubbles-Server keinen neuen Code auf deiner Seite ausführen kann, nutze die feste URL unten. Du musst das Snippet dann von Hand aktualisieren, wenn wir eine neue Version veröffentlichen.

<script src="https://bubbles.town/vote-v1.js" defer
  integrity="sha384-iPZ+izwo1AOEa00AnHP7pK0fffeEeeP05nk7pfPCHkmDnyYpi7/hzWJoMUtsJNvl"
  crossorigin="anonymous"></script>