Mastodon Timeline in WordPress einbinden

Vorweg: Bevor Du folgendes in Deinem Blog anwendest, mache bitte unbedingt ein Backup Deiner WordPress-Installation. Ich übernehme keine Garantie für etwaige Schäden an Deinem Blog.

Schon länger war ich auf der Suche nach einer Möglichkeit, meine Mastodon-Timeline in meinen Blog einzubinden.

Gestern bin ich auf eine Möglichkeit vom idotj gestoßen. Die dafür notwendigen Dateien kannst Du auf Github downloaden. Du kannst es auch auf anderen Webseiten verwenden, für WordPress weicht aber die Installation etwas von der auf Github Beschriebenen Vorgehensweise ab. Deswegen habe ich mich hier mal dran gesetzt und ein kleines HowTo geschrieben, wie Du Deine TL auf einer WordPress-Seite einbinden kannst.

Als erstes lädst Du Dir die Zip-Datei von Github runter und entpackst sie. Wenn Du jetzt nach der Beschreibung gehst, wird zwar kein Fehler generiert, aber die TL wird nicht angezeigt.

In dem Download von Github findest Du nach dem Entpacken einen Ordner namens „src“ und drei Textdateien. Den Ordner src öffnest Du, und darin befinden sich eine CSS-Datei und eine JS-Datei. Nur diese zwei benötigst Du.

Als nächstes öffnest Du mit einem geeigneten Programm (ich benutze Notepad++) die JS-Datei mastodon-timeline.js. Darin findest Du oben folgendes, was Du mit Deinen Daten anpassen musst:

    instance_uri:   'Deine Mastodon Instanz',
    user_id:        'Deine User ID auf Mastodon',
    profile_name:   'Deinen Usernamen auf Mastodon',

Als Beispiel, mit meinen Daten schaut das so aus:

    instance_uri: 'https://socialwagrien.de',
    user_id: '108209857500988898',
    profile_name: '@fressgestoert',

Weißt Du Deine Mastodon-ID nicht, kannst Du sie hier herausfinden.

Als nächstes musst Du die page.php aus Deinem aktuellen Theme bearbeiten. Du findest sie in Deiner WordPress-Installation unter wp-content => themes => Dein Theme. Dazu einfach per FTP downloaden und in Notepad zum Bearbeiten öffnen. In die page.php gibst Du nun folgende zwei Zeilen vor dem Ende des main-tags ein.

<link rel="stylesheet" href="mastodon-timeline.css">
<script src='mastodon-timeline.js'></script>

Bei mir habe ich es direkt über folgendem Tag eingefügt.

    </main><!-- #content -->

Jetzt die veränderte page.php abspeichern und wieder per FTP in den Theme-Ordner hoch laden.

Dann benötigst Du das Plugin Simple Custom CSS and JS in der kostenlosen Version. Das installierst Du in deinem WordPress-Blog und aktivierst es.

In der Sidebar siehst Du nun den Menüpunkt Individuelles CSS und JS. Diesen öffnest Du und klickst ganz oben auf JS-Code hinzufügen. Nun kopierst Du den gesamten Inhalt der mastodon-timeline.js in die Du Deine Mastodon-Daten eingegeben hast dorthin, und klickst auf veröffentlichen.

Genau das Selbe machst Du nun mit der mastodon-timeline.css aus dem Github-Download. Du klickst oben auf CSS-Code hinzufügen, kopierst den gesamten Inhalt aus der Datei und klickst auf veröffentlichen.

Jetzt musst Du nur noch eine Seite in WordPress erstellen (keinen Beitrag) und fügst mit dem Block für Individuelles HTML folgenden Code ein:

<div id="mt-timeline" class="mt-timeline">
    <div id="mt-body" class="mt-body">
        <div class="loading-spinner"></div>
    </div>
</div>

Und das war es auch schon. Wenn Du alles richtig gemacht hast, sollte nun deine Mastodon-TL auf Deiner erstellten WordPress-Seite zu sehen sein.

Jetzt kannst Du noch in der mastodon-timeline.css das Layout der Timeline an Deine Bedürfnisse anpassen. Da hier ja jeder andere Ansprüche hat, habe ich dazu jetzt nichts geschrieben.

In meinem Blog schaut das so aus.

Wenn Fragen dazu sind, gerne hier in die Kommentare oder auf Mastodon. Ich versuche zu helfen.