MINESWEEPER

Comment mettre un Démineur jouable sur Tumblr

Les intégrations sur Tumblr ont la réputation de ne pas marcher, et la raison tient presque toujours au mode de l’éditeur plutôt qu’au code.

Temps nécessaire
Environ 2 minutes
Type de billet
Texte
Mode de l’éditeur
HTML
Largeur de grille sûre
316 px (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>

Les deux parties y vont. Le paragraphe sous l’iframe est le lien de mention : c’est ce qui garde l’intégration gratuite, et en mode HTML il se colle aussi proprement que le cadre. Retire l’attribut style en ligne si tu préfères que le style de lien de ton thème prenne le relais.

Le paramètre theme=retro affiche la grille dans le gris d’origine de Windows 95, avec ses cases nettement biseautées, ce qui va bien avec l’esthétique du Web d’antan de nombreux blogs Tumblr. Retire le paramètre pour le look moderne et épuré, ou utilise theme=dark pour un thème sombre.

Colle une iframe dans l’éditeur de texte enrichi et Tumblr la jette sans rien dire ; colle-la dans l’éditeur HTML et le jeu marche très bien. Voici où se cache ce réglage.

Publier une grille de Démineur sur Tumblr

  1. Copie le code d’intégration

    Génère l’extrait avec la taille de grille et le thème voulus et copie-le en entier : l’iframe et le paragraphe de mention en dessous. En mode HTML, Tumblr accepte les deux, alors colle les deux.

  2. Commence un billet texte

    Sur tumblr.com, clique sur le crayon ou sur le bouton + pour ouvrir le formulaire de publication et choisis le type de billet texte. Donne-lui un titre si tu veux : le champ du titre est séparé du corps et n’est pas concerné par le mode de l’éditeur.

  3. Passe le billet dans l’éditeur HTML

    Ouvre les réglages du billet avec l’icône d’engrenage du formulaire. Tout en bas de ce menu se trouve un réglage Text Editor avec trois choix : Rich Text, Markdown et HTML. Choisis HTML. La zone du corps devient une simple zone de code.

  4. Colle l’iframe dans le corps

    Colle les deux parties à l’endroit où le jeu doit apparaître, en gardant le paragraphe de mention juste sous l’iframe. Tout ce que tu écris d’autre dans ce mode est aussi du HTML brut : entoure donc ton propre texte de balises de paragraphe au lieu de compter sur les retours à la ligne.

  5. Publie sans revenir au texte enrichi

    Ne repasse pas à l’éditeur de texte enrichi pour remettre le billet en forme. Tumblr réanalyse le corps quand tu changes d’éditeur, et c’est ce passage qui supprime les iframes et chamboule la mise en page. Publie directement depuis le mode HTML, puis ouvre la page de ton blog pour vérifier que la grille se charge.

Le changement de mode d’éditeur est un aller simple

Tumblr donne à chaque billet texte l’un de trois éditeurs : Rich Text (la zone WYSIWYG par défaut), Markdown et HTML. Le réglage se trouve dans les réglages du billet, derrière l’icône d’engrenage, et non dans la barre de mise en forme : c’est pour cela que la plupart des gens ne le trouvent jamais.

Considère le changement comme un aller simple. Écrire en texte enrichi puis passer en HTML pour ajouter l’intégration ne pose aucun problème. C’est le retour qui casse tout : Tumblr réanalyse le corps avec son convertisseur de texte enrichi, qui n’a aucune représentation pour une iframe ; la balise disparaît et le balisage autour s’effondre souvent. Si tu dois modifier le billet plus tard, modifie-le aussi en mode HTML.

Un ordre de travail pratique : écris d’abord tout le billet en texte enrichi, passe une seule fois en HTML, colle l’iframe au bon endroit, puis publie.

Où la grille s’affiche, et où elle ne s’affiche pas

Tumblr affiche le même billet dans plusieurs contextes, et tous n’exécutent pas les cadres intégrés :

  • La page de ton blog (yourblog.tumblr.com et le permalien du billet) : la grille s’affiche et se joue. C’est vers elle qu’il faut envoyer les gens.
  • Le fil du tableau de bord : affiche souvent le billet sans le cadre, car le fil rend une version simplifiée du corps des billets.
  • Les applications iOS et Android : les iframes tierces y sont souvent supprimées purement et simplement. Ne construis pas un billet dont tout l’intérêt est invisible dans les applications sans dire aussi en toutes lettres ce que les gens ratent et sans mettre un lien vers l’extérieur.
  • Les reblogs : survivent en général sur le Web, en général pas dans les applications.

C’est pourquoi le meilleur schéma sur Tumblr est un billet court qui présente le jeu, contient la grille et se termine par un simple lien texte, pour que le billet fonctionne partout. Par exemple « si la grille ne s’affiche pas, le jeu se trouve ici », suivi du lien.

Mobile, drapeaux et appui long

Une grosse part du trafic de Tumblr vient des téléphones, et un téléphone n’a pas de bouton droit. La grille s’en charge : toucher révèle une case et un appui long plante un drapeau. Rien à configurer pour que cela fonctionne dans le cadre.

Garde en revanche une grille petite. Avec 344 pixels de large, la grille Débutant reste lisible sur un téléphone en portrait ; la grille Intermédiaire, avec 536 pixels, oblige le lecteur à faire défiler sur le côté à l’intérieur du cadre, ce qui, sur un écran tactile, se bat avec le défilement de la page et donne une impression de panne alors que tout fonctionne.

Les attributs width et height explicites comptent plus sur Tumblr qu’ailleurs, parce que les thèmes varient énormément. Laisse-les plutôt que d’essayer de rendre le cadre proportionnel. Si ton thème est particulièrement étroit, génère plutôt une grille personnalisée plus petite, par exemple ?size=7x7&mines=6.

Questions sur l’intégration dans Tumblr

Peut-on vraiment mettre une iframe dans un billet Tumblr ?

Oui, à condition d’écrire le billet dans l’éditeur HTML. L’éditeur de texte enrichi de Tumblr traite le balisage collé comme du texte littéral et son passage de conversion retire les iframes : voilà pourquoi tant de gens concluent qu’intégrer est impossible sur Tumblr. Passer le réglage Text Editor sur HTML avant de coller règle le problème.

Où est l’éditeur HTML sur Tumblr ?

Pas dans la barre de mise en forme. Ouvre l’icône d’engrenage du formulaire de publication pour accéder aux réglages du billet (le même menu que l’URL personnalisée, la source du contenu et la date du billet) : l’option Text Editor se trouve tout en bas, avec Rich Text, Markdown et HTML comme choix.

Pourquoi le jeu n’apparaît-il pas dans le tableau de bord ou l’application Tumblr ?

Le fil du tableau de bord et les applications mobiles affichent les billets dans leur propre vue allégée et n’exécutent souvent pas les iframes tierces. L’endroit fiable pour voir l’intégration est la page de ton propre blog : envoie donc les gens vers le permalien du billet au lieu de compter sur un affichage dans le fil.

L’intégration survit-elle à un reblog ?

Sur la version web, le HTML passe en général dans la copie rebloguée. Dans les applications, souvent pas. Pars du principe que les reblogs montreront ton texte et perdront la grille, et mets un lien vers le jeu dans le corps du billet en solution de repli.

Quelle taille de grille tient dans un thème Tumblr ?

La plupart des thèmes Tumblr affichent les billets dans une colonne d’environ 500 à 536 pixels. La grille Débutant 9x9, avec 344 pixels de large, tient dans tous les thèmes ; la grille Intermédiaire 16x16, avec 536 pixels, tient dans beaucoup mais mérite un aperçu ; la grille Expert, avec 956 pixels, débordera et sera coupée.

Peut-on mettre le jeu dans son thème Tumblr plutôt que dans un billet ?

Oui. Va dans les réglages de ton blog, choisis Edit theme, puis Edit HTML, et colle l’iframe dans le balisage de la barre latérale ou de la description de ton thème. Le jeu se trouve alors sur toutes les pages de ton blog plutôt que dans un seul billet. Mais sauvegarde d’abord le thème, car une balise cassée à cet endroit touche tout le blog.

Tout ce qui figure sur cette page part d’un extrait du générateur : un cadre de jeu et, en dessous, une ligne de mention avec un lien. Choisis une taille de grille et un thème, décide si tu affiches la ligne facultative « Powered by » à l’intérieur du jeu, puis copie le code.

Ouvrir le générateur d’intégration du Démineur

Également utile : le générateur de widget Démineur et les options de l’iframe, comment jouer au Démineur et les tailles de grille personnalisées.