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.

How do I update the URL that twitter uses?

标签： javascript jquery url twitter pushstate

4条回答

三岁会撩人

2楼-- · 2019-03-10 10:41

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

The general idea is:

In your HTML set the class of your <a> for the twitter share button to be something other than .twitter-share-button. Also give the <a> a style="display:none;".
In your HTML, where you want the twitter share button to appear, create a <div> (or <span>) with a unique id.
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-url etc... attributes as you'd like
- Remove the style attribute from the clone (unhide it)
- Change the class of the clone to twitter-share-button
append() this clone to your <div> from step 2.
Use $.getScript() to load and run Twitter's Javascript. This will convert your cloned <a> into an <iframe> with all the right goop.

Here's my HTML (in 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:

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

0人赞添加讨论(0) 举报

forever°为你锁心

3楼-- · 2019-03-10 10:43

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

0人赞添加讨论(0) 举报

`twttr.widgets.load();`

From Twitter's Dev Docs.

0人赞添加讨论(0) 举报

How to update the twitter share button URL with dy

twttr.widgets.load();

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

`twttr.widgets.load();`