{"id":1855,"date":"2013-08-20T14:21:41","date_gmt":"2013-08-20T21:21:41","guid":{"rendered":"https:\/\/blogs.ubc.ca\/chendricks\/?p=1855"},"modified":"2013-08-20T22:42:31","modified_gmt":"2013-08-21T05:42:31","slug":"getting-my-etmooc-storify-story-into-wordpress","status":"publish","type":"post","link":"https:\/\/blogs.ubc.ca\/chendricks\/2013\/08\/20\/getting-my-etmooc-storify-story-into-wordpress\/","title":{"rendered":"Getting my ETMOOC Storify story into WordPress"},"content":{"rendered":"

Update, hours later<\/strong>: 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)<\/span><\/p>\n

———————————————————————————-<\/p>\n

I participated in ETMOOC, Educational Technology and Media MOOC<\/span> (http:\/\/etmooc.org<\/a><\/span>) 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).<\/span><\/p>\n

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.<\/span> Here’s how it looks on Storify.<\/a><\/span><\/p>\n

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.<\/span><\/p>\n

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.<\/span><\/p>\n

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.<\/span><\/p>\n

Instead, I exported as html<\/strong>, 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!<\/span><\/p>\n

Here’s the html-export of the story in a WordPress post<\/span>. <\/a>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<\/a><\/span>, which works fine.
\n<\/span><\/p>\n

I think that the html-exported version<\/a><\/span> 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.<\/span><\/p>\n

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.\u00a0<\/span><\/p>\n

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?<\/strong>
\n<\/span><\/p>\n

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.<\/span><\/p>\n

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<\/span> embedded version<\/a><\/span>. I realize this makes the post really long, but it bugs me somehow.<\/span><\/p>\n

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

I tried my hand at messing with the html to get rid of the annoying social share buttons<\/strong> that often pop up (I left a few in at the html-exported <\/a><\/span>story so you see what I’m talking about; they’re all over the embedded story<\/a>)<\/span>. Seemed to work, though I messed up the formatting of the first text box. Just deleted this from html wherever I found it:<\/span><\/p>\n

<div class=”s-share-dropdown”>
\n<ul class=”s-actions-share” data-url=”http:\/\/storify.com\/clhendricksbc\/favourite-tweets-from-etmooc-2013\/elements\/e61a5e776a8965605f8c5abf”>
\n<li><a title=”Share on Facebook” href=”#” rel=”facebook”>Share on Facebook<\/a><\/li>
\n<li><a title=”Share on Twitter” href=”#” rel=”twitter”>Share on Twitter<\/a><\/li>
\n<li><a title=”Share on Google+” href=”#” rel=”googleplus”>Share on Google+<\/a><\/li>
\n<li><a title=”Share on Linkedin” href=”#” rel=”linkedin”>Share on Linkedin<\/a><\/li>
\n<li><a title=”Share by email” href=”#” rel=”email”>Share by email<\/a><\/li>
\n<\/ul>
\n<\/div><\/span><\/p>\n

Note: a mind-numbing task that I thought would never end: “find,” delete, “find next,” delete, and over and over and over and over…<\/span><\/p>\n

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.<\/span><\/p>\n

————————————————————<\/span><\/p>\n

Update, hours later<\/strong>:\u00a0<\/strong>Well, all this seemed to work okay, except for two things:<\/span><\/p>\n

1. When I opened the html export post<\/a><\/span>, it would always open at the very bottom of the post rather than the top<\/span><\/p>\n

2. That post also broke the ETMOOC blog hub<\/a>.<\/span> 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<\/a> <\/span>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.<\/span><\/p>\n

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!<\/a><\/span><\/span><\/p>\n

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.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":665,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[460455],"tags":[],"class_list":["post-1855","post","type-post","status-publish","format-standard","hentry","category-etmooc"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/chendricks\/wp-json\/wp\/v2\/posts\/1855","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/chendricks\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/chendricks\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/chendricks\/wp-json\/wp\/v2\/users\/665"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/chendricks\/wp-json\/wp\/v2\/comments?post=1855"}],"version-history":[{"count":12,"href":"https:\/\/blogs.ubc.ca\/chendricks\/wp-json\/wp\/v2\/posts\/1855\/revisions"}],"predecessor-version":[{"id":1866,"href":"https:\/\/blogs.ubc.ca\/chendricks\/wp-json\/wp\/v2\/posts\/1855\/revisions\/1866"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/chendricks\/wp-json\/wp\/v2\/media?parent=1855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/chendricks\/wp-json\/wp\/v2\/categories?post=1855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/chendricks\/wp-json\/wp\/v2\/tags?post=1855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}