将变量合并到默认的推文查询字符串参数中

Question

So I'm making a website that includes a simple javascript/HTML timer. The code for the timer is listed below.

I'm incorporating a tweet system into the website. My aim is for this tweet button to tweet "I lasted (timevariable)". I'm having trouble doing this as the twitter API seems to be kind of restrictive. The only way to configure default tweet text is through query string parameters. Is there any way to incorporate a variable (from the code below) into a query string parameter, or do I need to do this a more complicated way?

I have thought about doing the variable system with php but this code needs to be very lightweight in execution and because of that I would like to avoid php. Even if I did do it with php I would run into the same issue: how to incorporate a variable into a query string parameter that sets the default tweet.

TL;DR: How do I incorporate a variable into a query string parameter (in regards to twitters default tweet text API).

Here is a look at the way that twitter handles default tweet texts:

 <a href="https://twitter.com/share*?text=I%20lasted%20#seconds*" class="twitter-share-  button" data-lang="en">Tweet it</a>   

and here is the code for the counter that I am using.

<label id="minutes">00</label>:<label id="seconds">00</label>
<script type="text/javascript">
    var minutesLabel = document.getElementById("minutes");
    var secondsLabel = document.getElementById("seconds");
    var totalSeconds = 0;
    setInterval(setTime, 1000);

    function setTime()
    {
        ++totalSeconds;
        secondsLabel.innerHTML = pad(totalSeconds%60);
        minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
    }

    function pad(val)
    {
        var valString = val + "";
        if(valString.length < 2)
        {
            return "0" + valString;
        }
        else
        {
            return valString;
        }
    }
</script>

Thank you

Answer 1

Here it is: http://jsfiddle.net/7zKAy/

As you'll see, I change the href of the link through javascript. Ignore the CSS and styles, it's just for show and better presentation.

Start by getting a reference to your link and setting up the base of the url you're going to be using:

var butt = document.getElementById('sharebutton');

var basehref = "https://twitter.com/share?text=";

Then, when you have text to send, build the complete URI. This is one way to do it:

// so i want to add "I lasted 345345334 seconds" to the text

basehref = "https://twitter.com/share?text=" + "\"" + encodeURIComponent("I lasted 345345334 seconds") + "\"";

Notice that I manually add the " at the ends of the string and only encode the contents with encodeURIComponent which is what you use if you want to encode part of a URI instead of all of it. If I was to do the entire thing at one, I'd do:

encodeURI(basehref);

then, attach this new href to your button:

butt.setAttribute('href', basehref);

and you're done. The link might be escaped by the browser when you mouse over it, so in the fiddle, check your console to see the actual string that gets applied to the href attribute.