Screen Shot 2015-03-31 at 2.25.59 PM

Student WordPress Documentation of FlowLab.io Designs

The other day I was talking with an educator interested in using FlowLab.io with their fourth grade game design introduction. Fully supporting this, and knowing their students used WordPress in order to document their studies, I put together a quick tutorial walking students through embedding their games on their blogs. If you have suggestions for improving this tutorial be sure to comment!

I always appreciate when a company makes embedding easy and FlowLab does a great jobs of this.

 

You can see the embed code at the bottom.

You can see the embed code at the bottom.

As you can see, the game above was built at a square. I copied the code directly from FlowLab’s embed code. as pictured. After copying the code, head on over to your WordPress site.

Create a new post!

Create a new post!

First off, after logging into your WordPress blog, create a new post.

Your new post should appear as below. Make sure to title the post first so that you can find it easily if you have to interrupt the posts due to the bell ringing or some other interruption!

New Post Edit Screen

Tabs for visual editing versus text editing.Once you have your new post look for the tabs in the upper right corner. On says visual and the other says text. Click on the text tab. You cannot paste embed code in the visual editor. If you are learning how to use HTML you can really refine the look and feel of your posts using the text tab.

Note that this tab does not have the same what-you-see-is-what-you-get (WYSIWYG) tools as the visual editing tab. If you are uncomfortable editing in HTML you can go back to the visual editor after pasting the embed code. The game will not appear normally in the visual editor, be sure to preview your post several times!
Picture of the text editing tools
Image of the embed code in the text editor.Paste the embed code from FlowLab as shown to the right. You can further edit the embed code to center the game on your post, change the width and height, and increase the frame. Play around with these settings in text editing and visual editing. Experiment!

If you enjoyed embedding your FlowLab.io game into your blog, try experimenting with other embeddable objects – like YouTube Videos!

TwitterFacebookGoogle+LinkedInPinterestTumblrShare

About the author: Rurik

Known both as Ru (or as the title suggests, Ru Ru the Ruiner), Rurik studies ways games can designed to improve society, especially in the realm of education.