How to show embedded tweet in R shiny app?

Question

I'm finishing up my dashboard atm, and I'm trying to show a tweet on my page. I'm using the tweetrmd package to do this, but it doesn't seem to work

here is part of my UI code

library(tidyverse)
library(shiny)
library(rtweet)
library(tweetrmd)

screenshot <- tweet_screenshot(tweet_url("Metro", "1251153881209307136"))
# UI

list(
  ui <- tagList(
    includeCSS("style.css"),
    navbarPage("#Corona",
               windowTitle = "#Corona",
                 tabPanel("Twitter",
                          sidebarLayout(
                            sidebarPanel(
                              h2("Algemene twitter data", align = "left"),
                              ),
                            mainPanel(
                              tabsetPanel(
                                id = "Tabs", 
                                  tabPanel(
                                  title = "Kranten",
                                  h3("Frequentie tweets over corona door populaire kranten", align = "center"),
                                  plotOutput("plot1")%>% withSpinner(color="#dca108"),
                                  div(img(src= screenshot, align = "center"), style="text-align: center;", id= "screenshot"),
                                ),                                )
                              )
                            )
                            ))
  )
)

Question is: can I make the tweet_screenshot function work in a shiny app (default is rmarkdown) and how?

If I check out the screenshot object it shows this:

(screenshot <- tweet_screenshot(tweet_url("Metro", "1251153881209307136")))

file://C:\Users\jolien\AppData\Local\Temp\RtmpKeTPxU\file47383c65585c.html screenshot completed

Thanks in advance

Answer 1

A solution using twitframe.com:

library(shiny)

tweet <- "https://twitter.com/Twitter/status/1144673160777912322"
url <- URLencode(tweet, reserved = TRUE)
src <- paste0("https://twitframe.com/show?url=", url)

js <- '
$(window).on("message", function(e) {
  var oe = e.originalEvent;
  if (oe.origin !== "https://twitframe.com")
    return;
  if (oe.data.height && oe.data.element.id === "tweet"){
    $("#tweet").css("height", parseInt(oe.data.height) + "px");
  }
});'

ui <- fluidPage(
  fluidRow(
    tags$head(
      tags$script(HTML(js)),
      tags$style(HTML(
        "
        .content {
          margin: auto;
          padding: 20px;
          width: 60%;
        }"))
    ),

    uiOutput("frame")
  )
)


server <- function(input, output, session) {
  output[["frame"]] <- renderUI({
    tagList(
      tags$div(
        class = "content",
        tags$div(tags$iframe(
          id = "tweet",
          border=0, frameborder=0, height=50, width=550,
          src = src
        ))
      ),
      singleton(tags$script(HTML(
        "$(document).ready(function(){
          $('iframe#tweet').on('load', function() {
            this.contentWindow.postMessage(
              { element: {id:this.id}, query: 'height' },
              'https://twitframe.com');
          });
        });")))
    )
  })
}

shinyApp(ui, server)