Gadget: Mastodon-Beiträge einbetten

Dieses Gadget bindet einen Mastodon-Beitrag samt Video, Bildern und Autorenzeile in eine Wiki-Seite ein. Es funktioniert auf jeder Mastodon-Instanz, nicht nur auf mastodon.social, und lädt dabei kein Skript des Anbieters nach.

Kurzfassung für Autoren

Adresse des Beitrags im Browser kopieren und einsetzen:

<div class="mastodon-embed" data-post="https://mastodon.social/@benutzer/123456789012345678"></div>

Fertig. Alles Weitere ist nur für jemanden interessant, der das Gadget auf einem anderen Wiki einrichtet oder einen Fehler sucht.

Die Adresse findest du, indem du auf den Zeitstempel des Beitrags klickst – dann steht die vollständige Beitragsadresse in der Adresszeile des Browsers. Sie sieht immer so aus: Instanz, Schrägstrich, @Benutzername, Schrägstrich, eine lange Zahl.

Teil 1: Verwendung

Alle data-Attribute

Attribut	Pflicht	Bedeutung
`data-post`	ja*	Vollständige Adresse des Beitrags. Empfohlener Weg.
`data-instanz`	–	Hostname der Instanz, z. B. `chaos.social`. Nur nötig, wenn `data-post` nicht verwendet wird.
`data-benutzer`	–	Benutzername ohne @, zusammen mit `data-instanz` und `data-id`.
`data-id`	–	Die lange Zahl am Ende der Beitragsadresse.
`data-width`	–	Breite. Standard `100%`, höchstens 42 em.
`data-height`	–	Starthöhe in Pixeln, Standard 600. Die endgültige Höhe meldet Mastodon selbst.
`data-titel`	–	Titelzeile des Rahmens, für Screenreader. Standard „Mastodon-Beitrag".
`data-sperre`	–	`ja` schaltet eine Vorschaubox mit Ladeknopf davor.

* Entweder data-post oder die Dreierkombination aus data-instanz, data-benutzer und data-id.

Beispiele

Einfachster Fall:

<div class="mastodon-embed" data-post="https://chaos.social/@example/114000000000000000"></div>

Mit größerer Starthöhe, falls der Beitrag ein langes Video enthält und beim Laden kurz abgeschnitten wirkt:

<div class="mastodon-embed"
     data-post="https://chaos.social/@example/114000000000000000"
     data-height="800"></div>

Mit Vorschaubox – gedacht für Instanzen, deren Betreiber du nicht einschätzen kannst:

<div class="mastodon-embed"
     data-post="https://irgendeine.instanz/@example/114000000000000000"
     data-sperre="ja"></div>

Was passiert beim Laden

Das Gadget prüft die Adresse, hängt /embed an und baut daraus ein iframe. Mastodon liefert unter dieser Adresse eine eigens dafür gedachte, schlanke Ansicht des Beitrags.

Die offizielle Einbindung von Mastodon lädt zusätzlich ein Skript namens embed.js von der Instanz nach – und zwar ausschließlich, um dem Rahmen die richtige Höhe zu geben. Dieses Gadget macht das selbst: es schickt dem iframe eine Nachricht und trägt die Höhe ein, die Mastodon zurückmeldet. Dadurch wird genau eine Adresse der fremden Instanz abgerufen und sonst nichts.

Unter dem Beitrag steht eine Zeile mit einem Link auf das Original. Sie greift, wenn jemand iframes blockiert – sonst stünde dort ein weißes Loch ohne Hinweis darauf, dass etwas fehlt.

Teil 2: Einrichtung auf einem anderen MediaWiki

Die folgenden Schritte gehen von einem frischen Wiki aus, auf dem noch nie ein Gadget eingerichtet wurde. Wer die Gadgets-Erweiterung schon nutzt, kann Schritt 1 und 2 überspringen.

Alle Seitennamen beginnen mit MediaWiki:. Dieser Namensraum ist nur für Administratoren bearbeitbar – das ist beabsichtigt, denn der Inhalt wird als Programmcode an jeden Besucher ausgeliefert.

Schritt 1: Erweiterung „Gadgets" prüfen

