Mahjong Solitaire inbedden op je website of blog

We zijn blij een nieuwe functie op TheMahjong.com te kunnen introduceren. Vanaf nu kun je onze Mahjong Solitaire-game rechtstreeks in je eigen website of blog inbedden. Of je nu een kleine persoonlijke blog, een gameportaal of een pagina over puzzels en hersentraining beheert, je bezoekers kunnen Mahjong Solitaire nu direct op jouw site spelen.

In dit artikel leggen we uit hoe de nieuwe inbedfunctie werkt, voor wie zij bedoeld is en hoe je een Mahjong Solitaire-spel aan je site kunt toevoegen.

Waarom we de inbedfunctie hebben toegevoegd

Mahjong Solitaire past van nature bij verschillende soorten content — handleidingen over puzzels, thematische artikelen, pagina’s over geheugen en aandacht of eenvoudige verzamelingen van lay-outs. In al deze gevallen werkt het beter als het spel direct op de pagina staat dan wanneer je alleen naar een andere site linkt.

Met de inbedfunctie kan dat zonder dat je hoeft te veranderen hoe je site is opgebouwd. Ze werkt als een klein, zelfstandig game-blok dat precies daar onderdeel van je pagina wordt waar jij dat wilt. Je voegt alleen een kleine code-snippet aan de pagina toe en wij doen de rest: het spel wordt vanaf onze servers geladen, blijft up-to-date en werkt precies zoals op TheMahjong.com.

Twee manieren om Mahjong Solitaire in te bedden

Er zijn twee eenvoudige manieren om Mahjong Solitaire aan je pagina’s toe te voegen:

• iframe, dat op bijna elke website werkt;
• oEmbed, dat door veel populaire contentmanagementsystemen (CMS) wordt ondersteund.

Beide opties tonen hetzelfde spel. Het verschil zit alleen in de manier waarop je het aan je pagina toevoegt.

Optie 1: eenvoudig inbedden met een iframe

Met de iframe-optie krijg je een korte HTML-snippet die je in je pagina kunt plakken. Dit werkt goed als je de HTML van je site kunt bewerken of als je editor een blok voor aangepaste code heeft.

Een typisch iframe-embed ziet er zo uit:

<iframe 
  src="https://themahjong.com/shared-game" 
  title="Mahjong game" 
  loading="lazy" 
  allowFullScreen 
  style="width:100%;height:600px;border:none">
</iframe>

Je kunt het volgende doen:

• dit blok plaatsen waar je wilt dat het spel verschijnt;
• de width in procenten aanpassen zodat het spel zich aanpast aan de breedte van de container;
• de height in pixels aanpassen zodat het beter bij de lay-out van je pagina past.

Als je TheMahjong.com wilt steunen, kun je in de buurt van het ingesloten spel een kleine tekstlink terug naar onze site plaatsen. Dat is niet verplicht, maar wordt altijd gewaardeerd.

Optie 2: oEmbed voor CMS-platforms

Als je site draait op een CMS dat oEmbed ondersteunt (bijvoorbeeld WordPress, Drupal of Joomla met de juiste plugins), kun je de inbedfunctie gebruiken zonder zelf met iframe-HTML te werken.

Elke pagina "Delen" heeft de lay-out-URL en de oEmbed-code.

Sommige editors kunnen de lay-out-URL automatisch omzetten in een ingesloten spel. Je plakt de URL gewoon in een blok dat ingesloten content ondersteunt. In andere omgevingen moet je mogelijk de oEmbed-code plakken in een speciaal veld of blok dat door een thema of plugin wordt aangeboden.

Als je CMS alleen een gewone link toont in plaats van het spel, betekent dat meestal dat oEmbed niet is ingeschakeld of niet wordt ondersteund in dat deel van de editor.

Waar inbedden extra goed werkt

Inbedden is vooral zinvol op pagina’s waar het spel het onderwerp ondersteunt in plaats van ervan af te leiden. Hier zijn een paar plekken waar een Mahjong Solitaire-blok bijzonder goed kan werken:

• Thematische blogberichten en artikelen. Als je schrijft over puzzels, ontspannende games, focus of korte pauzes overdag, kan een ingesloten Mahjong Solitaire-lay-out naast de tekst staan als een klein interactief voorbeeld. Je kunt een lay-out kiezen die globaal bij het onderwerp past, zodat het spel niet willekeurig aanvoelt op de pagina.
• Spel- en puzzelrubrieken op een website. Op sites die al een sectie „Spellen” of „Puzzels” hebben, kan een ingesloten mahjong-spel een van de hoofdelementen op de pagina zijn in plaats van alleen een link. Dit werkt zowel voor kleine persoonlijke projecten als voor grotere portalen die nog een klassieke puzzel willen toevoegen zonder die zelf te hoeven bouwen.
• Pagina’s over geheugen, aandacht en training. Artikelen over concentratie, patroonherkenning of eenvoudige dagelijkse oefeningen voor de hersenen kunnen baat hebben bij een speelbaar voorbeeld. Mahjong Solitaire past daar goed bij als laagdrempelige activiteit die lezers meteen kunnen uitproberen, zonder iets te hoeven installeren of de pagina te verlaten.
• Seizoens- of evenementgerichte pagina’s. Voor seizoensgebonden content (herfstthema’s, winterfeesten, lokale festivals) kun je lay-outs inbedden die passen bij de sfeer van de pagina. Bijvoorbeeld een lay-out met een sterrenbeeld bij je dagelijkse astrologische voorspelling. Een thematische lay-out naast de hoofdtekst laat de pagina completer aanvoelen en geeft bezoekers een reden om net wat langer te blijven.
• Community-hubs en „even pauze nemen”-pagina’s. Sommige communities, forums of teamsites hebben een eenvoudige pagina „even pauze nemen” of „speel een minuutje”. Een ingesloten Mahjong Solitaire-lay-out past daar heel natuurlijk als een kleine, zelfstandige activiteit die geen registratie of downloads vereist.

Prestaties en laden

Het ingesloten spel wordt via HTTPS vanaf TheMahjong.com geladen. Het gebruikt dezelfde code en dezelfde resources als de hoofdsite, dus de prestaties zijn vergelijkbaar: zodra het spel in de cache staat, zouden lay-outs bij volgende bezoeken snel moeten laden.

Als je het spel inbedt met het loading="lazy"-attribuut in het iframe, wachten de meeste browsers met laden totdat de speler ernaartoe scrolt. Dit kan helpen om je pagina responsief te houden, vooral als je meer dan één embed op dezelfde pagina hebt.

We hopen dat deze nieuwe inbedfunctie een mooie plek op je site zal krijgen. Of je haar nu in één enkel artikel gebruikt of als onderdeel van een spelletjessectie, voel je vrij om te experimenteren met verschillende lay-outs en posities totdat het natuurlijk bij je content past.