Question

我在应用程序开始时初始化推文按钮，在用户交互之后，使用HTML5 pushState更新当前窗口的位置，但是twitter按钮仍然在初始化时共享以前的URL。

如何更新Twitter使用的网址？

Answer 1

我成功使用了重新加载共享网址的新Twitter功能。

function updateTwitterValues(share_url, title) {
// clear out the <a> tag that's currently there...probably don't really need this since you're replacing whatever is in there already.
  $(container_div_name).html('&nbsp;'); 
  $(container_div_name).html('<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + share_url +'" data-size="large" data-text="' + title + '" data-count="none">Tweet</a>');
twttr.widgets.load();
}

我的初始HTML只有一个共享链接容器，如下所示：

<div id="twitter-share-section"></div>

每当我从ajax调用中获取新数据时，我只需调用updateTwitterValues（）并传递新信息。更多信息https://dev.twitter.com/discussions/5642

Answer 2

我想出来了。以下是如何使这项工作。

一般的想法是：

在您的HTML设置中，您的class的{{1}}用于Twitter分享按钮，而不是<a>。同时提供.twitter-share-button一个<a>。
在您希望显示Twitter分享按钮的HTML中，使用唯一style="display:none;"创建<div>（或<span>）。
在您的jQuery中，当您想要为twitter分享按钮设置数据时，您将：
- 来自步骤＃1的clone（）id`标记
- 在此克隆上，根据需要设置the hidden, mis-named, etc ...属性
- 从克隆中删除data-url属性（取消隐藏）
- 将克隆的style更改为class
twitter-share-button此克隆从第2步开始append()。
使用<div>加载并运行Twitter的Javascript。这会将您克隆的$.getScript()转换为<a>并使用所有正确的goop。

这是我的HTML（在Jade中）：

<iframe>

然后在你的客户端.js：

  a.twitter-share-button-template(style="display:none;", href='https://twitter.com/share=', data-lang='en',
      data-url='http://urlthatwillbe_dynamically_replaced',
      data-via='ckindel', data-text='Check this out!',
      data-counturl='http://counturlthatwillbe_dynamically_replaced') Share with Twitter
    #twitter-share-button-div

我从这里得到了这个解决方案的主要线索： http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery

Answer 3

<body>
 The tweet button:
 <span id='tweet-span'> 
    <a href="https://twitter.com/share" id='tweet' 
           class="twitter-share-button" 
           data-lang="en" 
           data-count='none'>Tweet</a>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</span>

<div>
  <input type="button" onclick="tweetSetup('http://www.google.com','MyGoogle')" value="TestTwitter" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function tweetSetup(dynamicurl,dynamictext) {
    $(".twitter-share-button").remove();
    var tweet = $('<a>')
        .attr('href', "https://twitter.com/share")
        .attr('id', "tweet")
        .attr('class', "twitter-share-button")
        .attr('data-lang', "en")
        .attr('data-count', "none")
        .text('Tweet');
    $("#tweet-span").prepend(tweet);
    tweet.attr('data-text', dynamictext);//add dynamic title if need
    tweet.attr('data-url', dynamicurl);
    twttr.widgets.load();
}
</script>
</body>

如何使用动态内容更新Twitter分享按钮URL？

3 个答案: