Academic Wordpress & DIVI websites

Blog with Inspiration & Tips

If you have presented a research paper at a conference, you could make the slides available on your personal website as a downloadable .ppt or .pdf file. But it is much nicer to create a slider for site visitors to browse through your presentation one sheet at a time. In this post I explain how to do that, using Slideshare.

Make a Text Link to Your PowerPoint or PDF File

If you just want a link to your presentation in a text that you are publishing on your website – and sometimes that is all you need – you can

  1. upload the PowerPoint file or a PDF file to the WordPress media library
  2. link to that file from any text phrase in your page or post

If you would like some further instructions on how to do that: take a look at the tutorial by Easy WP Guide on inserting links to media files.

Turn Your Presentation into a Slider

What is much more convenient to your site visitors, is enabling them to browse through your conference presentation on one slide at a time, without the hassle of downloading and opening a file. You can achieve that by first putting it on Slideshare and subsequently embedding it in your WordPress site. For that you have to copy an embed code from Slideshare. This platform, the name already gives it away, is a social network specifically aimed at sharing presentations. It is owned by LinkedIn, and an account is free. The added advantage of embedding a presentation in your site through Slideshare is that people may also discover your work through Slideshare. So you will reach more people than if you would just put your presentation on your website.

To embed a presentation through Slideshare, follow these steps:

  1. Make a Slideshare account
  2. Upload the file of your presentation (various formats allowed, including .ppt and .pdf)
  3. Open the presentation you have just uploaded and click on the ‘share’ button
  4. Copy the embed code (starting with <iframe…) and past it in the text tab of your post or page
  5. Optional: if you think the presentation title and your name below it is redundant, you can just delete that

You may be tempted to copy the ‘WordPress Shortcode’ instead of the ‘Embed’ code, but in my experience it does not work. I suspect because it is meant to function within wordpress.com sites and not self-hosted WordPress sites.

If you wonder what the result of the embed code looks like: here is a presentation from the days when I was still a scholar myself.

Making the Conference Presentation Slider Responsive

Looks pretty good, right? However, if you have followed the instructions so far, there is still a problem. And that is that your conference presentation slider is not responsive, meaning that it does not look good on all different device sizes. If you make your browser window a lot smaller, your presentation will start to look like the screenshot: a large black area will appear above and below the sheets.

To fix this – I have already done that for the presentation above, that is why it looks good if you read this post on a phone or tablet – you need to add some extra code bits to the embed code that you have just copied and pasted. So go back to the embed code in the text tab of your post or page. It will at the moment look like this:

<iframe src="//www.slideshare.net/slideshow/embed_code/key/2pOUDqqcUAkLMG" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

What you need to do, is three things:

  1. Place the iframe element in a div element with some styling (see the code snippet below)
  2. Remove the width, height, frameborder, marginwidth and marginheight from the iframe code
  3. Replace the style within the iframe element with the style in the code snippet below
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75.00%; padding-top: 38px;"><iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="//www.slideshare.net/slideshow/embed_code/key/4w3VQMFhudRgQm" scrolling="no" allowfullscreen></iframe></div>

It would probably be easier though to just copy the full code snippet, paste it in your own site and replace my Slideshare-embed-URL with your own (that’s just one step instead of three). Oh, one more thing: this styling works for the old PowerPoint default size (4:3). If your sheets are in the new default size (16:9), you should replace 75.00% as the padding-bottom with  56.25%.

Easily Embedding Your Slideshare Presentation with a Plugin

If you plan to add Slideshare presentations to your site frequently, the method of copying, pasting and altering code may seem a bit cumbersome. You may thus prefer the help of a plugin (even though extra plugins always come with a risk of slowing down your site or breaking something when updated). I have not yet tested these plugins myself, but some options seem to be: