将推特分享按钮添加到闪亮的 R 导航栏

Question

正在尝试将 Twitter 分享按钮添加到我的导航栏。壁橱我能弄到的就是放在header里，但是这样留白太多了space。我希望它位于导航栏的右上角，但我不知道哪个（如果有的话）是 navbarPage 函数中要使用的适当参数。

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) {
  }
))

Answer 1

您可以尝试使用 jQuery 将 div 直接添加到 navbar，方法是在最后一个 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');"))

将推特分享按钮添加到闪亮的 R 导航栏

Add a twitter share button to shiny R navbar

css

r

alignment

shiny

navbar