Christian Heilmann

Posts Tagged ‘slideshare’

Fixing the Slideshare HTML displayer

Wednesday, April 27th, 2011

It is impossible to write a blog post about HTML5 and embed slides in Flash in the same without suffering lots of wisecracking comments that don’t have anything to do with the content. To avoid this, I wrote Slideshare HTML and blogged in detail about how it works.

Well, I hacked and scraped and sooner or later this will always bite you in the bum. As it did when the Slideshare developers changed the URLs of the images of the mobile version which of course broke my embedding tool and got me a lot of emails asking me why oh why I have forsaken people.

Bitching on the developer mailing list of Slideshare helped and now the oEmbed API returns not only the number of slides and urls and all the other goodies but also the right image suffix to use.

So, in short words – it is fixed and as I am now using the API rather than building a ScrAPI it should work smoother.

Slideshare embeds without Flash

Friday, November 12th, 2010

I’ve said it a few times before, but I love Slideshare. For a professional speaker like me it is a great way to share my decks and get feedback from people allowing them to re-use. The thing that some people complained about is that the embed is Flash based and as we all know Flash makes kittens cry and Ninjas visible so we can’t have that.

Don’t fret though as there is a way out. Say you have a presentation on Slideshare at http://www.slideshare.net/cheilmann/reasons-to-be-cheerful-fronteers-2010:
Reasons to be cheerful - Fronteers 2010 by photo

Simply add a /mobile/ before the user name to see the mobile version which is images with a bit of HTML:

Slideshare Mobile by photo

You could just slap this in an iframe but the chrome of the mobile version can be a bit overwhelming. No worries – the open web can fix that. Looking at the source code, you find a JSON object with all the info:

The interesting parts here are the baseSlideUrl and the totalSlides. To get the different images, just add —slide—{n}.jpg to the baseSlideUrl with {n} being the number of the slide.

Putting this together, adding some styling and a dash of YUI3 for functionality I can now present you with the embeddable HTML version:

Go to http://icant.co.uk/slidesharehtml and simply enter the URL of the slides to convert them. The source code of the converter is on GitHub so you can host it yourself.

See the flow in the following screencast:

I love open web technologies and clever converters, don’t you?

Adding transcripts to presentations embedded from SlideShare using YQL

Sunday, January 11th, 2009

I like SlideShare a lot (yeah, repetition, I know). It is a great way of spreading your presentations as it allows others to embed them into their blogs and web sites and it also allows people to download and re-use what you’ve done.

One thing I really like about SlideShare is that it creates HTML transcripts of your presentation displayed far down the page as shown in the following screenshot:

Screenshot of slideshare showing transcripts

Now, the annoying thing is that the SlideShare API - full of goodness as it is – does not provide a way to get to these transcripts in case you want to display them alongside your presentation. You also need to authenticate for detailed information which is very needed but also bad if you just want to offer a JavaScript solution.

Good thing that there is an easy way to retrieve information from any web site out there now and get it back as JSON to use in JavaScript: YQL. Using the YQL console and some XPATH I can for example extract the transcription information and get it back as XML (the slideshare URL is http://www.slideshare.net/cheilmann/shifting-gears-presentation and the XPATH //ol/li):


http://query.yahooapis.com/v1/public/yql?q=select * from html where url%3D”http%3A%2F%2Fwww.slideshare.net%2Fcheilmann%2Fshifting-gears-presentation” and xpath%3D’%2F%2Fol%2Fli’&format=xml

If you define the format as JSON and provide a callback parameter you can easily use this to write a small script to inject transcripts into SlideShare embeds:

slideshareTranscripts = function(){
var div = document.getElementsByTagName(‘div’);
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);
}

}
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);
}

function doit(o){
var url = decodeURIComponent(o.query.uri).split(‘”’);
var out = document.createElement(‘ol’);
var lis = o.query.results.li;
for(var i=0,j=lis.length;i var li = document.createElement(‘li’);
var strong = document.createElement(‘strong’);
var p = document.createElement(‘p’);
strong.appendChild(document.createTextNode(lis[i].strong));
p.appendChild(document.createTextNode(lis[i].p));
li.appendChild(strong);
li.appendChild(p);
out.appendChild(li);
}

containers[url[1]].c.appendChild(out);
}

return{doit:doit}
}();

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 var li = document.createElement(‘li’);
var strong = document.createElement(‘strong’);
var p = document.createElement(‘p’);
strong.appendChild(document.createTextNode(lis[i].strong));
p.appendChild(document.createTextNode(lis[i].p));
li.appendChild(strong);
li.appendChild(p);
out.appendChild(li);
}

var url = decodeURIComponent(o.query.uri).split(‘”’);
containers[url[1]].c.appendChild(out);
}

return{doit:doit}
}();

