Building the RMOOC Site, Syndication and All

Brace yourself for another 10 mile long blog post; much like the recent one on the Harvard Future of Learning site, this one focusses on another syndication driven wordpress site. Brian Lamb approached me in mid June about working on this project, and coming on the heels of the Harvard one, I was able to leverage bits of that site’s framework– but it is still nowhere near a copy/paste/go operation. These sites are hand crafted.

Art+Reconciliation addresses current issues in Canada dealing with the history of residential schools and the ongoing work of the Truth and Reconciliation Commission. The idea is (I might be wrongly paraphrasing) to examine how art and artists can both create awareness of the issues and help generate communication around the issue.

As conceived by Ashok Mathur, this would be an open experience where online participants could be part of the August activities at TRU, where artists were invited for a residential experience in Kamloops, and leading up to a national TRC gathering in Vancouver.

A driving part of the design was an effort to forefront the media that would be part of the activities, as well as infuse the syndication of content from twitter, flickr, blogs, etc. The “MOOC” part of rmooc is open to question- it was not a course per se, but a series of events and performances. It’s not massive, bit was open and parts were online. Who cares, the media shows some amazing gatherings and art making.

For some numbers on what happened (and keep in mind, this is the midway point), the site accumulated:

• 72 News Items content written or categorized by Ashok.
• 47 resources written or categorized by Ashok.
• 49 items spotlighted as categorized by Ashok.
• 486 syndicated content or media items:
  • 233 Tweets
  • 176 Photos
  • 42 Dispatches (posts submitted via email)
  • 18 Blog Posts (not many, this part was not used during the first phase of the rmooc)
  • 23 Videos (as categorized by Ashok, in fact, he figured out how to add this without me, nice work!)

So if you just look at numbers, you would say “obviously not massive” but numbers are not the whole story, and the goal of the first phase of rmooc was in the events that took place in Kamloops.

Lost in the numbers are thing like a message from Leslie Lindballe, who was following RMOOC from Saskatchewan

hey #rmooc people… are you familiar with http://t.co/NVRMqLbGbj I just made a tile that will go to a #residentialschool survivor

— Leslie Lindballe (@onepercentyello) July 28, 2013

And again, rmooc is only halfway through its course.

As before, I will attempt to review the design elements, the WordPress customizations, and the setup and implementation of the syndication parts. An additional (and new for me) element was using Mailchimp for managing email communications.

Much of what follows paralleled the work I did previously on Harvard’s Future of Learning Institute site.

Here we go…

Theming

As a start, I provided a few themes I found that had potential for a media-rich site. A few were from Elegant Themes, partly because I have an account and access to their entire collection, but also some from Graph Paper Press— a favorite since the days I created the MIDEA site and my own Barking Dog Studios photo site.

Now I have a few thoughts about themes- they have come a long way from some of the first ones I started bending to my will back in 2008. They have gotten a lot more complex, with full admin systems for customizing, a lot of jquery add-ons… and just a lot more to wrangle then in the old days when you had to fiddle with maybe index.php, single.php, style.css.

Frankly, I think a lot of themes are bloated. I’d be really game to know of more lean themes. For example, this old Headspace theme on cogdogblog.com is 55 files at 500k… One of the Elegant themes ones I tried has 257 files and comes on at 3.9 Mb

But Ashok liked the Gleam theme (and I did too, before I used it)- it has a portfolio look, and had templates for full screen media. I spent about 2 days on it (the week before things were supposed to launch), and found myself frustrated with the limited menus (no submenus) and the weird artifacts of all content being loaded through some funky AJAX calls to the main display are. Embedding tweets was impossible (the ajax loader was somehow eating the twitter library), and some templates kept putting blog like content below pages.

I made a recommendation to switch out the theme– in WordPress theory, you can do that at any time, but once you start customizing for syndication content, theme changes call for a modicum of code changes. The sooner you can nail the theme the better.

I decided to go to the free Graph Paper Press F8-Lite theme (58 items at 1.9Mb). I liked the big feature slideshow header and the icon driven layout. When I started work on it, I ran into some vexing problem that was happening trying to child theme it– and I said, the heck with it, I will just monkey with the raw theme file. Changing the theme meta data should keep someone from accidentally updating it.

My hunch is the updating themes is hardly critical. Hence my old dated theme. Have not updated in like 6 years, and it still works.

You can find my version of this theme on github.

