Getting my ETMOOC Storify story into WordPress

Update, hours later: see below for what happened after I posted this…and do NOT do what I did, below, unless you know a lot more about html and css than I do (which doesn’t take much, b/c I know so little)

———————————————————————————-

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 html-export of 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.

I also wanted to do this so you don’t get that annoying “read next page” bar when you reach a certain point in the embedded version. I realize this makes the post really long, but it bugs me somehow.

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 at the html-exported story so you see what I’m talking about; they’re all over the embedded story). Seemed to work, though I messed up the formatting of the first text box. Just deleted this from html wherever I found it:

<div class=”s-share-dropdown”>
<ul class=”s-actions-share” data-url=”http://storify.com/clhendricksbc/favourite-tweets-from-etmooc-2013/elements/e61a5e776a8965605f8c5abf”>
<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.

————————————————————

Update, hours laterWell, all this seemed to work okay, except for two things:

1. When I opened the html export post, it would always open at the very bottom of the post rather than the top

2. That post also broke the ETMOOC blog hub. Okay, well, not “broke,” but made it look very weird. I went to that blog hub while preparing another post and saw that it looked very strange–all the content was squished up into one column on the far right of the page. I tweeted to Alan Levine asking him if he could (at some point) find out what was wrong (no rush), and he wrote back that my last post messed it up–the html export one. Oops. Lots of strange code at the beginning of it messed with the formatting.

Long story short, I asked a friend who knows a heck of a lot more than I do about coding and html and css to help, and he fixed the code for me pretty darn quickly. Stripped off the weird stuff at the beginning and added a css line to make the formatting look right (b/c when I took that weird stuff off, the formatting got all nasty). THANK YOU PAT LOCKLEY!

So don’t try this at home, unless you know what you’re doing. Or have a very nice friend who does know, and who is willing to help you with a project that probably isn’t even entirely necessary.

2 comments

  1. I;m not sure I have brain energy to parse this out. I am fine with storify embeds, if you worry about them going out, then you also have to worry about all the ones that *they* embed- soundcloud, twitter, flickr… It just does not seem worth it.

    While technically likely possible,is it worth the trouble?

    1. You’re probably right, Alan. I was really hoping to have a bit more control over what I had created, and how it goes into my blog. I at least wanted to be able to split it into two or more posts, b/c it’s so long, and I thought I would be able to do that fairly easily with html. Ha! Shows how little I know about html and css (yep, very darn little).

      You’re right about losing all the other stuff that storify embeds, like tweets, videos, blog posts, etc. Somehow I just was worried that the whole thing, all my narrative plus the tweets and videos in the right place, etc., might disappear or suddenly become unembeddable without a paid subscription (that latter thing seems like it could pretty easily happen). So, well, I thought I’d try my hand at a DIY option. Ooops.

      All that extra code that was on the post that messed up the etmooc blog hub…no clue why that was there, and when I tried to get rid of it, the formatting of the whole thing went bad. So I put it back, but then when you told me it messed up the etmooc blog hub I was ready to give up and just delete it. But then I asked Pat Lockley, who came to the rescue and looked at my code and gave me some css to take out the nasty bits and make it still look right. So the post now works as an html version of a storify story, without being embedded. It still relies on Storify elements and styles, though, so if Storify goes belly up then my story does too. The only way to avoid that is to take the story, piece by piece, text, then tweet, then text, then video, etc, and put it here into WordPress. Of course, then if WP goes belly up…ah heck, that way lies madness.

      So I’m adding an update to this post: do NOT do what I did, unless you have someone to come to your rescue when it screws up!

      And maybe don’t put things you really, really want to keep for the long term into Storify.

Comments are closed.