That’s it. Of course you can simplify this by matching only the OL and using innerHTML to write out the list in one go, but this solutions also allows you to alter the HTML output of the list to – for example – make every http://example.com a link.

Happy transcribing!

SlideShare List WordPress Plug-In

Monday, June 30th, 2008

I wanted to give a list of all my presentations on SlideShare right here on the blog and started playing with the SlideShare API in earnest. As I failed in just including my results in the blog, I wrapped them in a WordPress plug-in in case you also feel like listing your SlideShare achievements.

You can see the plugin in action on the presentations page and here’s a screenshot:

screenshot of my list of presentations created with the slidesharelist plugin for wordpress

Notice that I am offering a link to Easy SlideShare as an option so that blind users can only go to the transcript instead of having to try to understand the Flash embed. The API actually has a transcript element, but there is no content in there right now. Would be cool to see it enabled :)

Update: The Plugin now also allows you to copy and paste the “WordPress” code from SlideShare into any WordPress blog running this plug-in.

Simply copy and paste the wordpress code provided by slideshare into any blog post running this plugin to have a fancy display

This screenshot shows what the inital state of a post (with some CSS) looks like:

screenshot of a SlideShare presentation shown with this plugin (closed state)

When you click the “here and now” link you get the “normal” SlideShare experience:

screenshot of a SlideShare presentation shown with this plugin (display state)

The plug-in is open source, BSD licensed and if you want to use it you need to get a developer key from SlideShare

Once you have those, simply change the variables in the slidesharelist-config.php file accordingly. Say SlideShare gave you a key of “minor” and a secret of “I really like Weird Al Yankovic” then you’ll have to change:


$key = ‘YOUR KEY’;
$secret = ‘YOUR SECRET’;
$apiurl = ‘http://www.slideshare.net/api/1/’;
?>

to the following:


$key = ‘minor’;
$secret = ‘I really like Weird Al Yankovic’;
$apiurl = ‘http://www.slideshare.net/api/1/’;
?>

That’s all you need to do, simply FTP the whole folder over to your plugin directory of WordPress and activate the plugin inside WordPress.

All you need to display your list of presentations in a blog post or page is to add the following:

[*slideshare-username-amount]

For example the following would show my latest 5 slides:

[*slideshare-cheilmann-5]

The other option you have is to copy and paste a single presentation into the blog post. You can either use the following syntax:

[*slideshare-presentation:url]

An example would be my “Creating Happy Little Web Sites” presentation:

[*slideshare-presentation:http://www.slideshare.net/cheilmann/creating-happy-little-websites]

Alternatively you can use the copy and paste code slideshare offers you for blogs hosted on slideshare from the SlideShare presentation page itself. For example my presentation “Yahoo is Open for Developers” from the Ankara Open Source event:

[*slideshare id=477388&doc=opensourceankara-1213971414957829-9&w=425]

This is taken from:

http://www.slideshare.net/cheilmann/yahoo-is-open-to-developers

New in 1.10:

As requested in the comments below, you can now also list slideshows for tags and groups. The syntax is the following:


[*slideshare-group:{group}:{amount}]

For example:


[*slideshare-group:yahoo-developer-network:3]

And if you want to see slides for a certain tag:


[*slideshare-tag:{tag}:{amount}]

For example:


[*slideshare-tag:ajax:3]

Hacking SlideShare’s embed adding a preview and be a lot shorter and readable

Thursday, April 17th, 2008

Edit: There is a bug in the script (see comments) but somehow Googlecode does not allow me to edit my own file. I will fix it once I got around that issue.The bug reported in the comments is now fixed, sadly enough I also had to re-write the converter as Google code does not allow me to replace an older version of a download (or is there a trick?). The new file is called previewer2.js

As readers of this blog know, I am a big fan of SlideShare as a distribution platform for my presentation slides. However, there are some things that annoy me about it.

One of them is the rather verbose embed code SlideShare offers you:



That is quite a mouthful and the main issue is that when you use several slide embeds in one document, you’ll slow down the rendering of your page as each of these Flash embeds need to be instantiated and tries to pre-cache the first three slides from S3.

I’ve analyzed the code a bit, added some other info I found in the RSS feed and came up with a small JavaScript that embeds slides in a different way. All you need there is the following code:



This gives slideshare the same SEO link love but is a lot less to add. Instead of the full slide include, you’ll get a preview image you can click that gets replaced with the flash movie. The following are examples:

Now, in order to convert one to the other you could do it by hand, or use the slideshare embed converter or install the Greasemonkey script

So far this is a hack, but I talked to Jonathan Boutelle about it yesterday night at the San Francisco JavaScript meetup and he is happy to pursue this idea further. My wishlist:

  • A larger preview image
  • A rest API call that gives me this information in a readable manner