添加一个Twitter分享按钮到闪亮的R navbar

问题描述

正在尝试在我的导航栏中添加Twitter分享按钮。我可以得到的衣柜是把它放在标题，但这留下太多的白色空间。我想它在导航栏的右上角，但我不能弄清楚哪个（如果有）是在 navbarPage 函数中使用的适当的参数。

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

推荐答案

您可以尝试添加 div tabPanel 后面添加以下代码，直接向 navbar 使用jQuery：

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');"))

这篇关于添加一个Twitter分享按钮到闪亮的R navbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！