Open Learning Network

Many bloggers are familiar with copying embed code from sites like YouTube and Slideshare to include the content in their blog posts. Now there's a simpler, more robust way...

I've tried to write a plain English tutorial, for a non-technical and technical audience - all you need is experience authoring content in a blog or content management system like Drupal or Moodle.

How to embed content on OLnet.org

Embedding on OLnet screenshot, Flickr

To embed content from Cohere, YouTube, Flickr, Slideshare, etc. on OLnet.org:

1. First, upload the image, video or whatever to the 3rd party service, eg. Flickr - you will need an account with the service.
2. Create/edit your post on OLnet as normal, http://olnet.org/node/add/blog
3. Create a link to the page where you want the content to be embedded. For example for Flickr the link might be, http://flickr.com/photos/nfreear/4295517044/
4. Right-click on the link, choose "Edit link", choose the "Advanced" tab.
5. Under "Stylesheet Classes" enter "embed". Press OK on the Link dialog box, then Preview or Save for the post.

What is oEmbed?

oEmbed is a simplified, standardised means for embedding content like photos, video and text from your favourite third party sites in your blog or content management system. Although relatively new, so-called "providers" already include Flickr, YouTube, Slideshare and many more. Providers at the Open University now include Cohere (via OLnet.org) and MALT Wiki. There are plug-ins for software including Drupal, Django and the jQuery Javascript library to assist you in using oEmbed on your site and in your content. The use of oEmbed will be native to Wordpress 2.9.

Technically, oEmbed is a specification for an extensible, RESTful web service that returns data in JSON (Javascript Object Notation) or XML formats. The syntax for an oEmbed request (a HTTP GET) is,

http://youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv=VesKht_8HCo&format=json

Where:

1. The first part is the URL for an oEmbed end-point, in this case http://youtube.com/oembed
2. url - A required parameter; a url-encoded URL representing the content, in the case of YouTube it is a link to the page to watch a video.
3. format - An optional parameter in lower-case specifying the format to be returned.

The data returned looks something like this:

{
"version": "1.0",
"type": "video",
"title": "Brian Mcallister, Roadtrip Nation",
"html": "<object width=\"480\" ...><param name=\"movie\" value=\"http://www.youtube.com/v/VesKht_8HCo&fs=1\">...</object>",
"height": 295,
"width": 480,
"author_name": "olnetchannel",
"author_url": "http://www.youtube.com/user/olnetchannel",
"provider_name": "YouTube",
"provider_url": "http://www.youtube.com/"
}

Enough of the technical background. As an author you won't have to worry about this data - later on I'll describe how to make embedding easy!

What is Cohere?

Cohere is a web site where you can share ideas and make connections with people. Cohere provides RSS feeds and embed code. Adding oEmbed will make it easier for everyone to embed mind-maps.

Below are some example embeds, and see this minimal page for a simple example.

Cohere - What does OLnet.org provide? what are the activities that bring people back to our site? Brian McAllister, Roadtrip Nation, on YouTube

(22 October 2009.)