One of the important early steps (which I did not do, and have retro-activley fixed it) is ti change the WordPress -> Settings -> Media parameters as spelled out in the readme:

• Thumbnail size: set to Width: 310; Height: 150; [checked] Crop thumbnails to exact dimensions (normally thumbnails are proportional)
• Medium size: Max Width: 590 / Max Height: 0
• Large size: Max Width: 950 and Max Height: 0

Without this, your post thumbnails will be distorted in this theme, since they are non-square.

Like the FOL site, the front of the site is set in WordPress to be a static page (the “About Page”), with extra code added to the front-page.php template (this is useful as it will be used not matter what the setting is for what is put on the front page).

This is done in the Settings->Reading part of the dashboard; I also set the Blog Pages setting to show 12 posts instead of the default 10 on the main flow page (the theme does 3 per line, so a multiple of 3 makes a clean display). And on all category archives, I upped this to show 24 per page in the archive.php template by modifying the query

Let’s look at the main web site entrance…

The top part is the content of the page, which Ashok was easily able to change the content on a regular basis (e.g. insert a new video), while the bottom is coded to show the title, excertt, and link to the most recent item in the News category… so as new news items get added, the front page changes.

For the code curious, the template runs wordpress query to get the newest item in the category:

The normal “bloggy” stuff is then set to go to a “page” for the site “flow” my nickname for “all the stuff”.

There was an issue because the big slideshow at the top of the screen (this is a nice feature of this theme, it is drawn from the most 5 recent items in a category I called “Featured”, so Ashok could change this simply by modifying a post and checking a box for that category) only showed up on the nomal blog home page, which now I had pushed to the interior– to get it to show up as well on the static front page as well, I had to modify slightly the header.php code to include a check for is_front_page():

There was a bit more fiddling I had to do to manage the length of the excerpt displayed on that slideshow; syndicated content did not arrive with a defined excerpt, so I had to code it in manually (line 36 in slideshpw.php) and strip out HTML.

One of the things you face when using a graphic oriented theme is that they often rely on thumbnail images for the archive listing– and often your syndicated content comes in without any images. I’ve not seen many themes that let you define a default image, so you need to rummage around in the code to find it.

For this theme, the code is in the images.php file of the theme via the function get_the_image() function, and in that function is a place you can define a default image via a URL. It comes blank, but I first added a URL:

This worked– except on archives were a lot of posts lack featured images or any images, it was repetitive. This is a job for maybe a superhero I will call.. “Random Man”

cc licensed ( BY NC ND ) flickr photo shared by Rubbertoe (Robert Batina)

I asked Ashok to upload to the media library a set of images he would like as random thumbnails, these I added to defining of variables in the get_the_image() function:

Yes, this is shamefully hardcoded into the theme. Sue me.

The function that returns an image of none is found is called image_by_default() and the way it is written in the original theme, it just returns that url defined by default_image. I re-wrote this to return a random image by URL, that corresponds to one of those IDs in default_image_IDs

Ugh, I am getting way to deep in the technical.

For the syndicated content, in archives display, again, I used the technique to change the output if it was a syndicated tweet- again, when we use Feedwordpress to bring in twitter content via RSS (see below) what we get is a post with a title that is the tweet and a body that is a tweet– it looks ugly. But the permalink points to the twitter status, so we can use instead the function to embed the tweet so it looks like:

This is done in archive.php by checking if a post is in the twitter category or is the twitter archive itself

Also, for all syndicated content, note the addition of a link only logged in editors/admins will see to “Edit/Cat[egorize]”– on the site, the link will go tot he source, not to the local synidcated copy to edit, so if we want to add a syndicated item to our Spotlighted content, all Ashok had to do was to edit the post and check the Spotlight category.

I used widgets to put social media content in the bottom section, where we have a 3 column area to use:

The left column is just the titles/links to the most recent posts on the site, the middle column is the one that twitter provides (in an HTML widget), and the right has a logo, the search widget, and a flickr one provided by the Awesome Flickr Gallery plugin.

The left side bothered me a bit, because again, a post that was a syndicated tweet ended up with a long, title. Luckily I found in StackExchange a method to change the behavior of this widget to have it truncate long posts. It’s a bit long but you can find it in functions.php.

A small touch I like to add, because they are not in the native widgets, is a second text/html one just to display a “more” link:

More small things, for the category archives, I use the description of each category appended to the title as a description, e.g. for the Photo Hub

