MINESWEEPER

Ein spielbares Minesweeper auf Tumblr

Einbettungen auf Tumblr gelten als unzuverlässig – und schuld ist fast immer der Editor-Modus, nicht der Code.

Zeitaufwand
Etwa 2 Minuten
Post-Typ
Text
Editor-Modus
HTML
Sichere Spielfeldbreite
316px (9x9)
<iframe
  src="https://play-minesweeper.games/embed/?size=beginner&theme=retro"
  width="344"
  height="472"
  frameborder="0"
  title="Minesweeper Game"></iframe>
<p style="font:12px/1.5 Tahoma,'MS Sans Serif',Geneva,sans-serif;color:#555555;margin:6px 0 0;max-width:316px">
  <a href="https://play-minesweeper.games/" style="color:#555555">play-minesweeper.games</a> — free Minesweeper, no download
</p>

Beide Teile gehören hinein. Der Absatz unter dem iframe ist der Quellenlink – er hält das Einbetten kostenlos, und im HTML-Modus lässt er sich genauso sauber einfügen wie das Fenster. Lass das Inline-Attribut style weg, wenn lieber die Linkgestaltung deines Themes greifen soll.

Der Parameter theme=retro zeigt das Spielfeld im ursprünglichen Windows-95-Grau mit den harten, abgeschrägten Feldern – das passt gut zur Old-Web-Ästhetik vieler Tumblr-Blogs. Lass den Parameter weg für den schlichten modernen Look, oder nimm theme=dark passend zu einem dunklen Theme.

Füg ein iframe in den Rich-Text-Editor ein, und Tumblr wirft es stillschweigend weg; füg es in den HTML-Editor ein, und es läuft. Hier erfährst du, wo diese Einstellung versteckt ist.

Ein Minesweeper-Spielfeld auf Tumblr posten

  1. Den Einbettungscode kopieren

    Erzeug den Code mit der gewünschten Spielfeldgröße und dem gewünschten Design und kopier alles – das iframe und den Absatz mit der Quellenangabe darunter. Im HTML-Modus nimmt Tumblr beides, also füg beides ein.

  2. Einen Textpost beginnen

    Klick auf tumblr.com auf den Stift oder das +, um das Post-Formular zu öffnen, und wähl den Post-Typ Text. Gib ihm einen Titel, wenn du willst – das Titelfeld ist vom Textkörper getrennt und hängt nicht vom Editor-Modus ab.

  3. Den Post auf den HTML-Editor umstellen

    Öffne über das Zahnrad im Post-Formular die Post-Einstellungen. Ganz unten in diesem Menü steht die Einstellung „Text Editor“ mit drei Optionen: Rich Text, Markdown und HTML. Wähl HTML. Der Textbereich wird zu einem einfachen Codefeld.

  4. Das iframe in den Textkörper einfügen

    Füg beide Teile dort ein, wo das Spiel erscheinen soll, und lass den Absatz mit der Quellenangabe direkt unter dem iframe. Alles andere, was du in diesem Modus schreibst, ist ebenfalls HTML, setz deinen eigenen Text also in Absatz-Tags, statt dich auf Zeilenumbrüche zu verlassen.

  5. Posten, ohne zu Rich Text zurückzuwechseln

    Wechsle nicht zurück in den Rich-Text-Editor, um den Post aufzuräumen. Beim Editorwechsel liest Tumblr den Textkörper neu ein, und genau dabei werden iframes entfernt und das Layout durcheinandergebracht. Poste direkt aus dem HTML-Modus und öffne dann deine Blogseite, um zu prüfen, ob das Spielfeld lädt.

Eine Einbahnstraße zwischen den Editor-Modi

Tumblr gibt jedem Textpost einen von drei Editoren: Rich Text (das Standard-WYSIWYG-Feld), Markdown und HTML. Die Einstellung steckt in den Post-Einstellungen hinter dem Zahnrad, nicht in der Formatierungsleiste – deshalb finden die meisten sie nie.

Behandle den Wechsel als Einbahnstraße. In Rich Text schreiben und dann für die Einbettung auf HTML wechseln ist in Ordnung. Das Zurückwechseln zerstört die Dinge: Tumblr liest den Textkörper durch seinen Rich-Text-Konverter neu ein, und der kennt keine Darstellung für ein iframe – das Tag fällt weg, und das umgebende Markup fällt oft in sich zusammen. Willst du den Post später bearbeiten, tu das ebenfalls im HTML-Modus.

Eine praktische Reihenfolge: zuerst den ganzen Post in Rich Text schreiben, einmal auf HTML wechseln, das iframe an der richtigen Stelle einfügen, dann posten.

Wo das Spielfeld erscheint und wo nicht

