MINESWEEPER

Cómo poner un Buscaminas jugable en Tumblr

Los juegos insertados en Tumblr tienen fama de no funcionar, y la razón casi siempre es el modo del editor, no el código.

Tiempo necesario
Unos 2 minutos
Tipo de publicación
Texto
Modo del editor
HTML
Ancho seguro del tablero
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>

Van las dos partes. El párrafo bajo el iframe es el enlace de crédito: es lo que mantiene gratis el widget, y en modo HTML se pega tan limpio como el marco. Quita el atributo style en línea si prefieres que mande el estilo de enlaces de tu propio tema.

El parámetro theme=retro muestra el tablero en el gris original de Windows 95, con las casillas en relieve marcado, que queda bien junto a la estética de la web antigua que usan muchos blogs de Tumblr. Quita el parámetro para el aspecto limpio y moderno, o usa theme=dark para que combine con un tema oscuro.

Pega un iframe en el editor de texto enriquecido y Tumblr lo tira sin avisar; pégalo en el editor HTML y se juega sin problema. Aquí tienes dónde se esconde ese ajuste.

Publicar un tablero del Buscaminas en Tumblr

  1. Copia el código para insertar

    Genera el fragmento con el tamaño de tablero y el tema que quieras y cópialo entero: el iframe y el párrafo de crédito que va debajo. En modo HTML Tumblr acepta las dos partes, así que pega las dos.

  2. Empieza una publicación de texto

    En tumblr.com, haz clic en el lápiz o en el botón + para abrir el formulario de publicación y elige el tipo de publicación de texto. Ponle un título si quieres: el campo del título está separado del cuerpo y no le afecta el modo del editor.

  3. Cambia la publicación al editor HTML

    Abre los ajustes de la publicación desde el icono del engranaje del formulario. Al final de ese menú hay un ajuste Text Editor con tres opciones: Rich Text, Markdown y HTML. Elige HTML. La zona del cuerpo se convierte en una caja de código sin formato.

  4. Pega el iframe en el cuerpo

    Pega las dos partes donde quieras que aparezca el juego, con el párrafo de crédito justo debajo del iframe. Todo lo demás que escribas en este modo también es HTML sin procesar, así que envuelve tus propios comentarios en etiquetas de párrafo en vez de fiarte de los saltos de línea.

  5. Publica sin volver a Rich Text

    No vuelvas al editor de texto enriquecido para arreglar la publicación. Tumblr vuelve a analizar el cuerpo cuando cambias de editor, y esa pasada es la que elimina los iframes y desordena el diseño. Publica directamente desde el modo HTML y luego abre la página de tu blog para confirmar que el tablero se carga.

El viaje sin vuelta entre los modos del editor

Tumblr da a cada publicación de texto uno de tres editores: Rich Text (la caja visual predeterminada), Markdown y HTML. El ajuste está en los ajustes de la publicación, detrás del icono del engranaje, y no en la barra de formato, por eso la mayoría de la gente nunca lo encuentra.

Trata el cambio como un viaje de ida. Escribir en texto enriquecido y luego pasar a HTML para añadir el juego no da problemas. Lo que lo destroza todo es volver atrás: Tumblr vuelve a pasar el cuerpo por su conversor de texto enriquecido, y ese conversor no tiene forma de representar un iframe, así que la etiqueta desaparece y el código de alrededor a menudo se desmorona. Si necesitas editar la publicación más tarde, edítala también en modo HTML.

Un orden de trabajo práctico: escribe primero toda la publicación en texto enriquecido, cambia a HTML una sola vez, pega el iframe en su sitio y publica.

Dónde aparecerá el tablero y dónde no

Tumblr muestra la misma publicación en varios contextos distintos, y no todos ejecutan marcos insertados:

  • La página de tu blog (yourblog.tumblr.com y el enlace permanente de la publicación): el tablero se muestra y se puede jugar. Es lo que debes enlazar.
  • El feed del panel (dashboard): a menudo muestra la publicación sin el marco, porque el feed presenta una versión simplificada del cuerpo de las publicaciones.
  • Las apps de iOS y Android: los iframes de terceros se eliminan con frecuencia por completo. No hagas una publicación cuyo único sentido sea invisible en las apps sin decir también con palabras qué se están perdiendo y enlazar fuera.
  • Los reblogueos: en la web suelen conservarlo; en la app, normalmente no.