You can edit the categories to add this info (most themes do not use it)– note that I was able to include HTML in this info:

In the archive.php template I modify it slightly to add the info for a category description

I did bits of stylesheet fiddling to change header sizes, colors, etc. Always visual tweaks to do.

Plugins

A summary of the plugins used on the site:

• Akismet – essential for every site to stomp spam
• JetPack — another one I use on most sites, for the stats, the social buttons sharing buttons. Also, this was essential for the Post By Email functionality discussed below. One thing to be aware of is that Jetpack gets associated with the WordPress account (mine) that authenticates it. So when I tried to use the Contact form, it was not useful because the emails came to me. Therefore, I use the Grunion Contact Form plugin — it is basically the same thing, but I was able to set the destination email to a Harvard staffer. It gets added to the page as a shortcode, so its easy to set up (see the contact page)
• Limit Login used to fight the brute force login attacks that WordPress seems to be attracting.
• Links Shortcode added to a page can list all of the items in a link category. I use it to show the Subscribed blogs – Since Feed WordPress stores these as links, I can display all of the blogs. Because there is an option to exclude links, I am able to prevent the links for feeds from flickr, instagram, twitter, etc to be shown.
• Page-List creates a short code to display pages, or child pages. I use this on the How to Participate page to list all of the specific sub pages (which are child pages). The entire block below then is rendered via:

• Awesome Flickr Gallery – used to add flickr photos tagged rmooc to the bottom footer widget pages and to add a full display on the photo gallery. For some reason the developer has an unstable version in WordPress (it won’t display galleries properly), I get the 3.3.6 version from github and install manually
• Instapress does the same for photos tagged #rmooc in Instagram (this was set up, but instagram was not used by participants(

And for syndication….

• Feed WordPress this is the syndication bus engine, that drives all of the hubs.
• Ada FeedWordPress Keyword Filters – adds features ti be able to filter syndicated items by keywords/hash tags (see below) used for the blog syndication.
• Feedwordpress Advanced Filters – The first time I used this i=one, it adds some post processing to syndicated feeds. I used it here to have the site make local copies of any images in feeds, so we don’t end up later with missing image links

Let the Chimp Do the Emailing

An important part of this project was a regular series of email communications to people who would sign up to receive them, important as RMOOC is address issues of interest to people across Canada, and attracted others from the US.

Our early stage effort to collect this was an old fashioned Google Form. I could sense that it was not optimal for Ashoik, since each mailing he would have to go to the form, copy the recipeients email, and compose a plain email message.

So manual.

So 2003.

This was a good time to explore using Mailchimp for communications for several reasons- allowing people to opt out in one click, to use better templates for sending messages, and for getting some data on responses. And frankly, the messages look more professional. And you get an archive. And, for less than 2000 messages a month, it was free.

I set up an account, created a demo template, made the first email list, and then created an account so Ashok could send out the messages. As we were starting, I tried using the method where it can sync to a google spreadsheet, since people were already using that, but it meant for each mailing, the list had to be manually synced (or I missed how to make this automated). I frankly saw no reason to keep using google, and just switched the form to a Mailchimp one (and we could keep the other fields we asked for, location, and questions).

Once designed in mailchimp, it generates cut and paste HTML I was able to put into the site

I have to say, once set up, Ashok went to town with using the composition features to send out some great update messages (see the archive, again managed by the chimp).

I don’t know if the data matters, but you get some pretty graphics on activity, you know how many people even opened the message and how many followed a link (chimp language- each message sent is a “campaign”)

I’m pleased with how well it worked, and this gave me the little nudge I needed to see how Mailchimp works.

And Now, The Syndication

cc licensed ( BY ) flickr photo shared by Dave Conner

This is of course, the magic bus, the tools that bring content/media form external sites into rmooc using Feed WordPress, the plugin that lets us put RSS feeds into it, and like a bus running 24/7 it goes about bring copies of related content into our site.

One key for Feedworpress is setting up the defaults that are applied for every feed. Thats a nifty part of the design, because for specific feeds as needed, you can override, but your work is easier if you get these defaults set first.

For Feeds and Updates, the only setting I change is Feed Scheduling- the default is to use a cron script, but for a site with regular visitors, it seems to be safe to set the option to check for updates after page loads- this means that user visits prod FWP to look for new content according to its staggered schedule:

