Garrick Aden-Buie - Sharing Your xaringan Slides

Showcase your presentations in style with great-looking social media cards and responsive, seamlessly embedded slides in web pages.

You put a lot of time and effort into your slides: structuring content, choosing the right gifs, tweaking colors and picking fonts. In short: slidecrafting.

In this post, I’ll share some tips and strategies for publishing your xaringan slides online. Use the linked checklist below to get started or for review when prepping your next presentation.

This post covers some new features just released in my package xaringanExtra. If you haven’t used it before, it provides a playground of enhancements for xaringan. It’s not available on CRAN, so you’ll need to install it from GitHub:

# install.packages("remotes")
remotes::install_github("gadenbuie/xaringanExtra")

Checklist

Fill in metadata with metathis
Create a social media card
Add a “share bar” with use_share_again() from xaringanExtra
Get your slides online
Pre-flight checks
Embed your slides with embed_xaringan() from xaringanExtra
Share with the world!

Fill in Metadata

The first step is to give your slides all the metadata required to be found via search engines or to look great when shared on social media sites.

To do this, I recommend using a small package I wrote called metathis. It’s available on CRAN!

install.packages("metathis")

Basically, metathis helps fill out <meta> tags in your HTML document. These tags are used by search engines and social media sites like Twitter and Facebook to describe your page, list the title and author, link to your profile, and show a preview image for the page (we’ll get to this in the next section).

Here’s a template you can use for your own slides. I’m using a recent presentation as an example, or you can reference the example in the metathis documentation.

```{r metathis, echo=FALSE}
library(metathis)
meta() %>%
  meta_name("github-repo" = "gadenbuie/build-your-own-universe") %>%
  meta_social(
    title = "Build your own universe",
    description = paste(
      "Scale high-quality research data provisioning with R packages.",
      "Presented at R/Medicine 2020."
    ),
    url = "https://build-your-own-universe.netlify.app",
    image = "https://build-your-own-universe.netlify.app/social-card.png",
    image_alt = paste(
      "Title slide of Build your own universe:",
      "Scale high-quality research data provisioning with R packages,",
      "presented at R/Medicine 2020 by Travis Gerke and Garrick Aden-Buie"
    ),
    og_type = "website",
    og_author = "Travis Gerke",
    twitter_card_type = "summary_large_image",
    twitter_creator = "@grrrck",
    twitter_site = "@travisgerke"
  )
```

Most of the arguments are self-explanatory or well-described in ?meta_social. One thing to watch out for is that the image argument must be the full-qualified URL to the image. In other words, the entire URL including the https:// bit, taking into account where the slides will live when you put them online.

Create a Social Media Card

Why should you add a preview image?

Social media cards are the rich link previews you see on websites like Twitter and Facebook. I think it’s worth the extra work to include a preview image for several reasons.

First, it’s much more likely that your link will be seen, especially if your preview image is interesting or visually compelling. Users are more likely to click through and take a look at your slides when they have some idea of what’s on the other side of the link.

Second, the preview image is a tiny window into your own personal style. You have no control over the rest of the time line where your link is being shared — your 280 characters look just like everyone else’s — but your preview image is your space to visually communicate your personal style.

And finally, using a preview image means that your crafted message will appear every time your link is shared, not just the first time. A common alternative is to share the link to the slides, but to add an image to share post. This looks great the first time the link is shared, but when someone else shares your slides’ link, they probably won’t go to the trouble of including a screenshot.

Here are three examples of tweets sharing slides that illustrate the various approaches to link previews.

{.lightbox description=“Slide link with limited metadata. (tweet)”}

{.lightbox description=“Slide link with a shared image. (tweet)”}

{.lightbox description=“Slide link with a preview image and complete metadata. (tweet)”}

Taking a screenshot of your slides

How do you create an image for your social media cards? I’m glad you asked! Typically, I like to take a screenshot of the title slide and use that as the preview image.

Taking a screenshot of your slides is incredibly easy if you’re using Firefox, which has a built-in screenshot feature. On Chrome, you can install an extension, like Nimbus Capture.

To take a screenshot, I open my slides in Firefox and select Take a Screenshot from the three-dots menu in the browser URL bar.

Firefox’s **Take a Screenshot** menu option

Then, don’t click “Save full page” or “Save visible”. Instead, click on your slides area so the entire slide is selected and then click “Download”.

Firefox’s screenshot feature, step 2. The user needs to click on the slides area to select the entire slide.

Firefox’s screenshot feature, step 3. The user needs to select ‘Download’ to save the image.

The perfect share image ratio

