Xaringan: Embedding Tweets

[felixhaass]

Hi yihui,

first off, thanks for the great package! I'd say it's the best rmarkdown package for presentations out there.

I'm having trouble embedding Tweets into xaringan slides. All I'm getting when I include the content from the "Embed Tweet" option from Twitter is a simple blockquote from that Tweet, but not the enhanced Twitter widget with retweet function etc. This solution did not work, unfortunately.

My guess is that this has to do with the way reveal.js includes the Twitter widget.js. This gnab issue hints at the fact that the widget.js embed needs to happen outside of the textarea. So I've followed your advice and used the html_document includes option to put the widget.js call outside the textarea---but I wasn't successful. Another guess is that this has to do with xaringan's hiccups with HTML embeds that you've mentioned--I don't know.

I've attached a .zip file with a (hopefully) reproducible example: xaringan_embed_tweet.zip

Edit: I've also tried to include the widget.js directly through the beforeInit: option as suggested here, but with no success either.

[felixhaass]

Update: it seems to work now. I can't figure out where the change came from since I didn't update anything, so I'm assuming it's the result from an updated remark-latest.min.js. Anyway, the correct way to embed tweets in xaringan is as follows (including this to help anyone looking for a solution to this problem):

title: "Twitter Test for xaringan"
output: 
  xaringan::moon_reader:
    nature: 
      beforeInit: "https://platform.twitter.com/widgets.js"
---

<blockquote class="twitter-tweet" data-lang="de"><p lang="en" dir="ltr">You&#39;re doing it right if you get frustrated: if you&#39;re not frustrated, you&#39;re (probably) not stretching yourself mentally</p>&mdash; Hadley Wickham (@hadleywickham) <a href="https://twitter.com/hadleywickham/status/565516733516349441?ref_src=twsrc%5Etfw">11. Februar 2015</a></blockquote>

[yihui]

Glad to know it works now!

[jvcasillas]

Is it possible to have more than one file or object in beforeInit? For example, my custom theme already has a .js file specified in beforeInit and I would like to also point to the twitter.js file. I tried the following to no avail:

  beforeInit: ["https://platform.twitter.com/widgets.js", "http://www.jvcasillas.com/ru_xaringan/js/ru_xaringan.js"]

[yihui]

@jvcasillas Should be fixed now. Thanks for the report!

[apreshill]

I have stumbled upon this problem recently now twice in the past week- I'm using the code as provided but am unable to view the widget, even on slide decks where it used to work. I have updated xaringan, but am unsure how/if I should update remarkjs- any advice?

[tcgriffith]

Can I have a look at your slides?

[apreshill]

Thank you and yes!

repo: https://github.com/apreshill/talks/tree/master/orasa-big-magic

rendered: https://alison.netlify.com/orasa-big-magic/slides.html#9

[yihui]

The tweet renders fine for me in Chrome:

Are you previewing the slides in RStudio Viewer? (If so, your RStudio version?)

[apreshill]

For goodness sake. RStudio Version 1.1.456, and I was using Firefox. It renders on Safari too- argh sorry :(

and thank you for looking :)

[yihui]

I just tried Firefox (63.0.1) and it worked there, too.

If anything doesn't look right, I'd look at the console in the Developer Tools first and see if there are any error messages.

[joelgombin]

Thanks for this.
I find that sometimes the twitter widget is too high and thus overflows the slide, what would be your approach to this? Anyone has a css tweak for this?