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:
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:
@media handheld, only screen and (max-width: 767px) {
#searchform {
display:none;
}
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.
SPOTLIGHT: curated relevant Institute information...
'1', 'category_name' => 'spotlight') );
while ( $spotlight_query->have_posts() ) : $spotlight_query->the_post(); ?>
→', 'twentyeleven' ) ); ?>
See all Spotlights...
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:
place holder text- all the stuff happens in the template
You can use this page as a quick guide to the latest changes in our Feed2JS (Feed to JavaScript) code/service -- since the updates are available as an RSS feed, I can use Feed2JS to syndicate this page about itself (how recursive is that?)
http://feed2js.org/content/feed2js.xml...
place holder- all the action is in the template, crikie what a hack!
Welcome to CogDogBlog , Alan Levine's (hey, thats me, writing about myself in third person!) place to bark about cool technology, web X.0 hype, weird web sites, photography, and other targets big and small- things that get under my fur or make me wag...
I don't regularly use high falutin' words like "colophon", but here are this here blog's kibbles and bits that make it hum (sometimes there is indigestion). For what it is worth (and CogDogBlog is worth billions) this site is made possible by cogs, dogs,...
another fake page- all the code is in the template! I can write anything here and no one will ever know it case it is never used on the template!
Since Twitter search is utterly useless for finding tweets older than yesterday, I'm running the TwitterPad plugin to pull them into the doghouse and keep 'em safe and warm.
I am no longer using this plugin- see my twitter archive managed by Thinkup...
For the longest time my sidebar "What the CDB" included a paraphrased quote from Edward Abbey in which I made my own substitutions (or mangled attempts thereof).
In the spirit of expanding my literary prowess, I'll be swapping in new quotes ever now...
Flickr CC Attribution Helper originally was a browser script that adds content to any flickr page for photos that are shared under creative commons licenses. It provided two different cut and past attribution texts. The first is designed for blogs and...
Better than Billboard, the CogDog Blog top 100!
Somewhere down there on the footer of this blog are some random quotes related to blogging... well actually they are quotes about writing that I have subverted for my own felonious pleasure. The full set of quotes are spit out below.
For those seeking...
Hi there, my name is Alan Levine. You may have come across someone online using my photos pretending to be a person of another name. By having perhaps performed a reverse image search you discover that those images of "Doug" or "Carlos" are actually...
What's cool? I know where the town is ...
And I tag 'em in pinboard and run good old trusty RSS through Feed2JS (alas no more as of 2022, now using WordPress RSS block). These also get posted (via IFTTT) #cogdogcooltech to Mastodon (the tag...
Top requested dog links as of September 5, 2017 (plucked HTML from Jetpack stats with a bit of HTML gymnastics)
Title Views
Google Wakes Up and Smells the Animated GIF
46,874
Setting up Custom Content Types in WordPress...
Storify is dying. But Wordpress AutoEmbed is your friend
https://twitter.com/cogdog/status/940622564363190272
https://twitter.com/fncll/status/940725226156867584
https://www.youtube.com/watch?v=grbSQ6O6kbs
https://twitter.com/_mesk/status/940661397624471552
https://twitter.com/samplereality/status/940621488759214083
https://soundcloud.com/jazzcartier/o-dead-or-alive
https://twitter.com/cogdog/status/940765931025793024
https://www.flickr.com/photos/15979685@N08/38438098531/
Featured...
Storify was a brilliant web based tool for curating content from multiple media streams, allowing users to create their own collection, embed them in other sites. Then they got bought by Adobe and nuked everybody's work.
My first reaction was Storify...
The human/zombie story of aggression has changed less than other world conflicts. It's time for a new order, a peaceful mutually beneficial co-existence. I am a Zombie for PEACE.
This was the version of the story of Dominoe formerly published in Storify at https://storify.com/cogdog/dominoe (Storify is dead as of May 2018). It was used for 50+ Web Ways to Tell a Story .
A tale of darkness, fear, and fatigue from a night spent in O'Hare airport. This story would not be possible without the ineptness of United Airlines.
These are tips I accumulated for ds106.us (Digital Storytelling) activities with visual storytelling. Tweet me (@cogdog) your best suggestions and/or tag them #ds106.
I love the words I learn from @katexic and decided it would be fun to make them visuals. With possible snark.
Because #ds106 #sockgate is a new old tale...
Facebook allows romance scammers to easily create of fake personas built upon my public photos . They say this does not violate their Community Guidelines. WTF?
When Google announces the axing of one of their service, it is often wrapped in a phrase of "to focus on the core user experience." WTF is that? It sounds like the end of a movie where the person hearing the line does not get what they sought...
A DML Commons Blog Talk discussion on Digital Identity
As a lead up to a March 13, 2015 presentation for Open Education Week, Brian Lamb and I decided to create a bit of twitter based performance where we pretended to be disagreeing. Some felt this was "icky".
As part of their semester wrap-up, University of Mary Washington students in ds106 (the open digital storytelling course) were asked to "pay it forward" by giving advice to future students.
A collection of things people are talkin 'bout http://ds106.us/
Collecting resources, examples for our ds106 students starting their work in audio....
Asking the twitterverse to help explain to students in ds106 , Digital Storytelling.
My internet friends come together to honor the memory of my Mom who passed away unexpectedly on August 28, 2011. They declared Sept 4 to be a day to bake cookies and share with strangers, just like Mom did. See http://bit.ly/cookielove
The free form wildness that is ds106 radio includes several live broadcasts with Moms...
Awwww, Laura, do not despair!
https://twitter.com/OnlineCrsLady/status/982662902376255489
Let's see if it works here. This is the code copy / pasted from https://publish.twitter.com
<a href="https://twitter.com/intent/tweet?button_hashtag=ColorOurCollections&ref_src=twsrc%5Etfw"...
Scrolling back the blog in time, inspired by John Johnston to see all posts posted on today's date in previous years. This is achieved via the WP Posted Today plugin (that's one I made!).
Featured Image: My Photo Made the April Calendar...
(a demonstration of a date specific shortcode for the new WP Posted Today plugin ).
Search CogDogBlog the way the big dogs do, using a Google Custom Search engine (means you can use all your search tricks).
var googleSearchIframeName...
Testing out the HTML for using details/summary tags for toggle opening content. Compare this in ordinary WordPress to the same done in Pressbooks .
What Are Accordions For? (show/hide) The H5P documentation spells it out nicely:
Reduce the amount...
Checking for H5P embed and recording success....
Featured Image: 2014/365/358 Audio Lift Off flickr photo by cogdogblog shared into the public domain using Creative Commons Public Domain Dedication (CC0)
Go Instagram Go
https://www.instagram.com/p/CYW_r3Yp5pG/
I made the Embed block into a Group, allowing background colors https://wordpress.org/support/article/instagram-embed/
Tweet This *****
https://twitter.com/phb256/status/1480596477235892235
...
Do you need to make sure you are tuned into the latest and typo-encrusted blog posts?
Updates By Old School RSS Readers
If you are savvy, point your RSS reader to use this feed:
cogdogblog.com/feed
Updates By Email
But...
Why? Because I can. The plain text of the last 100 posts....
A hack to get the most recent post. This is a placeholder; all the action is in the page-newest template.
As a lead up to a March 13, 2015 presentation for Open Education Week, Brian Lamb and I decided to create a bit of twitter based performance where we pretended to be disagreeing. Some felt this was "icky".
This idea was hatched on the ferry ride...
Do you have a question, comment, want to share a secret, or send my the account number of a Swiss Bank account? You can find contact details through all channels on my calling card web site .
Or you can send me a message right here. After like 19...
Upload MP4 to Wordpress Media library... example Added here as Video Block item (modern WordPress).
Or use custom HTML:
<video id="m1" width="100%" height="100%" autoplay loop muted>
<source src="http://cogdogblog.com/wp-content/uploads/2011/06/google-guitar-hero.mp4"...
Hi Friend!Do you know any of my friends? Maybe you want to become friends with them as well?
I have connected with my friends using WordPress and the Friends plugin . This means I can share private posts with just my friends while keeping my data...
- 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
xxxxx888yyyy@post.wordpress.com
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:
[category learning group 4]
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!
I did read all the way through, check out the examples and look at the code examples and what they produce. I finally have an understanding of what syndication does to pull in content, why it matters and why not everyone can get it done well. Also new found respect for you and others who lurk backstage at the internet show! It is so easy for us users to say – could we have an x that does y? it takes real craft to make it happen backstage and then for us to see seamless results and yet moan when they are not seamless. I am glad I took the time to read, I can think about my own site in a more skilful way as a result of your post.