How to embed Twine on your WordPress website

twine_logo

Create twine and export it to html file.

Publish to File.

twine_publish_to_file

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

twine_filezilla_upload

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

wp_newpage

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.

wp_aboutme_code

Now you have twine embedded on your website.

 

 

However it has the wrong size.

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 its 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 I 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/

twine_philome

 

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>

twine_ahref_blank

 

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.

 

Posted in Blog Tagged with: , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*