So fügen Sie Spiele zu Ihrer Website hinzu

Die meisten Websites sind darauf ausgelegt, gelesen, überflogen oder angeklickt zu werden. Das ist zwar nützlich, kann aber auch statisch wirken. Ein einfaches Browserspiel bietet Besuchern eine Beschäftigung, ohne dass sie eine App herunterladen, ein Spielerkonto erstellen oder die Seite verlassen müssen.

Am einfachsten fügen Sie Spiele zu Ihrer Website hinzu, indem Sie ein Spiel oder ein Spiele-Widget verwenden. Sie platzieren einen kleinen HTML-Codeausschnitt auf einer Seite, und das Spiel läuft in einem separaten Frame. Spiele sind genau für diesen Zweck entwickelt worden: schlanke Browserspiele, die sich nahtlos in Blogs, WordPress-Websites, Websites kleiner Unternehmen, Community-Seiten, Schulen, Restaurants und Entwicklerprojekte einfügen.

Kurz gesagt: Wie fügt man Spiele zu einer Webseite hinzu?

Um Spiele zu Ihrer Website hinzuzufügen, wählen Sie ein Browserspiel aus, kopieren Sie den iframe- oder Spiel-Widget-Code des Anbieters, fügen Sie ihn in Ihr CMS oder Ihre App ein, testen Sie den embed auf Mobilgeräten und veröffentlichen Sie die Seite mit hilfreichem Text rund um das Spiel. Bei Games I Know und Embed verwendet der iframe eine dedizierte /embed/{gameSlug}/frame/-URL und eine Mandanten-ID aus Ihrer Partnerkonfiguration.

1. Wählen Sie ein Spiel, das zur Seite und zur Zielgruppe passt.
2. Verwenden Sie die vom embed-Portal bereitgestellte Frame-URL iframe.
3. Fügen Sie iframe in WordPress, einen Website-Builder oder Ihre React/Next.js-Komponente ein.
4. Legen Sie eine stabile Höhe, ein klares Titelattribut, verzögertes Laden und Vollbildunterstützung fest.
5. Sehen Sie sich die Seite vor der Veröffentlichung auf Mobilgeräten und Desktop-Computern in der Vorschau an.

Was ist ein Spiele-Widget für eine Website?

Ein Website-Spiel-Widget ist ein kleines, spielbares Browserspiel, das in eine normale Webseite eingebunden ist. In den meisten praktischen Konfigurationen handelt es sich um ein iframe: Das Spiel wird vom Provider gehostet, während Ihre Webseite die Inhalte der umgebenden Artikel, Landingpages, Ressourcenseiten oder Unternehmensseiten steuert.

Warum sollte man Spiele auf seiner Website einbinden?

Ein Spiel muss Ihre Website nicht gleich in ein Spieleportal verwandeln. Für viele Websites eignet sich am besten ein kurzes interaktives Element innerhalb einer größeren Seite: eine kurze Aktivität in einem Blogbeitrag, ein Wartezimmerspiel auf der QR-Code-Seite eines Restaurants, eine Unterrichtsaktivität auf einer Schulwebsite oder eine unterhaltsame Pause auf einer Community-Seite.

• Spiele können dazu beitragen, dass sich eine statische Seite ansprechender anfühlt.
• Die Besucher bekommen etwas zu tun, ohne die Seite verlassen zu müssen.
• Blogs und Community-Websites können einprägsamer werden, wenn die Seite eine einfache Interaktionsmöglichkeit bietet.
• Kleinunternehmen können eine spielerische Note einbringen, ohne eine komplett individuelle App entwickeln zu müssen.
• Entwickler und Agenturen können ein interaktives Website-Widget mit einem kleinen, isolierten iframe hinzufügen.

Die besten Möglichkeiten, Spiele zu einer Website hinzuzufügen

Es gibt verschiedene Möglichkeiten, Spiele in eine Website einzubinden. Die beste Wahl hängt von Ihrer Plattform, dem gewünschten Kontrollumfang und davon ab, ob Sie das Spiel selbst entwickeln möchten.

Verwenden Sie ein iframe Spiel embed

Eine iframe embed-Verbindung ist oft der schnellste Weg. Das Spiel wird vom Anbieter gehostet, während Ihre Seite Speicherplatz dafür reserviert. Dadurch bleibt die Spiellaufzeit vom Seitencode getrennt und der Code-Schnipsel funktioniert auf vielen Plattformen.