Por eso, lo mejor en Tumblr es una publicación corta que presente el juego, contenga el tablero y termine con un enlace de texto normal, para que la publicación siga funcionando en todas partes. Algo como «si no ves el tablero, el juego está aquí» seguido del enlace.

Móvil, banderas y pulsación larga

Una gran parte del tráfico de Tumblr llega desde móviles, y los móviles no tienen botón derecho. El tablero lo tiene resuelto: tocar descubre una casilla y mantener pulsado pone una bandera. No hay que configurar nada para que funcione dentro del marco.

Eso sí, mantén pequeño el tablero. Con 344 píxeles de ancho, el tablero de Principiante se lee bien en un móvil en vertical; el de Intermedio, con 536 píxeles, obliga al lector a desplazarse de lado dentro del marco, y en una pantalla táctil eso choca con el desplazamiento de la propia página y parece roto aunque funcione.

Los atributos width y height explícitos importan más en Tumblr que en otros sitios, porque los temas varían muchísimo. Déjalos puestos en lugar de intentar que el marco use porcentajes. Si tu tema es especialmente estrecho, genera mejor un tablero personalizado más pequeño, por ejemplo ?size=7x7&mines=6.

Preguntas sobre insertar en Tumblr

¿De verdad se puede poner un iframe en una publicación de Tumblr?

Sí, siempre que escribas la publicación en el editor HTML. El editor de texto enriquecido de Tumblr trata el código pegado como texto literal y su conversión elimina los iframes, por eso tanta gente concluye que en Tumblr no se puede insertar nada. Cambiar el ajuste Text Editor a HTML antes de pegar lo soluciona.

¿Dónde está el editor HTML en Tumblr?

No está en la barra de formato. Abre el icono del engranaje del formulario de publicación para llegar a los ajustes de la publicación (el mismo menú que contiene la URL personalizada, la fuente del contenido y la fecha de publicación), y la opción Text Editor está al final, con Rich Text, Markdown y HTML como opciones.

¿Por qué el juego no aparece en el panel ni en la app de Tumblr?

El feed del panel y las apps móviles muestran las publicaciones con su propia vista simplificada y a menudo no ejecutan iframes de terceros. El sitio fiable para ver el juego es la propia página de tu blog, así que enlaza a la publicación permanente en vez de esperar que se juegue dentro del feed.

¿El juego sobrevive a un reblogueo?

En la versión web, el HTML suele pasar a la copia reblogueada. En las apps, a menudo no. Da por hecho que los reblogueos mostrarán tu texto y perderán el tablero, y pon un enlace al juego en el cuerpo de la publicación como alternativa.

¿Qué tamaño de tablero cabe en un tema de Tumblr?

La mayoría de los temas de Tumblr muestran las publicaciones en una columna de unos 500 a 536 píxeles. El tablero de Principiante 9x9, de 344 píxeles de ancho, cabe en cualquier tema; el de Intermedio 16x16, de 536 píxeles, cabe en muchos, pero conviene previsualizarlo; el de Experto, de 956 píxeles, se saldrá y quedará recortado.

¿Puedo poner el juego en mi tema de Tumblr en vez de en una publicación?

Sí. Ve a los ajustes de tu blog, elige Edit theme y luego Edit HTML, y pega el iframe en el código de la barra lateral o de la descripción de tu tema. Así el juego está en todas las páginas de tu blog y no en una sola publicación; pero haz antes una copia del tema, porque una etiqueta rota ahí afecta a todo el blog.

Todo lo de esta página empieza con un fragmento del generador: un marco con el juego y un enlace de crédito de una línea que va debajo. Elige el tamaño del tablero y el tema, decide si quieres mostrar la línea opcional «Powered by» dentro del juego y copia el código.

Abrir el generador para insertar el Buscaminas

También te será útil: el generador del widget del Buscaminas y las opciones del iframe, cómo jugar al Buscaminas y los tamaños de tablero personalizados.