Tumblr zeigt denselben Post in mehreren Umgebungen an, und nicht alle führen eingebettete Fenster aus:

  • Deine Blogseite (yourblog.tumblr.com und der Permalink des Posts) – das Spielfeld wird angezeigt und ist spielbar. Hierhin solltest du verlinken.
  • Der Dashboard-Feed – zeigt den Post oft ohne das Fenster, weil der Feed eine vereinfachte Version der Post-Inhalte darstellt.
  • Die Apps für iOS und Android – iframes von Drittanbietern werden häufig komplett entfernt. Bau keinen Post, dessen ganzer Sinn in den Apps unsichtbar ist, ohne in Worten zu sagen, was dort fehlt, und nach außen zu verlinken.
  • Reblogs – überstehen es im Web meistens, in der App meistens nicht.

Deshalb funktioniert auf Tumblr am besten ein kurzer Post, der das Spiel vorstellt, das Spielfeld enthält und mit einem einfachen Textlink endet, damit der Post überall funktioniert. Zum Beispiel „Falls das Spielfeld nicht angezeigt wird: Hier gibt es das Spiel“, gefolgt vom Link.

Handy, Flaggen und langes Drücken

Ein großer Teil des Tumblr-Traffics kommt von Handys, und Handys haben keine rechte Maustaste. Das Spielfeld kommt damit klar: Tippen deckt ein Feld auf, langes Drücken setzt eine Flagge. Damit das im Fenster funktioniert, musst du nichts einstellen.

Halt das Spielfeld aber klein. Mit 344 Pixeln Breite ist das Anfänger-Spielfeld auf dem Handy im Hochformat gut lesbar; das Fortgeschrittenen-Spielfeld mit 536 Pixeln zwingt den Leser, im Fenster seitwärts zu scrollen. Auf einem Touchscreen kollidiert das mit dem Scrollen der Seite und fühlt sich kaputt an, obwohl alles funktioniert.

Feste Attribute width und height sind auf Tumblr wichtiger als anderswo, weil die Themes so stark voneinander abweichen. Lass sie stehen, statt das Fenster prozentual anzulegen. Ist dein Theme ungewöhnlich schmal, erzeug lieber ein kleineres eigenes Spielfeld, zum Beispiel ?size=7x7&mines=6.

Fragen zum Einbetten auf Tumblr

Kann man wirklich ein iframe in einen Tumblr-Post setzen?

Ja, solange du den Post im HTML-Editor schreibst. Der Rich-Text-Editor von Tumblr behandelt eingefügtes Markup als normalen Text, und sein Umwandlungsschritt entfernt iframes – deshalb glauben so viele, Einbetten sei auf Tumblr unmöglich. Stell die Einstellung Text Editor vor dem Einfügen auf HTML, dann klappt es.

Wo ist der HTML-Editor auf Tumblr?

Nicht in der Formatierungsleiste. Öffne über das Zahnrad im Post-Formular die Post-Einstellungen – dasselbe Menü mit eigener URL, Inhaltsquelle und Post-Datum –, ganz unten steht die Option Text Editor mit Rich Text, Markdown und HTML zur Auswahl.

Warum erscheint das Spiel nicht im Tumblr-Dashboard oder in der App?

Der Dashboard-Feed und die Apps stellen Posts in einer eigenen, abgespeckten Ansicht dar und führen iframes von Drittanbietern häufig nicht aus. Zuverlässig siehst du die Einbettung auf der Seite deines Blogs. Verlinke also auf den Permalink des Posts, statt darauf zu setzen, dass es im Feed spielbar ist.

Übersteht die Einbettung einen Reblog?

In der Web-Version wird das HTML meistens in die rebloggte Kopie übernommen, in den Apps oft nicht. Geh davon aus, dass Reblogs deinen Text zeigen und das Spielfeld verlieren, und setz als Rückfallebene einen Link zum Spiel in den Post.

Welche Spielfeldgröße passt in ein Tumblr-Theme?

Die meisten Tumblr-Themes zeigen Posts in einer Spalte von etwa 500 bis 536 Pixeln. Das Anfänger-Spielfeld 9x9 mit 344 Pixeln Breite passt in jedes Theme; das Fortgeschrittenen-Spielfeld 16x16 mit 536 Pixeln passt in viele, aber eine Vorschau lohnt sich; das Experten-Spielfeld mit 956 Pixeln läuft über und wird abgeschnitten.

Kann ich das Spiel statt in einen Post in mein Tumblr-Theme setzen?

Ja. Geh in die Blog-Einstellungen, wähl Edit theme und dann Edit HTML und füg das iframe in das Markup der Seitenleiste oder der Beschreibung deines Themes ein. So steht das Spiel auf jeder Seite deines Blogs statt nur in einem Post – sichere das Theme aber vorher, denn ein kaputtes Tag dort betrifft den ganzen Blog.

Alles auf dieser Seite beginnt mit einem Code aus dem Generator: einem Spielfenster und einer einzeiligen Quellenangabe mit Link darunter. Wähl Spielfeldgröße und Design, entscheide, ob die optionale „Powered by“-Zeile im Spiel erscheinen soll, und kopier dann den Code.

Minesweeper-Generator öffnen

Ebenfalls nützlich: der Minesweeper-Widget-Generator mit allen iframe-Optionen, die Minesweeper-Spielanleitung und eigene Spielfeldgrößen.