How to Embed Retweetable Tweets on your Site Using Twitter Web Intents

This is something I’ve been struggling with for the last couple of days, and I’ve finally got it working (sort of).

The Aim

The aim here is to embed the most recent tweet from our Twitter account in our sidebar, and enable visitors to retweet, reply, or favourite that tweet, directly from this site.

At time of writing, it is working and looks like this:

Our lastest tweet, with Retweet, Reply and Favourite buttons

The Solution

I had seen this kind of thing at the top of Yoast.com before, and recently Joost posted about Twitter’s new Web Intents, which provide the functionality for the retweets etc.

However, as I noted in my comment, there was no mention of how to embed the latest tweet, or how to get the tweet ID from that tweet into the URLs for the Web Intent buttons. So I had to do some Googling.

I found a ton of posts very similar to Joost’s, outlining the general usage of Web Intents, but no explanation of how to integrate this with embedding the latest tweet.

So I had to try and figure it out myself. Not being a developer, this was no easy task.

I found a method for embedding your latest tweet, many thanks to Kristarella. This worked fine for displaying the tweet, but I still needed to get the ID of the tweet to use in the Web Intent links.

This is where I had to get my hands dirty. I made a copy of the blogger.js script, and made some changes to the twitterCallback2 function as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function twitterCallback2(twitters) {
  var statusHTML = [];
  var linksHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var myID = twitters[i].id_str;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
    linksHTML.push('<a href="http://twitter.com/intent/retweet?related=webdesignfs,thebenhunt&tweet_id='+myID+'" class="twitter-retweet" title="Retweet">Retweet</a><a href="http://twitter.com/intent/tweet?related=webdesignfs,thebenhunt&in_reply_to='+myID+'" class="twitter-reply" title="Reply">Reply</a><a href="http://twitter.com/intent/favorite?related=webdesignfs,thebenhunt&tweet_id='+myID+'" class="twitter-favourite" title="Favourite">Favourite</a>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
  document.getElementById('tweet-links').innerHTML = linksHTML.join('');
}

What I’ve done here is set a variable myID = twitters[i].id_str; which returns the unique ID of the tweet.

I’ve then used this to set the tweet_id parameters in the Web Intent links, which I have stored in the linksHTML variable.

Finally I’ve output the Web Intent links, with their newly found tweet IDs, to a placeholder <div id="tweet-links"></div>

And hooray! It works! … Almost.

The Problem

The problem was discovered when I retweeted someone else’s tweet, and then refreshed our homepage. The tweet and its buttons disappeared.

The tweet and buttons disappeared

Some more time on Google, and I discovered that the json feed I’m using as per Kristarella’s method, does not support retweets. So if the latest tweet is a retweet, nothing will be displayed. Rubbish!

Back to the Drawing Board

I found a promising looking post on maraboustork.co.uk, which demonstrated how to use Twitter’s atom feed instead, which supports retweets, and then convert that into a json object for output. They even have a WordPress plugin for it!

I spent some time implementing this method only to find that when you use the atom feed, the tweet ID is not available, so this method would not be compatible with the Web Intent buttons after all.

Help Wanted

So I switched back to the original json method, and that’s where I am right now. The integration is working at the moment, because our last tweet was not a retweet. But as soon as we post a retweet, the latest tweet will disappear, leaving only the username link (which is hardcoded).

I can live with that for now, but it’s not ideal, so I’m appealing to our readers to help me out on this one. As I said I’m not a developer, so I don’t know if the code changes I made above are the right way, or even a particularly good way to go about this.

If you can help me out, you will receive much praise and kudos from me, and your solution will be published here forever more to help out anyone else in the same boat (I have already come across quite a few).

Thanks in advance!