Question

I have created an interface that allows people to Tweet at certain individuals from a webpage. To do so, I am utilizing Twitter’s web intents. At first, the page had a textarea that contained a placeholder tweet that was passed through as a text parameter when a user clicked a Reply button, but the scope has changed so that the user should be able to enter text in the textarea, click the button, and see the Twitter popup with their updated tweet, because user testing showed that people were less likely to tweet at people if they weren’t able to edit the content on the page.

The problem is that while this code does update the Twitter intent link, it seems to have broken some functionality of the Twitter intent link. Most notably, the links do not open up in a small popup like they normally do – instead, they replace the current page. Also, the “in_reply_to” functionality is intermittent – certain links that should contain tweets to reply to do not, while others do.

Anyone tried to do anything like this? And if so, any advice? I’m at a loss at this point.

The HTML (we’re using Django, hence the template logic):

<div class="response">
  {%if quote.tweet_id%} 
  <textarea id="twitter_response_text" class="has_tweet_id" maxlength="140">{{quote.twitter_handle}} {{quote.twitter_text_default}}</textarea>          
  <label for="twitter_response_text"><span></span></label>                     
  <a class="hasReply" data-tweet-id="{{quote.tweet_id}}" href="https://twitter.com/intent/tweet?in_reply_to="><button value="respond" data-quote-id="{{quote.id}}"/><img src="{{STATIC_URL}}img/reply_arrow.png"> Reply</button></a>
  {%else%}
  <textarea id="twitter_response_text" maxlength="140">{{quote.twitter_text_default}}</textarea>
  <label for="twitter_response_text"><span></span></label>
  <a href="https://twitter.com/intent/tweet?text="><button value="reply" data-quote-id="{{quote.id}}" /><img src="{{STATIC_URL}}img/reply_arrow.png"> Reply</button></a>
  {%endif%}
</div>

Javascript:

$(".response a, .twitteraction a").on("click", function() {

//get text from the textarea of the current slide

var textarea = $(this).parents(".slide").find("#twitter_response_text")
if (textarea.val() !== "") {
  text = textarea.val();
} else {
  text = textarea.text();
}

//maybe we need the handle?
// var handle = $(this).parents(".slide").find("#twitterhandle").text();

//get the link
var link = $(this).attr("href");


//check to see if it needs reply link or regular
if ($(this).hasClass("hasReply")) {

//get the tweet id, stored as data attribute in the anchor
var tweetId = $(this).data("tweet-id");

//construct the query with a twitter id but no handle
var query = encodeURIComponent(tweetId) + "&text=" + encodeURIComponent(text) + "&related=ForecastFacts&original_referer=http://climatecliff.org/";

//add link to anchor
$(this).attr("href", (link + query));

} else {  

//construct the query with text and related
var query = encodeURIComponent(text) + "&related=ForecastFacts&original_referer=http://climatecliff.org/";

//add query to anchor

$(this).attr("href", (link + query));


}
});

Answer 1

Turns out there is a way to remove the dependency on platform.twitter.com for their Javascript by adding it yourself – https://dev.twitter.com/docs/intents

Regarding the intermittent in_reply_to links, for some reason the data I attributes I had were adding 1 to the tweet_id that was being passed in the Django context. I’m not sure why, but I went ahead and refactored my code to only dynamically add the text, rather than the tweet id, since that isn’t going to change.

Now it all works just fine.