Verwenden Sie ein Spiel-Widget.

Ein Spiel-Widget besteht üblicherweise aus einem iframe plus hilfreichen Standardeinstellungen: einer empfohlenen Größe, einem aussagekräftigen Titel, Vollbildunterstützung und gegebenenfalls Ereignismeldungen, die Ihre übergeordnete Seite empfangen kann. Dies ist das praktische Modell hinter Games I Know und Embed.

Füge HTML5-Spiele hinzu

Moderne Browserspiele werden oft als HTML5-Spiele bezeichnet, da sie im Browser auf Smartphones, Tablets, Laptops und Desktop-Computern laufen. Sie können Ihr eigenes HTML5-Spiel hosten, aber die meisten Website-Betreiber bevorzugen eine HTML5-Plattform, damit sie sich nicht selbst um die Wartung der Spiel-Engine, der Spielgrafiken, des mobilen Layouts und die Fehlerbehebung kümmern müssen.

Füge WordPress Spiele mit einem benutzerdefinierten HTML-Block hinzu.

In WordPress ist der einfachste Weg ein benutzerdefinierter HTML-Block. Fügen Sie den iframe-Codeausschnitt ein, sehen Sie sich die Seite in der Vorschau an und passen Sie den umgebenden Text und das Layout an. Falls Ihre WordPress-Konfiguration iframe-Tags entfernt, benötigen Sie möglicherweise Administratorrechte oder ein Plugin, das iframe erlaubt.

Spiele in React oder Next.js hinzufügen

In React oder Next.js rendern Sie iframe als Komponente und halten die Frame-Quelle stabil. Wenn Sie Analysen oder Spielereignisse benötigen, lauschen Sie in einer Client-Komponente auf vertrauenswürdige postMessage-Ereignisse des Games I Know-Frames.

Erstelle ein eigenes Spiel von Grund auf

Ein individuell gestaltetes Spiel eignet sich gut, wenn das Spiel selbst Ihr Produkt ist. Für einen normalen Blog, eine Agenturwebsite, eine Schulseite oder eine Website für ein lokales Unternehmen ist ein embed in der Regel schneller und einfacher zu pflegen.

Einfachste Option: GamesIKnow Embed verwenden

Mit Games I Know und Embed können Website-Betreiber während der Beta-Phase mit einem einfachen iframe kostenlose Browserspiele hinzufügen. Besucher können direkt im Browser spielen, ohne eine App herunterladen oder sich registrieren zu müssen. Die Spiele sind ressourcenschonend, mobilfreundlich und für Seiten konzipiert, auf denen ein kurzer interaktiver Bereich anstelle einer kompletten Spieleplattform gewünscht ist.

Zu den aktuell verfügbaren Spielen gehören embed, Tic Tac Toe, Four in a Row, Bingo, I Know, Sudoku und Wortsuche. Sie eignen sich hervorragend für Blogs, Schulen, Restaurants, Community-Websites, Seiten kleiner Unternehmen, interne Portale und Entwicklerseiten, die ein einfaches Browser-Spiel-Widget benötigen.

Beispielcode embed

Games I Know verwendet eine dedizierte iframe-Frame-Route für Website-embeds. Die öffentliche Seite /embed/{gameSlug}/ ist die lesbare Startseite. Die iframe-Quelle sollte /embed/{gameSlug}/frame/ mit Ihrer Mandanten-ID aus dem Partner-Dashboard verwenden.

<iframe
  src="https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID"
  title="Tic Tac Toe by Games I Know"
  width="100%"
  height="640"
  style="border:0;border-radius:16px;max-width:420px;display:block;margin:0 auto;"
  loading="lazy"
  allow="fullscreen"
  allowfullscreen
></iframe>

Die obige Live-Demo verwendet einen Games I Know-Demo-Tenant. Für Ihre eigene Website erstellen Sie ein Partnerkonto, registrieren Ihre Domain und verwenden die vom Dashboard generierten Tenant- oder embed-Schlüsselwerte, damit der Frame mit Ihrer genehmigten Website verknüpft wird.

Wie man Spiele zu WordPress hinzufügt

