How to embed Twine on your WordPress website

Create twine and export it to html file.

Publish to File.

Upload html file on the server (eg. FTP with Filezilla).

Create a new page in your wordpress where you want to embed the twine.

Insert following code (be sure to switch to Text tab)

<div><iframe id="my_iframe" width="100%" height="400px" src="https://www.romanluks.eu/about/index.html" scrolling="no"</iframe></div>

Replace url https://www.romanluks.eu/about/index.html with path to your twine.

Now you have twine embedded on your website, however it has the wrong size. Oh noes! What now?!

Lets add some more code 🙂

<script type="text/javascript">
 //<![CDATA[
     var currentPassage = null;

    function CheckHeight() {

        if (currentPassage != document.getElementById("my_iframe").contentWindow.document.getElementsByTagName("tw-passage")[0]) {
            document.getElementById("my_iframe").style.height = "400px";
            document.getElementById("my_iframe").style.height = document.getElementById("my_iframe").contentWindow.document.body.scrollHeight + 'px';
            currentPassage = document.getElementById("my_iframe").contentWindow.document.getElementsByTagName("tw-passage")[0];
         }
         setTimeout(CheckHeight, 500);
     }

//]]>
</script>
<div><iframe id="my_iframe" width="100%" height="400px" src="https://www.romanluks.eu/about/index.html" scrolling="no" onload="CheckHeight()"></iframe></div>

Now the iframe changes height according to the current twine passage. 

But, it does not work in Firefox. In Firefox you get a blank page. Yeah, kids. Always test your website in all browsers.

In Firefox add fallback to fixed resolution and enable scrolling.
Like this:

 if(document.getElementById("my_iframe").contentWindow.document.body.scrollHeight == 0){
    document.getElementById("my_iframe").style.height = "1300px";
    document.getElementById("my_iframe").scrolling = "yes";}

WAIT! This tutorial is really complicated!!!

Allright – just go here. It is simple way how to get your Twine online for free.

http://philome.la/

 

Misc

Does your twine contain external links?

eg. to google.com/wikipedia articles/any other website

Add attribute target and set it to _blank. This forces browsers to open the link in a new tab instead of opening it right in the twine iframe window.

<a href=”https://www.example.com/” target=”_blank”>Link</a>

 

Are you making changes to your twine and uploading new version on server?

User browser private mode/incognito mode. Or clear browser cache. Iframes are usually cached in browsers so you would only see old version of your twine.