Paragraph Embedding from JISCPress

One of the things I was keen to explore within the context of the JISCPress project was the potential for using WordPress as a platform for publishing paragraph level fragments that could be embedded in third party web pages.

As Joss announced on the JISCPress blog, We’ve got paragraph data output switches! that expose paragraph level content through a unique URI in a variety of formats (xml, txt, html, rss and json), as well as object embed codes for each paragraph, though I’m not sure if this is going to be maintained…? e..g at the moment, I think we’re trialling literal text blockquote embeds:

(If the object embed does disappear, similar functionality could be achieved using the JSON feed and a Javascript function, though I guess we need JSON-P (i.e. support for something like &callback=foo to make that really easy.)

See also: A Quick Update for a review of the latest feature releases within the digress.it theme we’re using.

To demonstrate one possible use case for object embedding, see the post Engaging With the Issues Raised By The Google Book Settlement which includes three embedded paragraphs from the JISC’s current consultation around the Google books settlement.

Here’s the actual HTML:

Note that currently there is an issue with sizing the embed container (can any CSS gurus out there give us a fix?

Ideally we need to identify the container height and then size it automatically so there are no scrollbars? I’m guessing .scrollHeight might have a role to play in autodetecting this?)

One thing you might notice is that the URIs for the embedded consultation questions follow a similar pattern – only the paragraph number identifier changes:
http://writetoreply.org/googlebooks?p=8&digressit-embed=4

What this means is that we should be able to pull in a random paragraph by constructing a URI with a randomly generated paragraph number. So for example:

If you reload the page, you have an 80% chance of seeing a different question…

Here’s the Javascript snippet:

var n=2+Math.floor(Math.random()*5);
var o=document.createElement('object');
o.setAttribute('style','width: 100%; height:70px;');
o.setAttribute('id','61c197964762012d4819093ebeee4fcf');
var p='http://writetoreply.org/googlebooks?p=8&digressit-embed='+n;
p=p.replace(/#038;/,''); //get round WordPress escaping everything...
o.setAttribute('data',p);
document.getElementById('wtr_embed').appendChild(o);

//There’s a div with an appropriate id attribute (‘wtr_embed’) also added to the page…
//Note that the div needs to be placed before any inline Javascript in the page;-)

I’m not sure yet if we can track the use of embeds (certainly server logs should be able to track calls, but these probably can’t be captured using Google Analytics?), but it’s still early days…