Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Embedding a Twine story in Weebly?

Hello all,

I just got started with Twine, I'm using the online 2.0 beta. I look forward to working more with it!

I'm trying to get a Twine story embedded in my Weebly page. I'm completely new to HTML, but here's what I tried:

-I downloaded an HTML page file of the story.
-It worked when I opened it in my browser.
-I opened the HTML file in Notepad++ and copied the code.
-I went to my Weebly website, and used the "Embed Code" block.
-I pasted the code in there.

Nothing showed up right there, but I did see a flash of what the screen should look like.

Then it went to this right away (this is what it looks like in the Weebly editor; orange text added):
undefined

When I publish the site, it looks like this (orange text added):
undefined

(btw, you probably noticed I'm testing this in my 404 page. It's just the easiest to access)

How can I embed a Twine story in Weebly? Is it possible?

Comments

  • I don't have a Weebly account myself but after looking through its knowledge base I believe it may be possible.

    The reason embedding a HTML file generated by Twine into a weblog is difficult is because the java-script engine within the generated file knows about its structure and this structure generally gets changed when you embed in within a weblog page.

    To get around this problem you need to use an IFrame which will reference your generated HTML file. An iFrame is a way showing one HTML file within another.

    1. Upload your generated HTML file to your Weebly site, remember the link created and where it stores the file and its filename as you will need this information for step 2. This youtube shows how to do that.

    2. This article shows how to embed content using an iframe and the iframe you create will need to reference the file you uploaded in step 1 in its src attribute.

    The iframe will end up looking something like the following, you may want to change the size by changing the width and height attributes:

    <iframe src="name_of_your_file.html" width="800" height="500"></iframe>
    It may take some trial and error to get it working.
  • Thanks for the iframe help! I referenced a webpage on NeoCities and it works like a charm!

    Unfortunately Weebly would just store the file, it wouldn't host the new page (turns out they only host pages made with Weebly :P). Had to add in the file and reference it as discussed here http://stackoverflow.com/questions/11274881/how-to-find-the-path-of-the-uploaded-files-on-weebly, but when I referenced it in iframe it would just download the file.

    So I'll just have to reference from NeoCities.

    Thanks for the help, I had no idea what to do and it works great now!
Sign In or Register to comment.