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

前端未结

关注

 4  530

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

相关标签:

4条回答

鱼传尺愫

2021-02-02 04:50

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

暗喜

2021-02-02 05:04
```
twttr.widgets.load();
```
From Twitter's Dev Docs.
0 讨论(0)
发布评论:

提交评论
- 加载中...

广开言路

2021-02-02 05:06

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

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:

<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

0 讨论(0)

太阳男子

2021-02-02 05:08

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)