Embed Slides in Your Blog

2018/02/02

Introduction

It’s rstudio::conf time and I’ve seen a lot of great presentations shared on twitter. Unfortunately I couldn’t come to the conference, but I thought I would do my part and write a short blog post on how to embed slideshows into a blog post. Yihui Xie’s knitr makes this very simple.

But why would you want to embed your slideshow?

  1. An embedded slideshow makes it easier to talk about in a larger context.

  2. You can show specific slides without taking screenshots.

  3. You could place a series of plots into a slide deck and show them in your blog post. Instead of using vertical space, which is very difficult for the reader, this efficiently uses horizontal space and encourages the reader to explore the plots.

Embed in one line of code

Embedding a slideshow is easy. If it has a URL, you can embed with a single line of code:

knitr::include_url('https://timmastny.rbind.io/slides/first_presentation#1')

Your entire presentation is now an HTML iframe embedded in your blog post. This means you can

Basically anything you can normally do with your slideshow.

To advance, simply click the slideshow and use the arrow keys to go forward or back. Or mouse over and scroll.

Specific slides

If you’d like to embed a specific slide, just reference that slide in the url. For example, I’ll change #1 to #2 in my url:

knitr::include_url('https://timmastny.rbind.io/slides/first_presentation#2')

This is a great replcaement for screenshots, because if you need to edit your slides your blog post updates automatically.

Upload your slideshow to your website

You’ll notice that all my slides are hosted on my domain:

https://timmastny.rbind.io

Your website is the perfect place to host your slides, and Yihui has a tutorial in the blogdown bookdown about how to include and build slideshows on your blogdown website.

Moreover, my slides are written with Rmarkdown and can execute R code. I recommend you check out xaringan, Yihui’s R package for creating slideshows with Rmarkdown.

He also has a slideshow tutorial, but here is a quick summary:

  1. Install xaringan.

  2. Make a new slideshow with

File -> New File -> R Markdown -> From Template -> Ninja Presentation
  1. Save it somewhere in the static directory of your website.
static/slides/First_Presentation.html

This location will give your slideshow the following url:

https://timmastny.rbind.io/slides/first_presentation#1
  1. Assuming you are using the blogdown::serve_site() workflow, you only need to change a few things to build your slides. First, create a new folder R at the top level of your website’s directory that contains a script build.R:
R/build.R

And build.R only needs one line:

blogdown::build_dir("static")

Now you can write, build, and maintain your slideshows on your website!

Future work

I’d like to be able to use a relative reference to the slideshow’s HTML file in the static/ directory, but I think knitr::include_url() requires a live URL. I’ll have to do more research.

I’m also investigating to see if I can trim the iframe so I only see the slides and not the gray bars on the side.

Acknowledgements

This required so little work on my part, it is basically an undocumented feature of Yihui’s blogdown. Section 2.7 of the blogdown bookdown was very helpful, as well as his example website.

Shoutout to the the Stackoverflow question that got me thinking about embedding slides, and pointed me to the bookdown bookdown section that explains knitr::include_url().