将网页转换为幻灯片使用带有 HTML 标签的 flickR

Question

我必须在 URL 中以幻灯片形式显示三条推文。
这是我没有幻灯片的代码

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      ####
    ),

    mainPanel(
      htmlOutput("top_tweets_1"),
      htmlOutput("top_tweets_2"),
      htmlOutput("top_tweets_3")
    )))

server <- function(input, output) {
  tws <- c("https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322")
  output$top_tweets_1 <- renderUI({
    tagList(
      tags$head(
        tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s)    [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
      ),
      HTML(
        paste('<blockquote class="twitter-tweet" data-lang="en"
              style=" width:500;
                height:500;">',

              paste("<a href=\"",tws[1],"\">","tweet1","</a>"),
              '</blockquote>') 
      ))
  })
  output$top_tweets_2 <- renderUI({
    tagList(
      tags$head(
        tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s)    [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
      ),
      HTML(
        paste('<blockquote class="twitter-tweet" data-lang="en"
              style=" width:500;
                height:500;">',

              paste("<a href=\"",tws[2],"\">","tweet2","</a>"),
              '</blockquote>') 
      ))
  })
  output$top_tweets_3 <- renderUI({
    tagList(
      tags$head(
        tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s)    [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
      ),
      HTML(
        paste('<blockquote class="twitter-tweet" data-lang="en"
              style=" width:500;
                height:500;">',

              paste("<a href=\"",tws[3],"\">","tweet3","</a>"),
              '</blockquote>') 
      ))
  })

}

运行应用程序

shinyApp(ui = ui, server = server)

我看到这段代码使用了slickR 包，它符合我的需要，但我想显示 URL 内容，而不是图片。 这是我用一个 URL 尝试过的，看看它是否有效

library(slickR)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      ####
    ),

    mainPanel(

      slickROutput("slickr", width="500px"),

    )))

server <- function(input, output) {
  tws <- c("https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322")

  output$slickr <- renderSlickR({

      slickR(
        tagList(
        tags$head(
          tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s)    [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
        ),
          HTML(
          paste('<blockquote class="twitter-tweet" data-lang="en"
              style=" width:500;
                height:500;">',

                paste("<a href=\"",tws[1],"\">","tweet1","</a>"),
                '</blockquote>')
        )) )
    )}
}


Run the application 
`shinyApp(ui = ui, server = server)`

所以我尝试使用它，但我什么也没得到或出现此错误

错误：obj 必须是字符向量

有什么帮助吗？

Answer 1

这是一个使用Twitframe 在 iframe 中嵌入推文的解决方案。还有一些 JS 代码可以自动设置 iframe 的高度，我也在 Twitframe 上找到了这些代码。该应用程序使用 JS 库 slick.js。您必须下载 zip 文件 here 并将其解压缩到应用程序的 www 子文件夹中。我没能把幻灯片居中。

library(shiny)

tweets <- c(
  "https://twitter.com/Twitter/status/1144673160777912322",
  "https://twitter.com/Twitter/status/1144673160777912322",
  "https://twitter.com/Twitter/status/1144673160777912322"
)
urls <- sapply(tweets, URLencode, reserved = TRUE)
srcs <- paste0("https://twitframe.com/show?url=", urls)

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.match(/^tweet_/)){
    $("#" + oe.data.element.id).css("height", parseInt(oe.data.height) + "px");
    if(oe.data.element.allLoaded === true){
      setTimeout(function(){$("#tweets").slick({
        arrows: true,
        dots: true,
        slidesToShow: 1, 
      })},0);
    }
  }
});'

ui <- fluidPage(
  fluidRow(
    tags$head(
      tags$script(HTML(js)),
      tags$link(rel="stylesheet", type="text/css",
                href="slick-1.8.1/slick/slick-theme.css"),
      tags$link(rel="stylesheet", type="text/css",
                href="slick-1.8.1/slick/slick.css"),
      tags$script(type="text/javascript", 
                  src="slick-1.8.1/slick/slick.min.js"),
      tags$style(HTML(
        "
#slick .slick-prev {
  position:absolute;
  top:65px; 
  left:-50px;
}
#slick .slick-next {
  position:absolute;
  top:95px; 
  left:-50px;
}
.slick-prev:before, .slick-next:before { 
  color:red !important;
  font-size: 30px;
}
.content {
  margin: auto;
  padding: 20px;
  width: 60%;
}"))
    ),

    uiOutput("slick")
  )
)


server <- function(input, output, session) {
  output[["slick"]] <- renderUI({
    tagList(
      tags$div(
        class = "content",
        tags$div(
          id = "tweets",
          lapply(seq_along(srcs), function(i){
            tags$div(tags$iframe(
              id = paste0("tweet_", i),
              border=0, frameborder=0, height=50, width=550,
              src = srcs[i]
            ))
          })
        )
      ),
      singleton(tags$script(HTML(
        sprintf("$(document).ready(function(){
          var nloaded = 0;
          var allLoaded;
          $('iframe[id^=tweet_]').load(function() {
            nloaded++;
            if(nloaded === %d){
              allLoaded = true;
            }else{
              allLoaded = false;
            }
            this.contentWindow.postMessage(
              { element: {id:this.id, allLoaded: allLoaded},  query: 'height' },
              'https://twitframe.com');
          });
        });", length(tweets)))))
    )
  })
}

shinyApp(ui, server)