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

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:

<div style="width:425px;text-align:left" id="__ss_335941">
<object style="margin:0px" width="425" height="355">
<param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=highlandflingbadgesnew-1207296687342384-9"/>
<param name="allowFullScreen" value="true"/>
<param name="allowScriptAccess" value="always"/>
<embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=highlandflingbadgesnew-1207296687342384-9" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed>
</object>
<div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;"><a href="http://www.slideshare.net/?src=embed"><img src="http://static.slideshare.net/swf/logo_embd.png" style="border:0px none;margin-bottom:-5px" alt="SlideShare"/></a>
 | <a href="http://www.slideshare.net/cheilmann/building-badges-for-distribution-335941?src=embed" title="View 'Building Badges for distribution' on SlideShare">View</a> | 
<a href="http://www.slideshare.net/upload?src=embed">Upload your own</a>
</div>
</div>

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:

<div class="slideshare">
<a href="http://www.slideshare.net/cheilmann/building-badges-for-distribution-335941#highlandflingbadgesnew-1207296687342384-9">View 'Building Badges for distribution' on SlideShare</a>
<script src="http://chrisslidesharehacks.googlecode.com/files/previewer2.js"></script>
</div>

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

This entry was posted on Thursday, April 17th, 2008 at 11:26 pm and is filed under embed, hack, lazyload, slideshare, unobtrusive. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.