Question

I’m building a section which uses the jQuery UI to allow users to drag words around on screen to create their own sentences, which they can then share on Twitter.

I’m wanting the text they create to be inputted into the Twitter text area when they click the ‘Tweet’ button.

I’m hoping that, with PHP or JS, there would be a way to output the text that’s been moved into the div, then input it into the ‘&text=Text%20goes%20here’ part of the Twitter code.

<a href="https://twitter.com/intent/tweet?button_hashtag=SUYearbook&text=Text%20goes%20here" 
   class="twitter-hashtag-button" data-size="large" 
   data-related="username">Tweet #SUYearbook</a>

You can see the set up here if you need to understand anything further: http://goo.gl/s6CBD

To reiterate: Drag text into area, on pressing the Tweet button (or a ‘finish’ button), it adds the text contents to the Twitter code and then it’s there in the tweet modal.

Answer 1

The simplest way would be to add a class to the span of each word on drop into the area, and then loop through each span with the appropriate class. Something like this:

$(".twitter-hashtag-button").click(function(e) {
    e.preventDefault();
    var text = $(".selectedWord").map(function() {
        return $(this).text();
    }).get().join(' ');
    window.location.assign("https://twitter.com/intent/tweet?button_hashtag=SUYearbook&text=" + text)
});