And if you ever want to turn off or pause synddcation, you can just set this to cron (which since we have not set up a script, will do nothing)

Under Posts and Links, the main defaults are okay (I make sure that permalinks are set to The copy on the original website

Now we make some important setups- I am using the Ada Keywords plugin to solve an issue for blogs- dealing with user submitted blog URLs for tags and categories is messy. It’s easiest if all you have to ask for is the main URL of a blog as its feed is nearly always discoverable. I borrowed this strategy from Martin Hawksey, we tell participants for their posts to syndicate, they have to use a keyword in the title or body of a post, essentially a hashtag. This way, they can use a general blog they might use for other purposes.

The settings for Ada Keywords specify those keywords- I set up two options for this RMOOC and rmooc which we use in most social media (Martin advised me that these were case sensitive)

If we later have a feed where we want to syndicate everything, we can simply turn off this filter per feed.

I put to use the Advanced Filters plugin, which makes it so images in syndicated posts are copied locally to our site; this way we do not lose any images, but more importantly for this theme, we can generate post thumbnails from syndicated content (it does not work for remote images)

In the Authors settings I keep the default, where FWP creates a new user for each feed to attribute it to:

This may seem odd, but we are not adding real users to the site. but this means that a created author (in this case the feed source) could be used to display all posts syndicated from that blog. This was not put to use on rmooc, but could be implemented later, especially if the blog component gets used more.

For Categories and Tags we ar enot using, so there is no need to bring them into syndicated content.

Also, I do set two categories added to all incoming feeds- I mark all as the Syndicated category (so we can display a flow of all syndicated content), and I make the default category also Blogs:

This means for blog feeds, I do not have to override any settings. Below I show you the overrides made for the social media feeds.

Blogs

http://rmooc.ca/category/hubs/blogs/
How to Participate via your own blog

While we hope one day to set up ways to make this more streamlined, for this site where the blog number was small (and not readily used yet), I opted to used a Google Form embedded into a site page to get blog URLs. I set the spreadsheet to notify me when new submissions are received, but yes, it becomes a manual cut and paste to add a feed to the engine.

The only blogs we had now were ones set up to test syndication and a few from topic related sites this was a really small number (3) of blogs in the mix – for the two informational sites, which would not be adding RMOOC tags, we just would bring in all their posts because they are relevant.

Centre for innovation in Culture and the Arts in Canada and It Matters to Me. For these we turn off the Ada keyword requirement .We find their listing in the feeds, hover, and click the “Posts” link to edit the feed’s settings

In the section for Ada Keywords, we change the setting to disable the filter

Dispatches

http://rmooc.ca/category/hubs/dispatches/
How to Participate via Quick Posts

I continue to find this a useful community tool, the easiest way to have people contribute content. Technically these are not syndication, but it does count as a way content comes into the site- via email. This uses the JetPack Post By Email feature. When activated, it generates a random email address that looks like

This makes it so anyone with this address can post to the site by sending an email! The subject becomes the post title, the formatted email the body of the message, and any attachments get uploaded (well the ones that WordPress allows as an upload).

You do not want to put this address on the public site, since anyone can post content! I set up a password protected page that provided this email address (it was sent to participants by email as well) as well as a downloadable vcard and CSV file for importing as email contacts.

Now one hitch is that when these arrive, they are not assigned to a WordPress category, so to be able to organize them by category, my semi-brilliant idea was to make the Dispatch category the default category, meaning that creating other content means you need to a category when composing a post. That seems to work fine.

The benefit of the Dispatch is that participants can easily add to the site w/o having to make them use the WordPress interface (does anyone remember this cool site called “Posterous”?). Everyone knows how to use their email, right? And it also means people can post from their mobile device.

One thing to keep in mind is that all posts that come in this way get attributed to my WordPress account, since I authorized the JetPack plugin. This is not a problem on this site, since I removed the display of author’s names on posts. Dispatches than are anonymous.
.

Twitter Hub

http://rmooc.ca/category/hubs/twitter/
How to Participate via Twitter

We saw good use of the #rmooc hash tag as seen on the activity we were able to bring into the site. Now there was a huge wrinkle- When Twitter flushed their 1.0 API, they flushed as well public RSS Feeds.

I found the solution at labnol, which has a google script that converts the API json feed to RSS which gives me a URL I can add to Feedwordpress.

This script no longer works. The newer method from labnol (aka Digital Inspiration) involves creating a twitter widget for your search, grabbing its ID, and then setting up a Google Script, passing the ID as a parameter. See the documentation at http://www.labnol.org/internet/twitter-rss-feed/28149/

This seemed kind of duct tape technology, but has worked solidly.

For every project that uses a twitter hash tag I use Twitter Archiving Google Spreadsheet TAGS v5 developed by Martin Hawksey. This not only creates an archive of all tweets, we get a summary of activity, a neat visualization, and a searchable archive.

Thus you get a visual representation of the twitter activity:

which you can then explore individual twitter activity in that space:

I embedded all of these in the site with iframe tags- these are great analytics to provide your project. You’d be crazy not to use them.

Photo Hub

http://rmooc.ca/category/hubs/photos/
How to participate via Flickr and Instagram

I found out almost by accident that Instagram has RSS feeds, and it is clean to see how it works — http://instagram.com/tags/rmooc/feed/recent.rss so I combined in the photo content from these 2 photosharing sites (although participants so far have not used Instagram, it is there if they choose to do so).

I have to say that photos tagged in Instagram showed up within a minute in its RSS feed- flickr has always been inconsistent, and sometimes it takes more than 24 hours for a participant’s photos to show up in the feed for a flickr tag. Even worse, we went through all kinds of crazy stunts because no matter what Ashok did to his account, his photos never turned up. For a while, he was using an email to flickr address I have on a test flickr account, but later he found an older flickr account that worked as it should.

Flick can be a big box of mystery, but that us another blog post.

In Feed WordPress, I overrode the default categories to apply the Photo Hub one.

And the disappointing thing about flickr’s RSS is that it embeds a tiny size, 320 pixels wide. I tried a few end arounds, before digging and finding a Yahoo Pipe that takes a flickr tag RSS feed, and returns one that has a bigger sized image in it.

This worked for a while, then stopped. I found the pipe had been deleted. I found another one, and made my own copy of it with a bit of my own modifications- the default tag of course is “dog”! but I took out un-needed options for set and personal account feeds

Compare the size of images we get from flickr’s RSS feeds to the ones we get from the Yahoo Pipe. I always feel like Yahoo Pipes will vanish on short notice, but they are an incredible tool to bend to your whim.

What Have I Forgotten?

cc licensed ( BY ) flickr photo shared by Feliciano Guimarães

Probably a lot. If you can turn this process into a button push, you are the better designer/coder than I.

But we are not even done, and I am very grateful that Ashok has been patient through things like the Hippie Hosting hardware failure… and I will barely mention the weird hacking that cut out a few days of content (thanks to Tim we got a backup) and was able to do a few other bits of gymnastics to restore. Let’s say, if you see unusual user accounts start to appear on your site (besides the ones Feedwordpress creates), delete them. Somehow, two subscriber accounts got added, and at some point they were able to delete all media and all pages from the site (and change all the admin passwords). I have no idea how this happened.

One thing that helped was I set up a development site to do the first bits of work, and is a place I used to try out code changes rather then dinking on the live site. The Hippie Hosting Installtron tool is great because it can clone a WordPress site to a new URL/domain.

I am very grateful to Brian and Ashok for bringing me on to do this site; as with all of them, I end up coming away with a few more crazy wrenches and pliers for my wordpress toolbox.

There is growing interest in these kinds of sites, and maybe more when the DOCC as anto-MOOC fever takes off. Below you will find examples of the syndication sites I have worked on plus links to these development notes.

• Project Community for the Hague University of Applied Science. We are prepping the second round of this course, the archive of last year’s effort is available. For details how it was done, see Building A Class Sized Syndication Bus
• ETMOOC Blog Hub and ETMOOC Twitter Hub for the Educational Technology MOOC led in 2013 by Alec Couros. For behind the scenes stuff see Building ETMOOC Twitter Syndication/Archive, Building the ETMOOC Blog Hub (part 1) and Building the ETMOOC Blog Hub (part 2)
• Harvard Graduate School of Education/Project Zero Future of Learning Institute 2013 a one week leadership event that took place July 2013. See the long winded post on the building thereof

Of course this is all based on what I learned fiddling with the ds106 site… you can find all post related to these projects at http://cogdogblog.com/tag/building106.

If you have an interest in creating one of these kinds sites, you know where to find me, right? I am available for building syndication hubs course, conferences, weddings, and bar mitzvahs…