Specific twitter timeline uiOutput to be reactive in r Shiny

Question

I read all the threads about dynamic ui within the Shiny framework, but I did not find anything that work. I want to display a twitter timeline. This chunk of code works really well :

library(shiny)
library(shinydashboard)

runApp(list(ui = fluidPage(
  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");')),
  titlePanel(""),
  sidebarLayout(
    sidebarPanel()
    , mainPanel(
      a("Tweets by Andrew Ng",
        class="twitter-timeline",
        href = "https://twitter.com/AndrewYNg"
      )
    )
  )
)
, server = function(input, output, session){

}
)
)

But when, I try to make it reactive, I only got a link to the twitter timeline:

library(shiny)
library(shinydashboard)
runApp(list(ui = fluidPage(
  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");')),
  titlePanel(""),
  sidebarLayout(
    sidebarPanel()
    , mainPanel(
      uiOutput("mytimeline")
    )
  )
)
, server = function(input, output, session){

  output$mytimeline <- renderUI({
    a("Tweets by Andrew Ng",
      class="twitter-timeline",
      href = "https://twitter.com/AndrewYNg"
    )
  })



}
)
)

score 0 · Answer 1 · answered Jan 09 '18 at 03:12

The Twitter script only loads embedded content when it runs the first time. Since the script is in static UI but the timeline is in dynamic UI, the script will always run before the timeline is inserted.

The Twitter docs have a section about this: https://dev.twitter.com/web/javascript/initialization

You can run twttr.widgets.load() to scan the page for newly added embedded content.

One way to run execute this when inserting embedded content would be to include it in a script tag:

library(shiny)

twitterTimeline <- function(href, ...) {
  tagList(
    tags$a(class = "twitter-timeline", href = href, ...),
    tags$script("twttr.widgets.load()")
  )
}

runApp(list(ui = fluidPage(
  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");')),
  titlePanel(""),
  sidebarLayout(
    sidebarPanel()
    , mainPanel(
      uiOutput("mytimeline")
    )
  )
)
,
server = function(input, output, session) {

  output$mytimeline <- renderUI({
    twitterTimeline("https://twitter.com/AndrewYNg", "Tweets by Andrew Ng")
  })
}
))

See How to enable syntax highlighting in R Shiny app with htmlOutput for a similar issue with more details

I don't know if it is supposed to work on your computer but for me it does not, I always got the link only. Thanks for your answer though. — hans glick, Jan 09 '18 at 09:45
Do you see any error messages in your browser JavaScript console? Also, does it work if you manually run `twttr.widgets.load()` in the JavaScript console in your original example? — greg L, Jan 09 '18 at 15:08

Specific twitter timeline uiOutput to be reactive in r Shiny

1 Answers1