1. Öffne die WordPress-Seite oder den Beitrag, in dem das Spiel erscheinen soll.
2. Fügen Sie einen benutzerdefinierten HTML-Block in der Nähe des Abschnitts ein, in dem das Spiel gespielt werden soll.
3. Fügen Sie das Snippet Games I Know iframe aus Ihrem embed-Dashboard ein.
4. Vorschau auf Desktop und Mobilgeräten, anschließend gegebenenfalls den umgebenden Text anpassen.
5. Veröffentlichen Sie die Seite, wenn Spielgröße, Titel und Layout Ihren Vorstellungen entsprechen.

Wie man Spiele in React hinzufügt

Für React sollte die iframe-Komponente einfach gehalten werden. Übergeben Sie eine stabile Frame-URL, vergeben Sie einen aussagekräftigen Titel für Barrierefreiheit, reservieren Sie eine angemessene Höhe und fügen Sie die postMessage-Verarbeitung nur dann hinzu, wenn Ihre Anwendung embed-Ereignisse benötigt.

const gameSrc = "https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID";

export function GameEmbed() {
  return (
    <iframe
      src={gameSrc}
      title="Tic Tac Toe by Games I Know"
      width="100%"
      height={640}
      style={{
        border: 0,
        borderRadius: 16,
        maxWidth: 420,
        display: "block",
        margin: "0 auto",
      }}
      loading="lazy"
      allow="fullscreen"
      allowFullScreen
    />
  );
}

Wie man Spiele in Next.js hinzufügt

In Next.js sollte die Seite selbst mit aussagekräftigen Überschriften, Texten und FAQ-Inhalten zum Spiel indexierbar sein. iframe kann in einer Serverkomponente gerendert werden, während alle postMessage-Listener in einer Clientkomponente implementiert werden sollten.

const gameSrc = "https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID";

export default function GamesPage() {
  return (
    <main>
      <h1>Play Tic Tac Toe</h1>
      <iframe
        src={gameSrc}
        title="Tic Tac Toe by Games I Know"
        width="100%"
        height={640}
        style={{
          border: 0,
          borderRadius: 16,
          maxWidth: 420,
          display: "block",
          margin: "0 auto",
        }}
        loading="lazy"
        allow="fullscreen"
        allowFullScreen
      />
    </main>
  );
}

Die besten Orte, um Spiele auf einer Website hinzuzufügen

• Blogbeiträge, bei denen eine kurze interaktive Pause gut zum Thema passt.
• Ressourcenseiten, die bereits jetzt wiederkehrende Besucher anziehen.
• Community-Seiten, Vereinsseiten und lokale Gruppen-Websites.
• Seiten mit Schulaktivitäten und Ressourcenportale für den Unterricht.
• Restaurant-Warteseiten, Menü-QR-Seiten und Veranstaltungsseiten.
• Landingpages, auf denen eine kleine Interaktion das Angebot unterstützt.
• 404 Seiten oder unterhaltsame Seiten, auf denen Verspieltheit erwartet wird.

Die besten Games I Know Spiele für den Einstieg

Tipps vor dem Hinzufügen von Spielen

• Beschreiben Sie das Spiel passend zur Seite, anstatt es in jeden Artikel einzubauen.
• Testen Sie iframe auf einem Mobilgerät, bevor Sie es veröffentlichen.
• Überladen Sie eine Seite nicht mit zu vielen aktiven embeds.
• Verwenden Sie Lazy Loading für iframe-Snippets, die unterhalb des ersten Viewports erscheinen.
• Die Höhe von iframe sollte angemessen sein, damit das Spiel ohne lästige Seitenwechsel problemlos gespielt werden kann.
• Verwenden Sie ein eindeutiges Titelattribut, damit Hilfstechnologien das embedded Spiel beschreiben können.
• Verfolgen Sie Klicks, Spielstarts oder abgeschlossene Runden mithilfe von Analysetools, wenn Ihnen Engagement-Daten wichtig sind.

Kurzcheckliste

1. Wählen Sie das Spiel aus und vergewissern Sie sich, dass es zum Zweck der Seite passt.
2. Verwenden Sie die dedizierte Games I Know Frame-URL innerhalb des iframe.
3. Fügen Sie hilfreichen Seitentext rund um das Spiel hinzu, damit die Seite weiterhin SEO-Wert besitzt.
4. Seite auf Smartphone, Tablet und Desktop-Computer in der Vorschau anzeigen.
5. Veröffentlichen Sie das Widget und beobachten Sie anschließend, ob die Besucher es tatsächlich nutzen.