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

javascript jquery url twitter pushstate

14,509

Solution 1

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

Solution 2

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

Solution 3

twttr.widgets.load();

From Twitter's Dev Docs.

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

View more solutions

14,509

Author by

cjroebuck

Updated on June 06, 2022

Comments

cjroebuck almost 2 years

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?