Rufe Spezial:Version auf und suche unter „Installierte Erweiterungen" nach Gadgets. Steht sie dort, weiter mit Schritt 3.

Schritt 2: Erweiterung nachinstallieren

Die Erweiterung liegt bei MediaWiki ab Version 1.35 im Tarball bereits bei, sie muss nur eingeschaltet werden. In LocalSettings.php am Ende ergänzen:

wfLoadExtension( 'Gadgets' );

Fehlt das Verzeichnis extensions/Gadgets/ ganz, lädst du die zur Wiki-Version passende Fassung von https://www.mediawiki.org/wiki/Special:ExtensionDistributor/Gadgets herunter und entpackst sie dorthin.

Danach Spezial:Version erneut aufrufen und prüfen, ob die Erweiterung jetzt gelistet ist.

Schritt 3: Den Programmcode anlegen

Lege die Seite MediaWiki:Gadget-Mastodon.js an und füge den vollständigen Inhalt der Datei Gadget-Mastodon.js ein.

Wichtig: ohne <syntaxhighlight> oder sonstige Auszeichnung drumherum – die Seite enthält nichts als das Skript selbst.

Achte darauf, wirklich den vollständigen Inhalt zu erwischen. Landet versehentlich der Code eines anderen Gadgets auf der Seite, passiert schlicht gar nichts: das Skript sucht dann nach Elementen, die es auf der Seite nicht gibt, und bricht stillschweigend ab. Zur Kontrolle: die richtige Datei enthält weit oben die Zeile

var STD_HOEHE = 600;

und weiter unten den Ausdruck '/embed'.

Schritt 4: Die Beschreibungsseite anlegen

Lege MediaWiki:Gadget-Mastodon an (ohne .js). Ihr Inhalt ist der Text, der in Spezial:Einstellungen neben dem Gadget steht – eine Zeile genügt:

Bettet Mastodon-Beiträge samt Videos ein.

Diese Seite ist Pflicht. Fehlt sie, erscheint das Gadget in der Liste als roter Link und MediaWiki meldet es als fehlerhaft.

Schritt 5: Das Gadget registrieren

Lege MediaWiki:Gadgets-definition an, falls die Seite noch nicht existiert, und ergänze eine Zeile:

* Mastodon[ResourceLoader|default|hidden]|Mastodon.js

Die drei Angaben in den eckigen Klammern bedeuten:

ResourceLoader – das Gadget wird über den modernen Lademechanismus ausgeliefert. Bei neuen Gadgets immer setzen.
default – das Gadget ist für alle Besucher eingeschaltet, auch für nicht angemeldete. Ohne diese Angabe müsste jeder es einzeln in seinen Einstellungen aktivieren, und anonyme Besucher sähen es nie.
hidden – es erscheint nicht in Spezial:Einstellungen. Sinnvoll, weil ein Gadget, das nur eine Einbettung darstellt, keine Wahl ist, die ein Leser treffen müsste.

Der Teil hinter dem senkrechten Strich ist der Dateiname ohne das Präfix MediaWiki:Gadget-.

Hat die Seite bereits einen Abschnittskopf wie == Darstellung ==, setze die Zeile einfach darunter. Ohne jeden Abschnittskopf funktioniert die Seite ebenfalls.

Abhängigkeiten braucht dieses Gadget keine: es verwendet nur jQuery, das MediaWiki ohnehin auf jeder Seite lädt.

Schritt 6: Prüfen und Zwischenspeicher leeren

Rufe Spezial:Gadgets auf. Dort muss „Mastodon" nun mit einem funktionierenden Link auf die JavaScript-Seite stehen. Erscheint stattdessen eine Fehlermeldung, stimmt meist die Schreibweise in Schritt 5 nicht.

Danach eine Testseite anlegen und den Beispielcode von oben einfügen. Zeigt sie nichts an:

Seite mit ?action=purge in der Adresse neu aufrufen.
Im Browser mit Strg+F5 (Mac: Cmd+Umschalt+R) hart neu laden.

MediaWiki liefert Gadget-Code mit langer Cache-Dauer aus. Nach jeder Änderung an der JavaScript-Seite brauchst du diesen harten Neuladevorgang, sonst siehst du minutenlang die alte Fassung.

