Tech Tip: Twine in a Blog Post

By the time you reach this tip, you should have created a simple Twine game-story and published the Twine html file in your own webspace. Now you will use that address in order to actually embed the story in a blog post. 

To embed the Twine file, you will use something called "iframe" which is a way to take the contents of one webpage and display that content inside another webpage. Hence the word "frame" because you are putting the webpage contents into a frame the way you might frame a picture.

Here's how it works:

Open Twine file in browser. To start, you need to have your Twine file open in a browser tab. For example, here is my file:

https://lauragibbs.net/Sample.html

Create blog post. Then, in another tab, create a new blog post. Give your post a title like "Tech Tip: Twine in Post" and use the label "Tech Tip" as usual. Go ahead and type something like "Here's my story" or something like that. Then hit return a couple of times and type "EMBED" where you want to put the embedded page.

Switch to HTML editor. Next, click on the HTML option that you will see on the left-hand side above the editing bar. Then, go to where you typed "EMBED" and delete that word. That is where you will copy and paste this into the post box, replacing the blank with your address:

     <iframe src="___" width="100%" height="500"></iframe>

So, for example, this is what I will paste into my box:

     <iframe src="https://lauragibbs.net/Sample.html" width="100%" height="500"></iframe>

Here's what it looks like in the HTML view:

You can adjust the height as needed.

Publish. Now, click publish! Check your blog: did it work? If so, you are good to go!

Finishing Up: Did it work? You are ready to do the Declaration. Now you know how to create an interactive story for your storytelling post if you want to do that!