How to Integrate a Game into Your Website
This tutorial explains how to integrate an HTML5 game into your website. The game we’re going to use as an example is one created with the online game editor WiMi5. We’ll see how to integrate this game into several content managers (CMS) and blogging tools. Specifically, we’ll focus on:
Basically, we need to insert an ‘iframe’ inside the content that we want in each of the options we’re going to look at. The ‘iframe’ will contain the URL of the game we want to integrate into our site, and other parameters to personalize its look to our preferences.
In almost all the options we’re going to be looking at, the content management tools have an editor that has two viewing options for what is being written. On the one hand you have WYSIWYG mode, which lets you preview the content’s final look. On the other, you have an HTML code editing mode, where you can insert HTML tags directly, as is the case with the ‘iframe’.
We’ll be using one of the educational games available on educa.land as an example. On the page for the game ‘Match additions’, you can see and copy the code of the ‘iframe’ that’s necessary to integrate the game into the different content managers and blogging tools that we’re going to be looking at. The code is the following:
<iframe id="playframe" src="https://educa.land/games/matchaddition/0_0_11/" frameborder="0" scrolling="no" width="100%" height="576"></iframe>
To integrate an HTML5 game with an ‘iframe’ into WordPress, we absolutely must forget using the WordPress.com service as it doesn’t allow the use of ‘iframes’. Instead, these instructions are written for websites created with WordPress.org, which are sites created by the user by installing this content management system.
Then, we need to paste it to the editing window of the article or page we’re creating with WordPress. You have to be especially sure that you’re using the “Text” mode in the text editor in order to correctly paste the code. Then, just publish and you’re done.
Open your the administrator of your Joomla-created website and add a new article.
Once the article has been created, edit it and insert the code we copied. By clicking on the name of the article, we’ll go into its editing mode, where we can, for example, write a description of the game.
After the descriptive text, we’re going to paste the code fragment we copied from educa.land. Before pasting the code, click on the lower right button, “Toggle editor”. After pasting the code, you’ll see that the game is now visible after again clicking on “Change editor”.
If the above doesn’t work, it’s probably because of a default plugin for editing articles, called “Editor – TinyMCE”, which is set up to prohibit ‘iframe’ elements. To stop it, we have to go to the plugin’s settings (Extensions > Plugins > Editor – TinyMCE) and in the “Prohibited elements” option, delete ‘iframe’.
And that’s how you get your game on your Joomla-created website.
Wix is a website creation tool that is getting more and more users every day thanks to its very visual and intuitive style. It’s easy to use, and the process for integrating an HTML5 game created with WiMi5 onto the page is also very easy.
First of all, you need to add an app that allows you to use ‘iframes’ since by default, Wix doesn’t allow them. To do this, look inside the Wix App Market for the “HTML5 iFrame/Embed” app, which is free.
You’ll see a gray window pop up inside the space of the website you’re editing.
Next, simply edit the values of this window so that you can insert the game.
You can choose between introducing the URL of the game you want to integrate (https://educa.land/games/matchaddition/0_0_11/), or you can put the entire ‘iframe’ code. In this case, use the URL and modify the size of the ‘iframe’ visually, using the resizing adjusters. Place the game window where you like and now it’s ready to be published.
Integrating an HTML5 game using an ‘iframe’ into Blogger is very simple. First, access the administrator of your blog and create a new article; call it “Match Additions Game”.
Once created, edit it in normal mode to put, for example, a descriptive text of the game.
Next, click on the HTML button and paste the code fragment we copied from the game in educa.land.
Publish the article and you can see how the game looks on your Blogger-created website.
As in the earlier cases, integrating a game into Weebly is very simple. Its editing style is also very visual, an up-and-coming trend in content management tools.
To create the page where your game will be, you need to go to the editor and drag the elements you want to introduce to your page from the right sidebar. For example, you can drag out a text block to add a description of the game.
Next, drag out an “embed code” block to add the ‘iframe’ you need to integrate the game with.
Then, simply publish and now the game is accessible to the whole world.
11/11/2016 / Hafo / 2
Categories: How to
- How to Integrate a Game into Your Website
- How to integrate a WiMi5 game in Moodle
- How to create texts from sprites using a SpriteText Blackbox
- How to clone a project
- New ways of interacting in wimi5
- How to easily adapt WiMi5 game templates to create your own games
- How to monetize your games using Virtual Goods
- How to use the CodeRunner blackbox
- How to use Game Session Storage
- How to Use Rankings
- How to publish your HTML5 game to other game platforms
- How to publish your HTML5 game on the Google Chrome Web Store
- How to set up game levels based on data from a text file: using the ParamMap.
- How to create a scoreboard for lives, time, and points
- How to Make a Scroll and a Parallax Scroll in 2D Games
- How to create collisions
- How to debug in WiMi5