如何向您的网站添加游戏

大多数网站的设计目的都是为了方便用户阅读、浏览或点击。这固然有用，但也可能显得单调乏味。添加一个简单的浏览器游戏，就能让访客有事可做，而无需他们下载应用、创建玩家账号或离开你的页面。

通常，在网站上添加游戏最简单的方法是使用 iframe 游戏 embed 或游戏小部件。您只需在页面上放置一小段 HTML 代码，游戏就会在一个独立的框架内运行。Games I Know 和 Embed 正是为此而设计的：轻量级的浏览器游戏，适用于博客、WordPress 网站、小型企业网站、社区页面、学校、餐厅和开发者项目。

简单回答：如何向网站添加游戏？

要将游戏添加到您的网站，请选择一款浏览器游戏，复制提供商的 iframe 或游戏小部件代码，将其粘贴到您的 CMS 或应用程序中，在移动设备上测试 embed，然后发布页面，并在游戏周围添加辅助文字。对于 Games I Know 和 Embed，iframe 使用专用的 /embed/{gameSlug}/frame/ URL 以及来自您合作伙伴设置的租户 ID。

1. 选择一款适合页面和受众的游戏。
2. 使用 embed 平台提供的 iframe 帧 URL。
3. 将 iframe 粘贴到 WordPress、网站构建器或您的 React/Next.js 组件中。
4. 设置固定高度、清除标题属性、延迟加载和全屏支持。
5. 发布前，请在移动设备和桌面设备上预览页面。

什么是网站游戏插件？

网站游戏插件是一种小型可玩浏览器游戏，它嵌入在普通网页中。在大多数实际应用中，该插件采用iframe模式：游戏由服务提供商托管，而您的网站则控制着周围的文章、着陆页、资源页或企业页面内容。

为什么要在网站上添加游戏？

游戏并不一定非要把你的网站变成游戏门户。对很多网站来说，最好的用法是在较大的页面中添加一个简短的互动环节：比如博客文章中的一个快速互动游戏、餐厅二维码页面上的等候区小游戏、学校网站上的课堂活动，或者社区页面上的趣味休息时间。

• 游戏可以让静态页面更具吸引力。
• 访客无需离开页面即可进行一些操作。
• 博客和社区网站如果页面包含简单的交互功能，就能更容易让人记住。
• 小型企业无需构建完整的定制应用程序，即可增添趣味性。
• 开发人员和代理机构可以添加一个带有小型、独立的 iframe 的交互式网站小部件。

将游戏添加到网站的最佳方法

有几种方法可以将游戏添加到网站。最佳选择取决于您的平台、您需要的控制权限以及您是否想自己构建游戏。

使用 iframe 游戏 embed

使用 `iframe` 或 `embed` 通常是最快的路径。游戏由服务提供商托管，而您的页面则为其预留空间。这使得游戏运行时与您的页面代码分离，并使代码片段能够在多个平台上运行。

使用游戏小部件

游戏组件通常是一个 iframe，外加一些有用的默认设置：推荐尺寸、清晰的标题、全屏支持，有时还包括父页面可以接收的事件消息。这就是 Games I Know 和 Embed 背后的实用模型。

添加 HTML5 游戏

现代浏览器游戏通常被称为 HTML5 游戏，因为它们可以在手机、平板电脑、笔记本电脑和台式机的浏览器中运行。您可以自行托管 HTML5 游戏，但大多数网站所有者更喜欢使用托管平台，这样他们就无需自行维护游戏引擎、资源、移动布局和修复错误。

使用自定义 HTML 块向 WordPress 添加游戏

在 WordPress 中，最简单的方法是使用自定义 HTML 代码块。粘贴 iframe 代码片段，预览页面，然后调整周围的文本和布局。如果您的 WordPress 设置会移除 iframe 标签，您可能需要管理员权限或安装允许使用 iframe 标签的插件。

在 React 或 Next.js 中添加游戏

