问题
I have to show three tweets in the URLs as a slideshow.
here is my code without slideshow
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>')
))
})
}
Run the application
shinyApp(ui = ui, server = server)
and I saw this code using slickR package which is fit with my need but I want to show URL content, not pictures.
here is I tried it with one URL to see if it work
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)`
so I tried to use it but I got nothing or this error
ERROR :obj must be a character vector
any help?
回答1:
Here is a solution using Twitframe to embed tweets in iframes. There's also some JS code to automatically set the height of the iframes, that I also found on Twitframe. The app uses the JS library slick.js. You have to download the zip file here and extract it the www subfolder of your app. I didn't manage to center the slideshow.
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)
来源：https://stackoverflow.com/questions/57184074/web-pages-into-slideshow-use-flickr-with-html-tags