MINESWEEPER

Comment intégrer le Démineur dans Google Sites

Google Sites dispose d’un vrai champ pour le code d’intégration : une grille de Démineur s’y insère directement.

Temps nécessaire
Environ 2 minutes
Chemin
Insérer > Intégrer
Onglet à utiliser
Code d’intégration
Prix
Gratuit, sans extension
<iframe
  src="https://play-minesweeper.games/embed/?size=beginner"
  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>

L’URL doit commencer par https://. Google Sites est servi en HTTPS et les navigateurs bloquent le contenu non sécurisé dans une page sécurisée : une adresse en http:// s’affiche comme un rectangle blanc vide, sans message d’erreur.

Colle les deux parties. Le paragraphe après l’iframe est le lien de mention qui garde l’intégration gratuite ; et sur Google Sites en particulier, lis plus bas la remarque sur le fait de lui donner une deuxième place dans une zone de texte.

L’éditeur traite toutefois ton iframe comme une boîte fixe sur une grille de mise en page, et c’est là que la plupart des intégrations Google Sites tournent mal. Voici le chemin exact dans le panneau Insérer et comment dimensionner la boîte pour que rien ne soit coupé.

Insérer le jeu avec la boîte de dialogue Intégrer

  1. Copie le code d’intégration depuis le générateur

    Choisis une taille de grille et un thème dans le générateur d’intégration et copie l’extrait complet : l’iframe et le paragraphe de mention en dessous. Google Sites accepte du HTML complet : garde les deux intacts au lieu de réduire le tout à une URL.

  2. Ouvre ta page et clique sur Insérer

    Ouvre le site sur sites.google.com, sélectionne la page qui doit accueillir le jeu, et utilise le panneau Insérer sur le côté droit de l’éditeur.

  3. Choisis Intégrer et passe à l’onglet Code d’intégration

    Clique sur Intégrer dans le panneau Insérer. La boîte de dialogue propose deux façons d’ajouter du contenu : une simple adresse web, ou un onglet Code d’intégration pour du HTML brut. Sélectionne l’onglet Code d’intégration.

  4. Colle l’iframe, clique sur Suivant, puis sur Insérer

    Colle l’extrait dans la zone de code et clique sur Suivant. Google Sites récupère un aperçu de ce qu’il va afficher ; si cet aperçu montre la grille du Démineur, clique sur Insérer pour la placer sur la page.

  5. Redimensionne la boîte sur la grille et publie

    L’intégration arrive sur la page sous forme de boîte redimensionnable. Tire ses poignées d’angle et de bord jusqu’à ce que toute la grille soit visible sans barre de défilement intérieure, puis clique sur Publier en haut à droite pour mettre la modification en ligne.

La boîte ne se redimensionne pas toute seule : règle-la avec soin

C’est ce qui distingue Google Sites de presque toutes les autres plateformes de cette série. WordPress et Neocities affichent ton iframe à la largeur que tu indiques et laissent la page s’organiser autour. Google Sites, lui, place l’intégration dans un conteneur sur sa grille de mise en page, et la taille de ce conteneur est celle que tu lui as donnée à la souris. La page intégrée n’est jamais réduite pour tenir : ce qui ne tient pas défile, tout simplement.

Donc d’abord tirer, ensuite vérifier. Donne à la boîte ces dimensions :

  • Débutant 9×9 : 344 × 472 pixels. Tient dans n’importe quelle colonne, n’importe quelle section, sur n’importe quel téléphone.
  • Intermédiaire 16×16 : 536 × 664 pixels. Tient dans une section standard sur ordinateur ; défile sur téléphone.
  • Expert 30×16 : 956 × 664 pixels. Demande une section pleine largeur et un écran d’ordinateur portable.

Donne à la boîte une dizaine de pixels de hauteur de plus que la valeur du code d’intégration. Sinon, les marges internes de Google Sites peuvent rogner la dernière rangée de cases, et un joueur qui ne peut pas atteindre la dernière rangée ne peut pas terminer la grille.

Ce que change la couche de bac à sable supplémentaire

