Beiträge des eigenen Mastodon-Profil in einen WordPress-Blog einbetten

Die netten Menschen von Segu-Geschichte wollten gerne eine Mastodon-Timeline auf ihrer WordPress-Seite einbetten. Ich habe dazu diese Code-Schnipsel gefunden – aber selbsterklärend sind sie leider nicht. In diesem Blogbeitrag kommt deshalb eine Schritt-für-Schritt Anleitung dazu.

Update: Nachdem ich die Anleitung geteilt habe, bin ich auf noch viel naheliegendere Möglichkeiten aufmerksam gemacht worden. Somit kann zwischen drei Möglichkeiten ausgewählt werden:

  1. Ganz einfach: Die eigenen Angaben unter Mastofeed.com eintragen, HTML-Code generieren lassen und in die Website einfügen. Fertig!
  2. Den RSS-Feed des Profils mit einem Feedreader in die Website einbinden. Ein mögliches Plugin dazu ist z.B. dieses hier bzw. es gibt auch direkt ein RSS-Widget, was genutzt werden kann.
  3. Die von mir ursprünglich beschriebene Bastelei mit diesen Code-Schnipseln versuchen.

Ich habe nur Nummer 3 ausprobiert und beschreibe im folgenden, wie ich vorgegangen bin:

Schritt 1: Javascript-Code anpassen

In einem ersten Schritt muss ich den Javascript-Code (ganz rechts im Codepen) anpassen, so dass darin die Informationen zu meinem Mastodon-Account stehen. Dazu muss ich meine Instanz, mein Handle und meine User-ID unter Account-Settings eintragen. Meine User-ID finde ich hier. Der geänderte Abschnitt sieht bei mir dann folgendermaßen aus:

// Account settings
document.addEventListener("DOMContentLoaded", () => {
	let mapi = new MastodonApi({
		container_id: 'mt-timeline',
		container_body_id: 'mt-body',
		instance_uri: 'https://digitalcourage.social',
		user_id: '108137415195619362',
		profile_name: '@ebildungslabor',
		toots_limit: 13,
		btn_see_more: 'Weitere Tröts im Fediverse'
	});
});

Wie Dir vielleicht auffällt, habe ich auch ‚See more on Mastodon‘ durch ‚Weitere Tröts im Fediverse‘ ersetzt. Außerdm könnte ich die Anzahl der Tröts, die angezeigt werden sollen, verändern. Standardmäßig steht dort 13.

Schritt 2: Code-Integrationsmöglichkeit auf WordPress ermöglichen

Um den Javascript-Code jetzt auf die WordPress-Seite zu bekommen, brauche ich als Hilfe das Plugin ‚WPCode‘. Damit kann ich Code eintragen, der dann dort, wo ich will, auf meiner WordPress-Seite abgerufen werden kann. Ich installiere also zunächst das Plugin und akiviere es, so wie ich es von anderen Plugins kenne. Danach sollte ich den Reiter ‚Code Snippets‘ in meinem Dashbord sehen (bei mir unter den Einstellungen).

Schritt 3: Javascript auf WordPress übertragen

In diesem Schritt will ich meinen unter Schritt 1 erstellen Code auf meine WordPress-Website bringen. Dazu wähle ich unter Code Snippets ‚Add new‘ und dann ‚Add Your Custom Code (New Snippet)‘. Es öffnet sich ein Eingabeformular. Dem gebe ich einen beliebigen Titel z.B. mastodon-timeline und kopiere dann den ganzen Javascript-Code aus dem Codepen, den ich unter Schritt 1 geändert habe in das große Textfeld. Ganz wichtig: Ich muss alles reinkopieren, was im dritten Feld im Codepen steht, nicht nur die ersten Zeilen, die ich geändert habe, sondern auch das, was danach kommt. Außerdem muss ich den Code-Snippet aktivieren und einstellen, dass es ein Javascript-Code ist. Unter dem Eingabefeld stelle ich außerdem ein, dass der Code über einen Shortcode abgerufen werden soll.

Bei mir sah das dann so aus – ich habe rot markiert, wo ich überall etwas eingetragen/ geändert habe (der Code in dem Feld ist länger; da sieht man nur einen Teil davon, weil man sonst runterscrollen müsste)

Sobald ich den Code-Schnipsel abspeichere, wird mir ein Shortcode angezeigt. Den brauche ich im übernächsten Schritt.

Schritt 4: CSS anpassen

Damit die Mastodon-Timeline halbwegs realistisch auf der Website erscheint, brauche ich dafür noch das passende Design. Das finde ich ebenfalls auf dem Codepen und zwar in der Mitte. Ich kopiere mir dieses CSS vom Codepen und trage es unter CustomCSS im Theme Customizer ein.

Ganz wichtig: Ab Zeile 180 steht dort ‚/* Extra styles for Codepen */‘. Dieses CSS benötige ich nicht mehr. Ich sollte es also nur bis Zeile 179 kopieren und übertragen.

Schritt 5: Timeline anzeigen lassen

Jetzt bin ich schon fertig. Ich kann eine neue Seite oder einen neuen Beitrag anlegen und dort ganz oben direkt den Shortcode von Schritt 3 einfügen. Dort auf der Seite, wo meine Timeline erscheinen soll, wähle ich ‚HTML‘ als Format aus – und gebe dann den folgenden Code ein:

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

Jetzt kann ich die Seite speichern und mich freuen: Ich habe meine Tröts auf meiner WordPress-Seite :-)

Gutes Gelingen beim Nachmachen!

PS. Wenn Du im Fediverse bist, kannst Du diesen Beitrag von dort kommentieren.

Beitrag merken & teilen

Hier kannst Du dir den Link zum Beitrag kopieren - beispielsweise um ihn für Dich zu speichern oder mit anderen zu teilen. Wenn Du den Link in den Suchschlitz im Fediverse einfügst, kannst Du den Beitrag von dort aus kommentieren. Die Kommentare erscheinen dann nach Freigabe hier auf der Website.

1 Kommentar

@nele Ah ja, das hat geklappt. Interessant. Bin aber nicht so zufrieden damit, dass die gespiegelten Beiträge scheinbar später nicht gelöscht oder bearbeitet werden können. Das widerspricht m.E. dem mir wichtigen Grundgedanken, dass mein Content mir gehört.

Kommentierung ist via Fediverse möglich.

Ähnliche Beiträge