Building the Future of Learning Site

Last June I was approached by Justin Reich from Harvard (and newly with EdX) about building a site for the Future of Learning Institute, that is part of Project Zero at the Harvard Graduate School of Education- he was looking for the syndication/aggregation features I had created for the ETMOOC site’s blog and twitter hubs. Apparently, their local CMS (iSites) was a bit cumbersome before to use, but it also sounded like they wanted to extend people’s participating in social media (read more from Justin on the needs for the site).

Harvard calling?

Oh yeah. They wanted to be on the Syndication Bus (Magic Bus! Magic Bus!)

Groovy.

Syndication seems to be in the air, given the amazing stuff Mike Caulfied is doing with Water106. There was also I understand today a ds106.tv episode with Jim Groom, Tim Ownes, and the hatted one, Howard Rheingold, going over how syndication bus works with WordPress (drats to Gila County for having me inside all day for jury duty).

I have grand plans here to document how the Future of Learning site was built, and as I pulled through my notes and the theme code, I got depressed as there are a lot of parts, so I hope I cover everything:

• Theming the site and customization steps, features added (“Can we have a Discussion Forum?”)
• Shopping list of plugins, most key being Feed WordPress
• Setup for the aggregation with Feed WordPress, wrestling with feeds (ahem Twitter) (ahem Flickr). Deploying the super cool Twitter analytics tools by Martin Hawksey.
• Implementing Quick Posts, the way participants could contribute to the site via email

A difference for this event from the previous syndication projects I have done is that it was for a shorter time span (a week institute) rather than a course. Since I was brought in to build the site, not be part of the institute, I did not see much directly of how the site was used and presented.

This is one giant ever scrolling post. You have been warned.

Some Recap Stats

The institute was a week long (July 30-August 2, 2013), but I also provided an overview of the site for the Faculty Leaders. For the syndicated in content:

• 932 total items, everything in the main “flow”
• 66 syndicated blog posts from the 13 blogs the site subscribed too
• 122 Quick Posts, content sent to the site directly via email.
• 566 tweets (but note that Feedword Press often manages to repeat tweets in its feeds) But then again, the Twitter Summary archive captured over 1000 tweets, so I am a little leery of relying on the syndication method for capturing twitter – especially when you see below the end around one needs to get an RSS feed for twitter. 185 people tweeted at least once, but its a long tail distribution, 13 people had 20 or more tweets, with the top person tweeting 179 times.
• 72 photos were syndicated in from flickr (38) and Instagram (34)
• Only 3 sites were syndicated in from diigo (and these were all the test bookmarks from before the institute). It probably was not as actively promoted as the others
• The site recorded 47 comments.

This is not huge or massive, but is commendable given that institute participants had many other activities going on that week. From the Jetpack stats, the site has recorded 17,800 views, with a peak activity on July 30 of 2787 views:

Now one could jump to conclusions about how few people used social bookmarking, or maybe that is a low number of blogs. Since I was not a part of nor at the event, I am not quite sure how all of these were integrated. I surmise the institute has a full program of activities

Design and Theme

When I was asked to do the project, they already had it set up on bluehost with a stock Twenty Eleven theme. One of the Harvard staff was creating the header and the static content. I was fine to use this theme, its basic, but solid, and plays well on mobile. There is a funky issue on mobiles where this theme does not display the menus correctly; it has to do with CSS on where it places the search box in the header- if you include this in the style sheet, it fixes the problem:

But I jump ahead a bit. I set up a child theme for Twenty Eleven- you can find this code on github.

The structure of the site is a fair number of Pages with institute information authored by the Harvard folks, and then the syndication portions I worked on under the “Hubs” menu:

A series of instructions for each kind of syndicated content is set up as pages under the.. How to Participate menu.

As I brainstormed the site with Justin, we wanted a means to highlight content among the flow in a section called “Spotlight”. This is merely a category, and the institute staff monitored the flow to add this category to syndicated content so it would be added to the Spotlight.

There is a trick to this- because we have Feedwordpress syndicated to link externally to the source of content, it is not easy to modify the post to add a category. I merely added an “Edit/Categorize’ link that would only show for people logged in with editing roles. This is done in templates with

This makes it easy for editors to pick items from the flow and just edit it to add a category.

