Getting my ETMOOC Storify story into WordPress

I participated in ETMOOC, Educational Technology and Media MOOC (http://etmooc.org) from January to April 2013. During that time I decided to keep a record of things that stood out for me in the course–tweets, videos, blog posts–and reflect on them in one space (rather than spread out across blog posts).

I used Storify for this, as it was a really easy tool to pull all these different things together in, and to write text between the elements to tell a story. Here’s how it looks on Storify.

The problem was that I figured Storify wouldn’t last forever (these sorts of things come and go), and I didn’t want my reflections to get lost. You can export them as a PDF if you get a paid account, but I didn’t want to have to pay just for this.

Here’s what I did instead: went to my story page in Storify, clicked on “Distribute,” then on “Export” (rather than embed). Embed basically puts an active link in your blog back to the Storify site, like embedding a YouTube or Vimeo video–you can watch it in the blog, but it’s still hosted elsewhere. That wasn’t good enough for what I wanted; what if Storify goes away? Then the embed is useless.

But if you export the file into some other format, that seems to me like it will be more permanent. I tried exporting it to WordPress, but that didn’t work with this blog. I thought about exporting it to my Tumblr, but that’s only for ds106. I could have created a new tumblr just for this, but that doesn’t make sense.

Instead, I exported as html, which gave me the story on a webpage. Then, in Firefox, I right-clicked (or control-click, on a mac) on the page and got a dialogue that let me view page source. That opened up a new window with html code for the page. I copied all of that and opened up a new WP post (this one), went to “text” instead of “visual,” and pasted the code in there. Voila!

Here’s the story in a WordPress post. Problem: it jumps to the end of the post when you open it! Why? No clue. So until I figure that out, I also created an embedded version, which works fine.

I think that the html-exported version doesn’t rely on Storify existing–even if Storify went away, I might still have my info. Which, I think, is not true of the embedded version.

Maybe I’m deluded about that, as the code in the html exported version still refers quite a bit to Storify. Hmmmm. If not, then maybe there’s little point to exporting in hmtl vs. embedding. 

Can anyone answer the question of whether what I’ve done by exporting to html is different in the sense of it possibly relying less on the existence of Storify than embedding?

One of the main reasons I did this, though, was because the story is quite long, and I want to be able to break it up into a few pieces. I couldn’t do that easily with Storify itself, but I thought I could do it with the html, maybe. Maybe not, though…I think I can’t just take half of it and cut and paste, because I think it relies a lot on some stuff in the beginning of the code that I don’t understand. So that may be moot as well.

Lesson learned: If you don’t want your Storify to be really, really long, break it up while you’re doing it, rather than trying to do it later. Or, if someone knows how to do this that I am not seeing, please let me know!

I tried my hand at messing with the html to get rid of the annoying social share buttons that often pop up (I left a few in so you see what I’m talking about. Seemed to work, though I messed up the formatting of the first text box. Just deleted this from html wherever I found it:

<div>
<ul data-url=”http://storify.com/clhendricksbc/favourite-tweets-from-etmooc-2013/elements/51026247b506589962112bc0″>
    <li><a title=”Share on Facebook” href=”#” rel=”facebook”>Share on Facebook</a></li>
    <li><a title=”Share on Twitter” href=”#” rel=”twitter”>Share on Twitter</a></li>
    <li><a title=”Share on Google+” href=”#” rel=”googleplus”>Share on Google+</a></li>
    <li><a title=”Share on Linkedin” href=”#” rel=”linkedin”>Share on Linkedin</a></li>
    <li><a title=”Share by email” href=”#” rel=”email”>Share by email</a></li>
</ul>
</div>

Note: a mind-numbing task that I thought would never end: “find,” delete, “find next,” delete, and over and over and over and over…

But hey, it worked! For the most part. There’s still some weirdness in the code in some places that leads to funky formatting, but I’ve reached the limit of how much I’m willing to mess around with html when I really don’t know what I’m doing.

Share this