在 React 或 Next.js 中，将 iframe 渲染为一个组件，并保持 frame 的 src 属性稳定。如果需要分析数据或游戏事件，请在客户端组件中监听来自 Games I Know frame 的受信任的 postMessage 事件。

从零开始打造一款自定义游戏

如果游戏本身就是你的产品，那么定制游戏可能是一个不错的选择。但对于普通的博客、机构网站、学校网页或本地商家网页来说，使用 embed 通常速度更快，维护也更方便。

最简单的选择：使用 GamesIKnow Embed

Games I Know 和 Embed 允许网站所有者在测试期间通过简单的 iframe 添加免费浏览器游戏。访客无需下载应用程序或注册即可在浏览器中畅玩。这些游戏轻巧便捷，支持移动设备，专为需要快速互动模块而非完整游戏平台的页面而设计。

目前可用的游戏包括 GIK_TERM_1、GIK_TERM_2、GIK_TERM_3、GIK_TERM_0、数独和单词搜索。它们非常适合博客、学校、餐厅、社区网站、小型企业页面、内部门户网站以及需要简单浏览器游戏插件的开发者网站。

示例 embed 代码

Games I Know 使用专用的 iframe 框架路由来访问网站 embed。公共页面 /embed/{gameSlug}/ 是易于阅读的登录页面。iframe 的 src 应使用 /embed/{gameSlug}/frame/，并附上您在合作伙伴控制面板中的租户 ID。

<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>

上面的在线演示使用了 Games I Know 演示租户。对于您自己的网站，请创建合作伙伴帐户，注册您的域名，并使用控制面板生成的租户或 embed 键值，以便将框架关联到您已获批准的网站。

如何向 WordPress 添加游戏

1. 打开你想让游戏显示的 WordPress 页面或帖子。
2. 在游戏运行区域附近添加自定义 HTML 代码块。
3. 粘贴 embed 仪表板中的 Games I Know iframe 代码段。
4. 在电脑和手机上预览，然后根据需要调整周围部分的文字。
5. 当游戏大小、标题和布局看起来合适时，发布页面。

如何在 React 中添加游戏

对于 React 来说，iframe 组件要保持简洁。传递一个稳定的框架 URL，设置一个清晰的标题以提高可访问性，预留一个合理的高度，并且仅当你的应用需要 embed 事件时才添加 postMessage 处理。

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
    />
  );
}

如何在 Next.js 中添加游戏

在 Next.js 中，确保页面本身可被索引，并包含有用的标题、正文以及与游戏相关的常见问题解答。iframe 可以渲染在服务器组件中，而任何 postMessage 监听器都应该位于客户端组件中。

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>
  );
}

在网站上添加游戏的最佳位置

• 适合在博客文章中加入简短互动环节的文章。
• 已经吸引回头客的资源页面。
• 社区页面、俱乐部页面和本地群组网站。
• 学校活动页面和课堂资源中心。
• 餐厅等位页面、菜单二维码页面和活动页面。
• 通过少量互动即可完成优惠活动的落地页。
• 404 页或趣味页面，旨在营造轻松愉快的氛围。

最适合入门的Games I Know游戏

添加游戏前的提示

• 让游戏内容与文章主题相关，而不是每篇文章都插入游戏内容。
• 发布前请在移动设备上测试 iframe。
• 不要在一个页面上放置过多的活跃 embed。
• 对出现在第一个视口下方的 iframe 代码片段使用延迟加载。
• 保持 iframe 的高度合理，以便游戏能够轻松进行，而不会出现尴尬的页面跳转。
• 使用清晰的标题属性，以便辅助技术可以描述 embedded 游戏。
• 如果您重视互动数据，请使用分析工具跟踪点击、开始或完成回合数。

快速检查清单

1. 选择游戏并确认其符合页面意图。
2. 在 iframe 中使用专用的 Games I Know 框架 URL。
3. 在游戏周围添加有用的页面内容，以保持页面的SEO价值。
4. 在手机、平板电脑和台式机上预览页面。
5. 发布后，监控访客是否实际使用该小部件。