Teil 3: Bequemer machen (optional)

Wenn Autoren keine rohen div-Elemente tippen sollen, lege Vorlage:Mastodon an:

<includeonly><div class="mastodon-embed" data-post="{{{1|}}}" data-height="{{{hoehe|}}}" data-titel="{{{titel|}}}" data-sperre="{{{sperre|}}}"></div></includeonly><noinclude>
Bettet einen Mastodon-Beitrag ein.
Verwendung: <code>{{Mastodon|https://instanz/@benutzer/123…}}</code>
</noinclude>

Danach genügt im Artikel:

{{Mastodon|https://chaos.social/@example/114000000000000000}}

Leere Parameter stören nicht – das Gadget behandelt ein leeres data-height genau wie ein fehlendes. Die Vorlage kommt deshalb ohne die Erweiterung ParserFunctions aus.

Teil 4: Fehlersuche

Es erscheint überhaupt nichts, auch keine Fehlermeldung. Das Gadget wurde nicht geladen. Prüfe der Reihe nach: Steht das Gadget in Spezial:Gadgets? Stimmt der Dateiname in MediaWiki:Gadgets-definition? Existiert MediaWiki:Gadget-Mastodon ohne .js? Hast du hart neu geladen?

Zweite häufige Ursache: auf der JavaScript-Seite steht der Code eines anderen Gadgets. Vergleiche mit den Prüfzeilen aus Schritt 3.

„keine gültige Beitragsadresse angegeben" Das Gadget hat die Adresse nicht als Mastodon-Beitrag erkannt. Erlaubt sind nur die drei üblichen Formen: /@benutzer/123…, /@benutzer@andereinstanz/123… und /users/benutzer/statuses/123…. Ein Profil-Link ohne Beitragsnummer oder eine Adresse mit http:// statt https:// wird abgelehnt.

Der Beitrag erscheint, aber der Rahmen bleibt zu hoch oder zu niedrig. Die Instanz hat die Höhenmeldung nicht beantwortet. Setze data-height auf einen passenden Wert – bei einem Beitrag mit Video sind 700 bis 900 üblich.

Der Beitrag ist leer oder zeigt „Not found". Der Beitrag ist nicht öffentlich, wurde gelöscht, oder die Instanz ist offline. Beiträge mit eingeschränkter Sichtbarkeit lassen sich grundsätzlich nicht einbetten.

Das div verschwindet beim Speichern. Sehr selten, betrifft nur Wikis mit besonders strengem Sanitizer. data--Attribute erlaubt MediaWiki seit Version 1.20; bei älteren Installationen hilft nur ein Update.

Teil 5: Rechtliches

Der Beitrag wird direkt von der fremden Instanz geladen. Deren Betreiber erfährt dabei die IP-Adresse des Besuchers und welchen Beitrag er ansieht – so wie bei jedem eingebundenen Bild von einer fremden Adresse.

Eine Vorschaubox mit Ladeknopf ist deshalb standardmäßig nicht vorgeschaltet. Die /embed-Ansicht ist eine öffentliche, cachebare Seite ohne Werbung, ohne Reichweitenmessung und ohne Profilbildung, und sie setzt für anonyme Besucher keine Cookies. Damit greift die Einwilligungspflicht für das Speichern von Informationen auf dem Endgerät (§ 165 TKG in Österreich, § 25 TDDDG in Deutschland) nicht, und für die bloße IP-Übertragung beim Abruf trägt das berechtigte Interesse nach Art. 6 DSGVO.

Zwei Dinge gehören trotzdem erledigt:

In der Datenschutzerklärung des Wikis die eingebundenen Instanzen als automatisch geladene Quellen nennen.
Bei einer Instanz, deren Betreiber du nicht einschätzen kannst, data-sperre="ja" setzen. Dann erscheint erst eine Vorschaubox und der Besucher entscheidet selbst.

Anders liegt der Fall bei Diensten, die Cookies setzen oder Nutzungsprofile bilden – dort ist die Vorschaubox Pflicht und nicht Geschmackssache.