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

Question

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

如何更新 twitter 使用的 URL？

Answer 1

我使用重新加载共享 url 的新 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 中，为 twitter 共享按钮设置<a>的class ，而不是.twitter-share-button 。 还要给<a>一个style="display:none;" .
在您希望 Twitter 共享按钮出现的 HTML 中，创建一个具有唯一id的<div> （或<span> ）。
在您的 jQuery 中，当您想为 twitter 分享按钮设置数据时，您将：
- 'clone() 步骤 #1 中the hidden, mis-named, ` 标签
- 在此克隆上，根据需要设置data-url等...属性
- 从克隆中删除style属性（取消隐藏它）
- 将克隆的class更改为twitter-share-button
append()这个克隆到你的<div>来自第 2 步。
使用$.getScript()加载和运行 Twitter 的 Javascript。 这会将您克隆的<a>转换为带有所有正确 goop 的<iframe> 。

这是我的 HTML（在 Jade 中）：

  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

然后在您的客户端 .js 中：

// the twitter share button does not natively support being dynamically
// updated after the page loads. We want to give it a unique (social_id)
// link whenver this modal is shown. We engage in some jQuery fun here to 
// clone a 'hidden' twitter share button and then force the Twitter
// Javascript to load.

// remove any previous clone
$('#twitter-share-button-div').empty()

// create a clone of the twitter share button template
var clone = $('.twitter-share-button-template').clone()

// fix up our clone
clone.removeAttr("style"); // unhide the clone
clone.attr("data-url", someDynamicUrl); 
clone.attr("data-counturl", someDynamicCountUrl);
clone.attr("class", "twitter-share-button"); 

// copy cloned button into div that we can clear later
$('#twitter-share-button-div').append(clone);

// reload twitter scripts to force them to run, converting a to iframe
$.getScript("http://platform.twitter.com/widgets.js");

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

Answer 3

twttr.widgets.load();

来自Twitter 的开发文档。

Answer 4

<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？

问题描述

4 个解决方案

解决方案1
15 2013-09-04 19:47:08

解决方案2
13 已采纳 2012-03-22 00:35:50

解决方案3
4 2015-05-02 04:04:35

解决方案4
1 2018-01-16 11:10:49

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

问题描述

4 个解决方案

解决方案1 15 2013-09-04 19:47:08

解决方案2 13 已采纳 2012-03-22 00:35:50

解决方案3 4 2015-05-02 04:04:35

解决方案4 1 2018-01-16 11:10:49

解决方案1
15 2013-09-04 19:47:08

解决方案2
13 已采纳 2012-03-22 00:35:50

解决方案3
4 2015-05-02 04:04:35

解决方案4
1 2018-01-16 11:10:49