Tout ce que tu insères via Code d’intégration est affiché dans un cadre que Google Sites contrôle lui-même : ton iframe se retrouve donc imbriquée un niveau plus profond que ce que tu as écrit. En pratique :

  • Le jeu n’est pas affecté. Le clic gauche pour révéler, le clic droit pour poser un drapeau et le clic (ou double-clic) sur un chiffre satisfait pour l’accord fonctionnent tous, car le jeu bloque lui-même le menu contextuel du navigateur.
  • Les attributs de permission peuvent être retirés. Les fonctions demandées via allow="...", comme l’accès au presse-papiers pour partager une grille terminée, peuvent être filtrées par l’enveloppe.
  • Rien de ce que tu colles ne peut toucher au reste de ton site. C’est tout l’intérêt du bac à sable, et c’est aussi pour cela que Google Sites est un endroit sûr pour héberger un jeu tiers.
  • Une boîte blanche vide signifie que la source refuse d’être encadrée. Si tu essaies avec d’autres sites, cela t’arrivera souvent ; cette page d’intégration est faite pour être encadrée, donc ici, une boîte vide signale presque toujours une faute de frappe dans l’URL.
  • La ligne de mention atterrit elle aussi dans le bac à sable. Tout ce que tu colles dans la zone Code d’intégration est affiché dans ce cadre intérieur plutôt que dans le balisage de ta propre page. Laisse-la là, mais sur Google Sites, il vaut la peine d’ajouter aussi une simple zone de texte juste sous l’intégration avec le même lien, pour que la mention se trouve dans la page elle-même, là où un lecteur (et un moteur de recherche) la rencontre vraiment. Une ligne suffit : « Minesweeper by play-minesweeper.games », avec les mots en lien.

Remarques pour la classe et l’intranet

Une bonne partie des pages Google Sites sont des sites de classe, des pages de club et des espaces d’équipe internes, et une grille de Démineur convient aux trois : elle ne demande aucune connexion, n’enregistre rien, ne fait aucun bruit et se termine en moins d’une minute en Débutant.

Deux points à vérifier avant de publier pour des élèves. D’abord, la portée de la publication : la boîte de dialogue Publier permet de réserver le site à ton organisation, et l’intégration se comporte de la même façon dans les deux cas. Ensuite, le filtrage réseau : les réseaux scolaires qui bloquent en bloc les domaines de jeux bloqueront aussi le cadre, et la page affichera une boîte vide. Fais le test sur le réseau de l’établissement plutôt qu’à la maison. Si le jeu est bloqué, nos notes sur le Démineur à l’école expliquent ce qui passe en général.

Pour une grille assez rapide à finir pendant une pause, génère le code avec une grille personnalisée plus petite, par exemple ?size=8x8&mines=8, qui tient sans peine dans une section latérale d’une page de classe.

Questions sur l’intégration dans Google Sites

Pourquoi mon intégration Google Sites a-t-elle des barres de défilement autour du jeu ?

Google Sites donne à chaque intégration une boîte de taille fixe et ne réduit pas le contenu qu’elle renferme. Si la boîte est plus petite que la largeur et la hauteur de l’iframe, tu obtiens des barres de défilement au lieu d’une grille plus petite. Tire la boîte jusqu’à ce qu’elle soit au moins aussi grande que les dimensions du code d’intégration : 344 sur 472 pixels pour la grille Débutant.

Est-ce que cela marche avec un compte Google Workspace scolaire ou professionnel ?

En général oui, mais un administrateur Workspace peut restreindre ce que Google Sites a le droit d’intégrer pour les comptes gérés. Si l’option Intégrer manque dans le panneau Insérer, ou si l’aperçu reste vide pour toutes les URL que tu essaies, c’est une règle de l’administrateur et non un problème de code : un compte Google personnel fonctionnera normalement.

Peut-on afficher le jeu en pleine largeur dans Google Sites ?

Passe la section en mise en page pleine largeur dans la barre d’outils de la section, puis élargis la boîte d’intégration. La zone de contenu standard de Google Sites fait environ 1 000 pixels : la grille Expert 30x16, avec ses 956 pixels, ne tient que dans une section pleine largeur affichée sur un ordinateur portable ou plus grand.

Les visiteurs ont-ils besoin d’un compte Google pour jouer ?

Non. Le jeu lui-même ne demande aucun compte. Qu’un visiteur puisse voir la page dépend de tes propres paramètres de partage : un site publié pour tout le monde sur Internet est jouable par toute personne qui a le lien.

Pourquoi le bouton pour copier son résultat ne marche-t-il pas dans Google Sites ?

Google Sites enveloppe tout ce que tu colles dans son propre cadre en bac à sable, et les attributs de permission comme allow="clipboard-write" ne survivent pas toujours à cette couche supplémentaire. Jouer, poser des drapeaux et recommencer fonctionnent normalement ; seules les actions sur le presse-papiers peuvent être bloquées. Les lecteurs peuvent toujours ouvrir le jeu dans un nouvel onglet pour partager un résultat.

Comment l’intégration se comporte-t-elle sur téléphone ?

Google Sites réduit la boîte sur les écrans étroits mais ne remet pas en forme la page intégrée : une grille large devient une petite fenêtre à faire défiler. Utilise la grille Débutant 9x9 sur tout site qui reçoit un vrai trafic mobile, et vérifie l’aperçu avec l’icône de téléphone de la barre d’outils de l’éditeur avant de publier.

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.