将 twitter 分享按钮添加到闪亮的 R 导航栏答案

【问题标题】：Add a twitter share button to shiny R navbar将 twitter 分享按钮添加到闪亮的 R 导航栏
【发布时间】：2015-05-12 03:22:28
【问题描述】：

尝试在我的导航栏中添加一个 twitter 分享按钮。我能得到的壁橱是把它放在标题中，但这留下了太多的空白。我希望它位于导航栏的右上角，但我不知道在 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) {
  }
))

【问题讨论】：

标签： css r alignment shiny navbar

【解决方案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');"))

【讨论】：