JavaScript-Einbettung

Die JavaScript-Einbettung ist der normale Weg, einen Ticker auf eine Seite zu bringen. Sie funktioniert auf jeder Website, auf der du ein <script>-Tag einfügen kannst: in einem CMS, auf einer statischen Seite, in einem Landingpage-Baukasten.

Das Snippet

Kopier es aus dem Dialog Embed des Tickers; die richtige Ticker-ID steht schon drin.

<script defer
    src="https://cdn.livetickr.io/embed.js"
    id="livetickr-feed"
    data-ticker-id="YOUR_TICKER_ID"></script>

Füg es dort in deine Seite ein, wo der Feed erscheinen soll. Das Skript stellt den Ticker an der Stelle des Tags dar, seine Position im Markup ist also die Position auf der Seite.

Attribut	Was es tut
`src`	Lädt das Einbettungs-Skript und sagt ihm, von welchem Host es den Feed holt. Beides kommt vom selben Origin, und genau das hält die Einbettung cookiefrei.
`id`	Üblicherweise `livetickr-feed`. Das Skript sucht sich nicht über diese ID, eine andere macht also nichts kaputt; mit ihr bleibt das Tag zwischen vielen anderen Skripten erkennbar.
`data-ticker-id`	Welcher Ticker angezeigt wird.
`defer`	Lässt die Seite zuerst fertig laden. Die Einbettung blockiert deine Seite nie.
`data-max-width`	Optional. Begrenzt, wie breit der Feed wird. Siehe unten.

Änder src nicht von Hand. Der Host, der embed.js ausliefert, liefert auch den Feed dahinter aus, eine von Hand geänderte URL macht also beide Hälften auf einmal kaputt.

Eine maximale Breite festlegen

Ohne weitere Angabe nimmt der Feed die volle Breite des Elements ein, in das du das Snippet eingefügt hast. data-max-width begrenzt sie:

<script defer
    src="https://cdn.livetickr.io/embed.js"
    id="livetickr-feed"
    data-ticker-id="YOUR_TICKER_ID"
    data-max-width="800"></script>

Wert	Ergebnis
weggelassen	Volle Breite des Elements, in das du das Snippet eingefügt hast. Das ist der Standard.
`auto` oder `none`	Wie weggelassen: keine Begrenzung.
`800`	800 Pixel.
`800px`	800 Pixel. Wie `800`.
`80%`	80 % der Breite des umgebenden Elements.

Drei Dinge, die du über das Verhalten wissen solltest.

Es ist ein Maximum, keine feste Breite. data-max-width="800" in einer Spalte mit 300 Pixeln wird 300 Pixel breit, nicht 800. Ein Wert, den du für dein Desktop-Layout wählst, läuft auf dem Smartphone also nicht über.

Ein begrenzter Feed zentriert sich im verfügbaren Platz. Bei voller Breite gibt es nichts zu zentrieren.

Ein unbrauchbarer Wert wird ignoriert, und der Feed fällt auf volle Breite zurück. Die Browser-Konsole nennt den abgelehnten Wert. Erlaubt sind nur reine Zahlen, px und %; Einheiten wie vw, em und rem nicht.

Was auf der Seite passiert

Das Skript lädt die 10 neuesten Updates und stellt sie dar. Load more lädt jeweils 10 weitere.

Danach prüft es den Feed in einem Takt erneut, den der Server festlegt und mit jeder Antwort mitschickt. So lässt sich das Intervall anpassen, ohne dass jemand ein Snippet anfasst. Ein Live-Ticker wird derzeit etwa alle halbe Minute neu geprüft. Ein geschlossener, dessen Event vorbei ist, sehr viel seltener: In ihn kann nichts mehr geschrieben werden, und seine Seite bleibt vielleicht jahrelang online.

Ein neues Update, das du veröffentlichst, erscheint also innerhalb dieses Zeitraums auf jeder Seite, die den Ticker einbindet, ohne neuen Build und ohne Cache, den du leeren müsstest.

Für den Feed selbst wird nichts im Browser der Leser gespeichert: Es wird kein Cookie gesetzt, und Leser werden nicht über Seiten oder Geräte hinweg wiedererkannt.

Inhalte Dritter und Einwilligung

