Adding transcripts to presentations embedded from SlideShare using YQL

You can see the script in action and download it for your own use. All you need to do is add it to the bottom of any document with one or several SlideShare embed codes in it. Here’s what the script does:

slideshareTranscripts = function(){
var div = document.getElementsByTagName('div');

We get all the DIV elements in the page (there is probably a faster way using CSSQuery these days, but let’s be bullet-proof).

In order to find out which one of the DIVs is a SlideShare embed, we check for an ID that contains __ss as the embed codes have a generated ID starting with this.

What we will do with each of these is to find out what the url of the slideshow is. This is needed because of two reasons: first of all we want to retrieve the transcript and secondly we need a way of matching the returned data from YQL with the right DIV container.

As generated script nodes are not safe to load one after the other this makes sure that the right transcript gets added to the right slides.

So, what we do is check the ID of the DIV, get the first link, retrieve the url from it, store the DIV in an object called containers and use the url as the property name. This property gets a shortcut to the correct DIV as its value. All we need to do then is to get the transcript data via get():

var containers = {};
for(var i=0;div[i];i++){
if(div[i].id.indexOf('__ss')!==-1){
var slideurl = div[i].getElementsByTagName('a')[0].href.split('?')[0];
containers[slideurl]={c:div[i],id};
get(slideurl);
}
}

The get() method is your garden variety script node generation function that calls the YQL API and defines slideshareTranscripts.doit() as the callback parameter. This means that the script will generate a script node, point it to YQL, YQL then gets the transcript information from SlideShare, turns it into JSON and calls doit() with the transcript information as a parameter.

function get(url){
var url = 'http://query.yahooapis.com/v1/public/yql?' +
'format=json&callback=slideshareTranscripts.doit&q=' +
'select%20strong,p%20from%20html%20where%20url%3D%22' +
encodeURIComponent(slideurl) +
'%22%20and%20xpath%3D%27%2F%2Fol%2Fli%27&';
var s = document.createElement('script');
s.src = url;
s.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(s);
}

The job of doit() is to generate the right markup and inject it into the embed codes. We create an ordered list and loop over all the li elements. We create the fitting HTML code for each of the list items and add the content as text nodes (innerHTML would try to render markup used in the slides – not a good idea).

We then retrieve the URL from the uri property and add the list as a new child node to the container div stored previously in the container object.

nt
function doit(o){
var out = document.createElement('ol');
var lis = o.query.results.li;
for(var i=0,j=lis.length;i