If you’re using a 4:3 (the xaringan default) or 16:9 (my personal favorite) slide ratio, chances are that your share image will look okay… but not perfect. In particular, if you’re targeting Twitter (for sharing with #rstats), you might find that parts of your preview image are cut off if the image width and height aren’t just right.

It turns out that the best ratio for share card images on Twitter is 1.91:1.

So to get the best image possible, you’ll need to temporarily render your slides with this aspect ratio by changing the ratio to 191:100 in your slides’ YAML header. (It turns out that remarkjs doesn’t like fractional ratio units, hence the need to multiply by 100.)

output:
  xaringan::moon_reader:
    # ... other xaringan options ...
    nature:
      ratio: 191:100

Set the YAML header, render your slides, open in a browser, and take a screenshot.

If this sounds like a hassle, it’s because it kind of is. Fortunately, we can use the webshot2 package to automate the entire process. Note webshot2 requires that you have Chrome installed on your computer and is only available from GitHub.

# install.packages("remotes")
remotes::install_github("rstudio/webshot2")

Then, you can use this little function below to render your slides_rmd in the funky ratio needed for the share image, saving a screenshot of the first slide to path.

#' Screenshot Your Title Slide for Share Image
#'
#' Takes a screenshot of your title slide for sharing on Twitter
#' (and other social media sites).
#'
#' @param slides_rmd Your slides file
#' @param path Path to new share image
screenshot_share_image <- function(
  slides_rmd,
  path_image = "share-card.png"
) {
  if (!requireNamespace("webshot2", quietly = TRUE)) {
    stop(
      "`webshot2` is required: ",
      'remotes::install_github("rstudio/webshot2")'
    )
  }

  webshot2::rmdshot(
    doc = slides_rmd,
    file = path_image,
    vheight = 600,
    vwidth = 600 * 191 / 100,
    rmd_args = list(
      output_options = list(
        nature = list(ratio = "191:100"),
        self_contained = TRUE
      )
    )
  )

  path_image
}

To use the function, just give it the path to your slides .Rmd and share-card.png will be created in your working directory.

screenshot_share_image("my_slides.Rmd")

Add a “share bar”

You’re almost done prepping your slides for sharing! If you know that you’ll embed your slides on your website or someone else’s page, you’ll want to add a share bar to your slides using use_share_again() from xaringanExtra.

```{r xaringanExtra-share-again, echo=FALSE}
xaringanExtra::use_share_again()
```

!Meet share again from xaringanExtra

The share again extension adds a small bar at the bottom of your slides — but only when the slides are embedded in an <iframe>. The bar contains buttons to move between slides, which often isn’t obvious when you’re looking at embedded slides. It also makes it easy to go full screen and there’s a sharing menu for quickly sharing your slides on social media sites.

It turns out that the Viewer pane in RStudio is also an <iframe>, so the share bar will show up when you preview your slides in RStudio, but it won’t appear if you load your slides directly in a browser window.

Check out the full share again documentation for more information.

Get Your Slides Online

Now that your slides are all set up and ready to be shared (or presented!), you need to get your slides online! For tips on how to best get your slides online, I’ll defer to the excellent presentation, Sharing on Short Notice, by Alison Hill and Desirée De Leon.

Sharing on Short Notice by Alison Hill and Desirée De Leon

Those slides are also available at the short link rstd.io/sharing.

Pre-Flight Checks

Now that your slides are online, it’s time to check that they look as good as you expect before you share them with the world.

To check your metadata, you can use Twitter’s share card validator. Drop in your link and Twitter will show you a preview of the share card for your link. Much better than sending yourself private messages to find out how your share card looks!

Similarly, you can also test your Open Graph tags (used by Facebook and other sites) with opengraphcheck.com or on Facebook’s Sharing Debugger.

Finally, it’s a good idea to open your slides in every browser you have on your machine — or at the very least in just one browser — and walk through your slides to make sure everything works and that you haven’t forgotten to upload any images or assets.

Embed Your Slides

Now that your slides are out in the world, you might want to embed them in your web page, for example in a talk page or the talks section of your website.

To do this, I recommend using embed_xaringan() from xaringanExtra. It embeds your slides in a responsive, aspect-ratio <iframe>, meaning that the slides are seamlessly embedded in the page and their size is automatically adjusted to maintain the aspect ratio that matches your slides.

Here’s an example of embedded slides from a recent talk I gave with Travis Gerke.

xaringanExtra::embed_xaringan(
  url = "https://build-your-own-universe.netlify.app",
  ratio = "16:9"
)

Notice that if you’ve used share again, your embedded slides will have a nice share bar for navigation and sharing.