As an experimented, I set up a system where participants (or site visitors) could indicated content they found noteworthy by favorting it- this is done with the WP-PostRatings Plugin, but using a simple like instead of a star rating. I made this appear on all syndicated content.

A widget in the bottom lists the most favorited content. I created a custom page template to generate the 30 most favorited items. This was not hugely used either, with the top item getting 4 favorites.

The team wanted a simple front page, but hinted at wanting to have the newest spotlights appear. This means setting the WordPress options for the front page to be a static page. I customized the front page theme, front=page.php to include extra code to fetch the latest spotlight and display it.

to create this:

Because the syndicated flow content can grow quickly, I like to add paged navigation (Prime Strategy Page Navi plugin) to the category archive template (this is what displays the syndication hubs). There is some code to get the count of the total number of items in a category.

Plugins

A rundown 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)
>Linit 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 Subcribed 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:

• Prime Strategy Page Navi – creates the paged navigation links on archives
• SimplePress About a week before the institute, the staff asked if we could have a private discussion forum for group leaders. I looked at a few such plugins, and SimplePress seemed to do the job. I am not too enthusiastic about their model- you get a basic free plugin, but any addons or documentation requires paying a fee. This did work well- I set ti up so forum participants were created as WordPress users with Author role, and I set in Simplepress that this role would not see the WP dashboard (anyone who needed to add content were set to be Editors), so they just could log in to the forums.
• Styles The planners wanted to change some colors of the menu and headings, and since this plugin works with Twenty-Eleven, I used it to make changing the menu colors, fonts, etc a bit easier.
• WP-PostRatings added the favoriting feature to syndicated content
• WP Category Post List Widget is handy to add to a sidebar just the posts from a category (c’mon wordpress, make this built in, willya?). Within the institute were 12 learning groups, each with a static info page. The plugin is used to list the most recent posts to a category archive for that group, for example see Learning Group 9

• Display Widgets – I use this on almost every site, it adds to each widget check boxes so you can include o exclude it from pages, categories, etc. This way you are not stuck with the same widgets on every page, you can really change it up. The Hubs have a lot of sidebar content related to the syndication bits, but we kept the main conference info pages simpler with just a simple one of random flickr images (example)
• Awesome Flickr Gallery – used to add random flickr photos tagged hgsepzfol to static pages and to add a full display on the photo gallery. For some reason the developer has an unstable version in WordPress (it wont display gallery), I get the 3.3.6 version from github and install manually
• Instapress does the same for photos tagged #hgsepzfol in Instagram
• diigo widget – added to hub pages the latest tagged resources

And for syndication….

• Feed WordPress this is the syndication bus engine, that drives all of the hubs.
• Feed WordPress Add Attribution – use this every time- it creates the options to add to each syndicated post a clear indicator of the source and a link back.
• Ada FeedWordPress Keyword Filters – adds features ti be able to filter syndicated items by keywords/hash tags (see below) used for the blog syndication.

Speaking of Syndication…

Yeah baby, that’s what you came for, right? Now I try to outline the setup of Feed WordPress and the hijinks needed for some of the syndication sources.

One key for FWP is setting up the defaults that are applied for every feed. Thats a nifty part of the design, because you can overrode for specific feeds as needed, but your work is easier if you get the defaults done 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:

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 FOL2013 for Future of Learning 2013 and hgsepzfol which we use in most social media:

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

The other setting is the boilerplate for the attribution text, this is added to all feeds to give credit to the source blog. I used the setting to put it before the content:

In the blog hub, you can see how the attribution is displayed:

For feeds like flickr, twoitter, instagram, the source was not needed. The only way I found to override that was to put a blank space in the same boiler plate per feed.

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 addig users to the site. but this means that the author can be used to display all posts syndicated from that blog. I did a little template edit to make the link text for author to read “see all syndicated posts from this source” — see this post:

and that link goes to all syndicated posts from the feed for Rainbow Country School — it is sort of using the author archive as a category one.

