Как добавить игры на свой сайт

Большинство веб-сайтов созданы для чтения, беглого просмотра или перехода по ссылкам. Это полезно, но может создавать ощущение статичности. Добавление простой браузерной игры позволит посетителям чем-то заняться, не требуя от них загрузки приложения, создания учетной записи игрока или ухода с вашей страницы.

Самый простой способ добавить игры на ваш сайт - это обычно использовать игру iframe embed или виджет игры. Вы размещаете небольшой фрагмент HTML на странице, и игра запускается внутри автономного фрейма. GamesIKnow Embed создан именно для этой задачи: легкие браузерные игры, которые подходят для блогов, сайтов WordPress, сайтов малого бизнеса, страниц сообществ, школ, ресторанов и проектов разработчиков.

Краткий ответ: как добавить игры на сайт?

Чтобы добавить игры на свой веб-сайт, выберите браузерную игру, скопируйте код iframe или виджета игры от провайдера, вставьте его в свою CMS или приложение, протестируйте embed на мобильном устройстве и опубликуйте страницу с полезным текстом, посвященным игре. В случае с Games I Know и Embed, iframe использует выделенный URL-адрес /embed/{gameSlug}/frame/ и идентификатор арендатора из настроек вашего партнера.

1. Выберите игру, которая подходит для страницы и целевой аудитории.
2. Используйте URL-адрес фрейма iframe, предоставленный платформой embed.
3. Вставьте iframe в WordPress, конструктор сайтов или ваш компонент React/Next.js.
4. Установите стабильную высоту, атрибут clear title, отложенную загрузку и поддержку полноэкранного режима.
5. Перед публикацией просмотрите страницу на мобильных и настольных устройствах.

Что такое игровой виджет для веб-сайта?

Виджет веб-игры - это небольшая интерактивная браузерная игра, которая размещается внутри обычной веб-страницы. В большинстве случаев виджет представляет собой iframe: игра размещается у провайдера, а ваш сайт управляет окружающим контентом статьи, целевой страницы, страницы ресурсов или бизнес-страницы.

Зачем добавлять игры на свой сайт?

Игра не обязательно должна превращать ваш сайт в игровой портал. Для многих веб-сайтов наилучшим вариантом является небольшой интерактивный момент внутри более крупной страницы: короткое задание в блоге, игра в зале ожидания на странице с QR-кодом ресторана, занятие в классе на сайте школы или забавный перерыв на странице сообщества.

• Игры могут помочь сделать статическую страницу более привлекательной.
• Посетители могут чем-то заняться, не покидая страницу.
• Блоги и сообщества становятся более запоминающимися, если страница содержит простое интерактивное взаимодействие.
• Малые предприятия могут добавить игривый элемент, не разрабатывая при этом полностью индивидуальное приложение.
• Разработчики и агентства могут добавить интерактивный виджет на веб-сайт с помощью небольшого изолированного элемента iframe.

Лучшие способы добавить игры на веб-сайт

Существует несколько способов добавить игры на веб-сайт. Лучший выбор зависит от вашей платформы, необходимого уровня контроля и от того, хотите ли вы создавать игру самостоятельно.

Используйте iframe игру embed

Использование конструкции `iframe embed` часто является самым быстрым вариантом. Игра размещается у провайдера, а ваша страница резервирует для неё место. Это позволяет отделить среду выполнения игры от кода вашей страницы и обеспечивает работу фрагмента кода на многих платформах.

Используйте игровой виджет

Игровой виджет обычно представляет собой iframe с полезными настройками по умолчанию: рекомендуемый размер, понятный заголовок, поддержка полноэкранного режима и иногда сообщения о событиях, которые может получать ваша родительская страница. Это практическая модель, лежащая в основе GamesIKnow Embed.

Добавить игры HTML5

Современные браузерные игры часто называют играми HTML5, потому что они работают в браузере на телефонах, планшетах, ноутбуках и настольных компьютерах. Вы можете разместить свою собственную HTML5-игру, но большинство владельцев веб-сайтов предпочитают платформу embed, чтобы им не приходилось самостоятельно поддерживать игровой движок, ресурсы, мобильную версию и исправлять ошибки.

Добавьте игры в WordPress с помощью пользовательского HTML-блока.