Bettet ein Update einen Post von woanders ein, etwa einen Tweet oder ein Video, wird dieser Inhalt nicht sofort geladen. Die Leser sehen einen Platzhalter, und der Drittanbieter wird erst kontaktiert, wenn sie zustimmen.

Die Zustimmung gilt für den ganzen Feed, wird im Browser der Leser selbst gespeichert und lässt sich wieder ausschalten. Das ist standardmäßig aktiv; ein Workspace kann es in seinen Darstellungseinstellungen abschalten, dann laden Inhalte Dritter sofort.

Die Domain, auf der dein Feed läuft

Ein Workspace muss die Domain registrieren, auf der seine Ticker eingebunden werden. Solange er das nicht getan hat, wird nirgends ein Feed ausgeliefert, und der Dialog Embed hält das Snippet zurück, statt Code herauszugeben, der nachweislich nichts anzeigt.

Ein Workspace-Admin registriert sie unter Workspace settings → General. Ab dann erscheint der Feed auf dieser Domain und auf all ihren Subdomains. Überall sonst zeigt das Snippet statt des Feeds einen kurzen Hinweis und erfasst keine Statistik, damit sich ein Snippet nicht auf eine andere Website übertragen lässt.

localhost und 127.0.0.1 funktionieren immer, ob eine Domain registriert ist oder nicht. So kannst du die Integration bauen, bevor es eine Domain gibt, und eine lokale Kopie deiner Website bleibt funktionsfähig.

Während der Beta kann ein Workspace zwei Domains registrieren: die Live-Website und eine weitere für einen Staging- oder Vorschau-Host, der keine Subdomain davon ist. Subdomains brauchen keinen eigenen Platz, und eine Domain, die wir auf Anfrage freischalten, wird nicht auf das Kontingent angerechnet.

Die Registrierung ist endgültig. Selbst ändern oder entfernen kannst du sie nicht; so lässt sich ein Abo nicht Monat für Monat von Website zu Website weiterreichen. Eine Korrektur oder eine dritte Domain läuft über den Support; jede Änderung bleibt so oder so im Domain-Verlauf des Workspaces erhalten.

Wenn der Feed einen Hinweis zeigt

Zeigt die Einbettung statt des Feeds eine einzelne graue Textzeile, hat die Domain-Prüfung geantwortet, und welcher Satz es ist, sagt dir, was zu tun ist. Diese Hinweise kommen vom Server und stehen derzeit auf Englisch. (Den einen anderen Hinweis, den Leser sehen können, für einen zurückgezogenen Ticker, findest du weiter unten.)

Hinweis	Was er bedeutet
This ticker’s workspace has no domain registered yet.	Es ist nichts registriert. Registrier die Domain unter Workspace settings → General, dann erscheint der Feed.
This ticker isn’t authorised on this domain.	Eine Domain ist registriert, aber nicht diese und auch keine ihrer Subdomains. Prüf auf Tippfehler, und denk daran: Ein wirklich anderer Host braucht eine eigene Registrierung.
This preview runs in a sandboxed frame, which has no domain to authorise.	Die Seite steckt in einem iframe mit Sandbox, wie bei manchen CMS-Vorschauen und Online-Code-Editoren. So ein Frame hat keine Domain, gegen die sich prüfen ließe. Dasselbe Snippet funktioniert auf der veröffentlichten Seite.

Wenn der Feed leer bleibt

Erscheint gar nichts, ist es fast immer eins von drei Dingen:

Der Ticker ist noch ein Entwurf. Entwürfe werden nicht ausgeliefert, dafür sind sie Entwürfe. Das Snippet stimmt also, es gibt nur nichts zu zeigen. Setz den Ticker live.

Die Ticker-ID ist falsch. Eine vertippte oder nicht existierende ID antwortet mit 404, und embed.js meldet das in der Browser-Konsole. Kopier das Snippet noch einmal aus dem Dialog Embed, statt es von Hand zu ändern.

Der Ticker wurde offline genommen. Ein Ticker, der live war und jetzt wieder ein Entwurf ist, antwortet mit 410, nicht 404, und die Leser sehen statt einer leeren Fläche einen kurzen Hinweis, dass er nicht mehr verfügbar ist. War das nicht gewollt, setz ihn wieder live.

Bei der Fehlersuche hilft der Unterschied: 404 heißt, das Snippet ist falsch; 410 heißt, das Snippet stimmt, aber der Feed wurde zurückgezogen.