Dynamically adjusting the tweet button

The Infinite Jukebox has a tweet button that allows you to tweet the URL of a song so you can share it with others.   The recently added tuning feature encodes all of the tuning information into the URL, making it easy to share a ‘tuned’ infinite song.  One challenge I encountered it making this work was dynamically changing the URL  that the tweet button will ‘tweet’.

The ‘tweet’ button is a twitter supplied widget. When your page load, a script runs that finds the tweet button on the page and does a bunch of twitter magic to the button (for one thing, it turns the button into an iFrame). When you click the button, the twitter dialog has the URL ready to go.  However, if the URL has been programmatically changed (as in my tuning feature), the tweet button won’t pick this up.  To make this work, whenever you change the URL of the page, you need to remove the tweet button, re-attach it and then call twttr.widgets.load() to force the twitter button to update.

Here’s the gist:

The tweet button:
<span id='tweet-span'>
<a href="https://twitter.com/share" id='tweet'
function tweetSetup() {
var tweet = $('<a>')
.attr('href', "https://twitter.com/share&quot;)
.attr('id', "tweet")
.attr('class', "twitter-share-button")
.attr('data-lang', "en")
.attr('data-count', "none")
tweet.attr('data-text', "#InfiniteJukebox of " + t.fixedTitle);
tweet.attr('data-url', document.URL);

view raw


hosted with ❤ by GitHub


, ,

%d bloggers like this: