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

How to update the twitter share button URL with dynamic content?

提问by cjroebuck

I initialize the tweet button at the beginning of my app, after user interaction the current window's location is updated using HTML5 pushState, but the twitter button is still sharing the previous URL from when it was initialized.

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

How do I update the URL that twitter uses?

如何更新 twitter 使用的 URL？

回答by ramoneguru

I had success using the new Twitter feature that reloads the share url.

我使用重新加载共享 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();
}

My initial HTML just has a container for the share link, like this:

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

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

Any time I get new data from an ajax call I just call updateTwitterValues() and pass along the new info. More info here https://dev.twitter.com/discussions/5642

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

回答by tig

I figured this out. Here's how to make this work.

我想通了这一点。以下是如何进行这项工作。

The general idea is:

总体思路是：

1. In your HTML set the classof your <a>for the twitter share button to be something other than .twitter-share-button. Also give the <a>a style="display:none;".
2. In your HTML, where you want the twitter share button to appear, create a <div>(or <span>) with a unique id.
3. In your jQuery, when you want to set the data for the twitter share button you will:
   • 'clone()the hidden, mis-named,` tag from step #1
   • On this clone, set the data-urletc... attributes as you'd like
   • Remove the styleattribute from the clone (unhide it)
   • Change the classof the clone to twitter-share-button
4. append()this clone to your <div>from step 2.
5. Use $.getScript()to load and run Twitter's Javascript. This will convert your cloned <a>into an <iframe>with all the right goop.

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

Here's my HTML (in Jade):

这是我的 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

Then in your client-side .js:

然后在您的客户端 .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");

I got the main clues for this solution from here: http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery

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

回答by Fred Gandt

twttr.widgets.load();

twttr.widgets.load();

From Twitter's Dev Docs.

来自Twitter 的开发文档。

回答by Kiran

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