For Categories and Tags I set things up to move any categories or tags from the source blog into just WordPress tags (this allows me to cleanly use Categories for site organization. For this site, we did not plan to use user categories/tags at all, but at least we have them.

A tricky and confusing thing is that in the parlance of Feed WordPress and RSS in general, anything in a blog that is marked as a “Category” “Tag” “label” (blogger) in RSS comes in via a Category RSS item. Read that again- all stuff comes in as one kind fo data, so I set the defaults to funnel them all to tags:

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 Blog Hub:

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.

Blog Hub

http://futureoflearningpz.org/info/hubs/blog/
How to Participate via your own blog

While we hope one day to set up ways to make this more streamlined, for the Future of Learning site where the blog number was small, 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.

In some ways its not bad, because I like to check each feed, and it gives me a quick sense about the blogs people are submitting. Again, this was a really small number (13) of blogs in the mix

Quick Post Hub

http://futureoflearningpz.org/info/hubs/quick-post/
How to Participate via Quick Posts

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 enables anyone to 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). I had an early fail, because the max upload size on the site was set to 10Mb and the staff was trying to email 30Mb PDFs of presentations.. I had to make some config tweaks to fix the max upload size to something like 64 Mb.

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, by semi brilliant idea was to make the Quick Dispatch category the default category, meaning that anyone creating other content had to make sure they used a category for their post. That seems to work fine.

The benefit of the Quick Post 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.

We did use this as well for our Learning Groups, where participants where sharing the work their group as doing. For this case, we had to let group leaders and participants know that they could associate a quick post for group 4 by including in their email:

And their posts would be assembled via a category archive

I did not hear of any problems with people being able to post this way. I see it as a worthy feature to have in a site.

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. I snuck around this by changing my display name to “The Future of Learning is Here”.

Cheap fix.

Twitter Hub

http://futureoflearningpz.org/info/hubs/twitter/
How to Participate via Twitter

We saw good use of the #hzsepfol hash tag and we brought the activity 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 seemed kind of shaky, but has worked solidly.

Now when you get tweets in via Feedwordpress, their display is ugly since the Tweet text is both the title of the post and the body. I have a nifty solution, use the WordPress automebed feature to make the tweets look like… tweets.

This means some extra checks for the content.php template, we check if the category is what we use for Twitter (I override the Feedwordpress defaults to assign a category of Twitter to this feed), and if so, rather than doig a normal blog display, it is as simple as using the permalink to the tweet:

There can be a slight delay as the site does embeds for a page full of tweets.

For the sidebar widget, I just generate the code from twitter itself; it seems like un-needed overhead to have a plugin do the same thing.

But wait, we are not done!

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 dashboard, a neat visualization, and a searchable archive.

I embedded all of these in the site with iframe tags- these are great analytics to provide your project.

Photo Hub

http://futureoflearningpz.org/info/hubs/photo/
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 ti works — http://instagram.com/tags/hgsepzfol/feed/recent.rss so I combined in the photo content from these 2 photosharing sites. 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.

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

The funky thing about Instagram is the permalink just points to a JPG image, not to a web page that contains it (example).

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!

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.

diigo hub

http://futureoflearningpz.org/info/hubs/diigo/
How to participate via diigo

This is straightforward since diigo readily provides a feed for a public tag… but no one used this during the institute (Justin said they pulled back to not overload; people were sharing resources through the other tools)

I’m thinking for possible future work to see if I can mix the feeds from say diigo, delicious, Scoppit into a yahoo pipe to have one social bookmarking feed.

Maybe.

This is the End

cc licensed ( BY NC SA ) flickr photo shared by Davi Ozolin

I wonder if anyone will get to the bottom of this crazy long post. I tried to cover all of the key parts in building the Future of Learning site. It was made from a foundation of the work I did earlier this year for ETMOOC, but as always refined.

IN a later post, I will show how pretty much a similar structure and set of tools played out in the rMOOC site but has a very different look and feel.

The pieces come together easily, but this is by no means perfect. Setting up a form for blog subscriptions to go tight into Feedwordpress is needed (extending some of the code that Martha Burtis did for ds106), but it needs as well to be done in a way that people can change/add feeds them selves via the WP interface.

And Feed WordPress, as wonderful as it can be, can sometimes just go a little bonkers. SOmetimes it marks feeds as unreachable or invalid that are fine. When I added the plugin that is supposed to prevent duplicate posts, I found that the feed from Instagram would be processed, but all items wew skipped.

You can find all my posts related to these kinds of sites via http://cogdogblog.com/tag/building106.

More to come!