Posting a Minesweeper board on Tumblr
-
Copy the embed code
Generate the snippet with the board size and theme you want and copy the whole thing — the iframe and the credit paragraph beneath it. In HTML mode Tumblr takes both, so paste both.
-
Start a text post
On tumblr.com, click the pencil or + button to open the post form and choose the text post type. Give it a title if you want one — the title field is separate from the body and is not affected by the editor mode.
-
Switch the post to the HTML editor
Open the post settings from the gear icon on the post form. At the bottom of that menu is a Text Editor setting with three choices: Rich Text, Markdown and HTML. Pick HTML. The body area turns into a plain code box.
-
Paste the iframe into the body
Paste both parts where you want the game to appear, keeping the credit paragraph directly under the iframe. Anything else you write in this mode is raw HTML too, so wrap your own commentary in paragraph tags rather than relying on line breaks.
-
Post without switching back to Rich Text
Do not flip back to the rich text editor to tidy the post up. Tumblr re-parses the body when you change editors and that pass is what strips iframes and scrambles layout. Post directly from HTML mode, then open your blog page to confirm the board loads.
The one-way trip between editor modes
Tumblr gives every text post one of three editors: Rich Text (the default WYSIWYG box), Markdown, and HTML. The setting lives in the post settings behind the gear icon, not on the formatting toolbar, which is why most people never find it.
Treat the switch as one-way. Writing in rich text and then flipping to HTML to add the embed is fine. Flipping back is what destroys things: Tumblr re-parses the body through its rich text converter, and that converter has no representation for an iframe, so the tag is dropped and surrounding markup often collapses. If you need to edit the post later, edit it in HTML mode too.
A practical order of work: write the whole post first in rich text, switch to HTML once, paste the iframe in the right position, then post.
Where the board will and will not appear
Tumblr renders the same post in several different contexts and they do not all run embedded frames:
- Your blog page (
yourblog.tumblr.comand the post permalink) — the board renders and is playable. This is what to link people to. - The dashboard feed — often shows the post without the frame, because the feed renders a simplified version of post bodies.
- The iOS and Android apps — third-party iframes are frequently stripped entirely. Do not build a post whose whole point is invisible in the apps without also saying in words what people are missing and linking out.
- Reblogs — usually survive on web, usually do not in-app.
Because of that, the best pattern on Tumblr is a short post that introduces the game, contains the board, and ends with a plain text link so the post still works everywhere. Something like "if the board is not showing, the game lives here" followed by the link.
Mobile, flags and long-press
A big share of Tumblr traffic is on phones, and phones have no right mouse button. The board handles that: tap reveals a cell and long-press plants a flag. Nothing needs configuring for that to work inside the frame.
Do keep the board small. At 344 pixels wide the Beginner board is legible on a phone in portrait; the Intermediate board at 536 pixels forces the reader to scroll sideways inside the frame, which on a touch screen fights with the page's own scrolling and feels broken even though it is working.
Explicit width and height attributes matter more on Tumblr than
elsewhere, because themes vary so wildly. Leave them in rather than trying to make the frame
percentage-based. If your theme is unusually narrow, generate a smaller custom board instead,
for example ?size=7x7&mines=6.