Platform guide
How to Put a Playable Minesweeper on Tumblr
Tumblr embeds have a reputation for not working, and the reason is almost always the editor mode rather than the code. Paste an iframe into the rich text editor and Tumblr quietly throws it away; paste it into the HTML editor and it plays fine. Here is where that setting hides.
- Time needed
- About 2 minutes
- Post type
- Text
- Editor mode
- HTML
- Safe board width
- 316px (9x9)
<iframe
src="https://play-minesweeper.games/embed/?size=beginner&theme=retro"
width="316"
height="437"
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</a> — free online Minesweeper, no download
</p>
Both parts go in. The paragraph under the iframe is the credit link — it is what keeps the
embed free, and in HTML mode it pastes as cleanly as the frame does. Drop the inline
style attribute if you would rather your theme's own link styling took over.
The theme=retro parameter renders the board in the original Windows 95 grey with
the hard bevelled cells, which sits well next to the old-web aesthetic a lot of Tumblr blogs
run. Drop the parameter for the clean modern look, or use theme=dark to match a
dark theme.
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 316 pixels wide the Beginner board is legible on a phone in portrait; the Intermediate board at 540 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.
Tumblr embed questions
- Can you actually put an iframe in a Tumblr post?
- Yes, as long as you write the post in the HTML editor. Tumblr’s rich text editor treats pasted markup as literal text and its conversion pass removes iframes, which is why so many people conclude embedding is impossible on Tumblr. Switching the Text Editor setting to HTML before you paste solves it.
- Where is the HTML editor on Tumblr?
- It is not on the formatting toolbar. Open the gear icon on the post form to reach the post settings — the same menu that holds the custom URL, content source and post date — and the Text Editor option sits at the bottom with Rich Text, Markdown and HTML as the choices.
- Why does the game not show up in the Tumblr dashboard or app?
- The dashboard feed and the mobile apps render posts through their own stripped-down view and frequently do not run third-party iframes. The reliable place to see the embed is your blog’s own page, so link people to the permalink post rather than expecting it to play inline in the feed.
- Will the embed survive a reblog?
- On the web version the HTML usually carries through to the reblogged copy. In the apps it often does not. Assume reblogs will show your text and lose the board, and put a link to the game in the post body as a fallback.
- What size board fits a Tumblr theme?
- Most Tumblr themes render posts in a column of roughly 500 to 540 pixels. The Beginner 9x9 board at 316 pixels wide fits every theme; the Intermediate 16x16 board at 540 pixels fits many but is worth previewing; the Expert board at 988 pixels will overflow and get clipped.
- Can I put the game in my Tumblr theme instead of a post?
- Yes. Go to your blog settings, choose Edit theme, then Edit HTML, and paste the iframe into the sidebar or description markup of your theme. That keeps the game on every page of your blog rather than in one post — but back the theme up first, because a broken tag there affects the whole blog.
Everything on this page starts with a snippet from the generator: a game frame plus a one-line credit link that goes under it. Pick a board size and theme, decide whether to show the optional "Powered by" line inside the game, then copy the code.
Open the Minesweeper embed generator