Add a twitter share button to shiny R navbar

问题

Trying to add a twitter share button to my navbar. The closet I can get is to place it in the header, but this leaves too much white space. I would like it to go in the top right of the navbar, but I cannot figure out which (if any) is the appropriate argument in the navbarPage function to use.

library(shiny)

runApp(launch.browser = TRUE, 
  list(
  ui = shinyUI(navbarPage(
    title=" ", fluid=FALSE,
    header = HTML("<div style='float:right'>
                  <a href='https://twitter.com/share' 
                     class='twitter-share-button' 
                     align='middle' 
                     data-url='www.mywebsite.com' 
                     data-text='Visit www.mywebsite.com' 
                     data-size='large'>Tweet
                  </a>
                  <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');
                  </script>
                  </div>"),
    tabPanel(
      title = "Data",
      h1("Data"),
      br(),
      tabsetPanel(
        type = "tabs", 
        tabPanel("Selection"),
        tabPanel("View")
      )
    ),
    tabPanel(
      title = "Plots"
    )
  )),
  server = function(input, output) {
  }
))

回答1:

You could try adding the div directly to the navbar using jQuery by adding this after your last tabPanel:

tags$script(HTML("var header = $('.navbar > .container');
                       header.append('<div style=\"float:right\"><a href=\"https://twitter.com/share\" class=\"twitter-share-button\" aling=\"middle\" data-url=\"www.mywebsite.com\" data-text=\"Visit www.mywebsite.com\" data-size=\"large\">Tweet</a></div>');
                       console.log(header)")),
    tags$script(HTML("!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');"))

来源：https://stackoverflow.com/questions/28967949/add-a-twitter-share-button-to-shiny-r-navbar

标签

css

alignment

Shiny

navbar