В WordPress самый простой способ - использовать блок «Пользовательский HTML». Вставьте фрагмент кода iframe, просмотрите страницу и отрегулируйте окружающий текст и макет. Если ваша настройка WordPress удаляет теги iframe, вам может потребоваться права администратора или плагин, разрешающий использование iframe.

Добавляйте игры в React или Next.js

В React или Next.js отобразите iframe как компонент и сохраните стабильный атрибут src фрейма. Если вам нужны аналитические данные или игровые события, отслеживайте доверенные события postMessage от фрейма Games I Know в клиентском компоненте.

Создайте собственную игру с нуля.

Создание собственной игры может быть хорошим решением, если сама игра является вашим продуктом. Для обычного блога, сайта агентства, школьной страницы или страницы местного бизнеса embed обычно быстрее и проще в обслуживании.

Самый простой вариант: используйте GamesIKnow Embed.

GamesIKnow Embed позволяет владельцам веб-сайтов добавлять бесплатные браузерные игры во время бета-тестирования с помощью простого iframe. Посетители могут играть в браузере без загрузки приложения и регистрации игрока. Игры легкие, адаптированы для мобильных устройств и предназначены для страниц, где требуется быстрый интерактивный блок, а не полноценная игровая платформа.

В настоящее время доступны следующие игры embed: Tic Tac Toe, Four in a Row, Bingo, I Know, судоку и поиск слов. Они хорошо подходят для блогов, школ, ресторанов, сайтов сообществ, страниц малого бизнеса, внутренних порталов и сайтов разработчиков, которым нужен простой виджет для браузерной игры.

Пример кода embed

Games I Know использует выделенный маршрут фрейма iframe для веб-сайтов embed. Публичная страница /embed/{gameSlug}/ является удобочитаемой целевой страницей. В качестве src для iframe следует использовать /embed/{gameSlug}/frame/ с идентификатором вашего клиента из партнерской панели.

<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. Вставьте фрагмент Games I Know iframe со своей панели управления embed.
4. Просмотрите предварительный просмотр на компьютере и мобильном устройстве, затем при необходимости отрегулируйте текст окружающего раздела.
5. Опубликуйте страницу, когда размер игры, название и оформление будут выглядеть должным образом.

Как добавить игры в React

Для React компонент iframe следует оставлять простым. Передайте стабильный URL-адрес фрейма, установите понятный заголовок для доступности, зарезервируйте разумную высоту и добавляйте обработку postMessage только в том случае, если вашему приложению необходимы события embed.

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 необходимо обеспечить индексируемость самой страницы, разместив полезные заголовки, текст и раздел часто задаваемых вопросов (FAQ) по игре. Компонент 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>
  );
}

Лучшие места для добавления игр на веб-сайт

• Записи в блоге, где тема предполагает короткий интерактивный перерыв.
• Ресурсные страницы, которые уже привлекают постоянных посетителей.
• Страницы сообществ, страницы клубов и сайты местных групп.
• Страницы с заданиями для школы и центры ресурсов для класса.
• Страницы ожидания в ресторане, страницы с QR-кодом меню и страницы мероприятий.
• Целевые страницы, где небольшое взаимодействие способствует реализации предложения.
• Страницы с ошибкой 404 или забавные страницы, где ожидается игривость.

Лучшие игры для начала Games I Know

Советы перед добавлением игр

• Игра должна быть связана с тематикой страницы, а не вставляться в каждую статью.
• Перед публикацией проверьте iframe на мобильных устройствах.
• Не перегружайте одну страницу слишком большим количеством активных embed.
• Используйте отложенную загрузку для фрагментов кода iframe, которые отображаются ниже первого окна просмотра.
• Высоту iframe следует выбирать разумными, чтобы в игру было легко играть без неудобных переходов между страницами.
• Используйте понятный атрибут заголовка, чтобы вспомогательные технологии могли описать игру embedded.
• Отслеживайте клики, запуски или завершенные раунды с помощью аналитики, если данные о вовлеченности имеют для вас значение.

Краткий контрольный список

1. Выберите игру и убедитесь, что она соответствует назначению страницы.
2. Используйте выделенный URL-адрес фрейма Games I Know внутри iframe.
3. Добавьте полезный текст вокруг игры, чтобы страница сохранила свою SEO-ценность.
4. Предварительный просмотр страницы на телефоне, планшете и компьютере.
5. Опубликуйте виджет, а затем отслеживайте, действительно ли посетители им пользуются.