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:

Retweetable tweet

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:

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.

No tweet, no buttons

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!

12 Comments Leave a comment

  1. AJ Morris says:

    If you are using WordPress, you can use the plugin Blackbird Pie. Check out this quick video, http://wpcandy.com/broadcasts/the-daily-plugin/day-6. Hope that helps.

    • Dan Johnson says:

      I’ve looked at Blackbird Pie, but it doesn’t do the job. It only allows you to embed a specific tweet in post, by entering the URL or ID of the tweet. It doesn’t allow you to fetch just the latest tweet.

      • AJ Morris says:

        Totally missed that!! Sorry about that. :)

  2. Matt says:

    Have you checked our Yoast’s recent article on Twitter Web Intents?

    • Dan Johnson says:

      Yes, I linked to it in my post, and as I mentioned, Joost’s article doesn’t explain how to do what I’m trying to, it only covers the Web Intents part.

  3. Dan Butcher says:

    Dan, I’m looking forward to seeing what you come up with! As I noted on Yoast’s site, I’m still too inexperienced with php to figure this out from the little he posted–or to put together his snippets with what you found from Kristarella.

    • Dan Johnson says:

      Thanks Dan. I had a play with a PHP Twitter library I found, but still no joy. May have to wait for the definitive guide from Joost!

  4. Wil Brown says:

    Dan, the Twitter JSON feed does include retweets if you append the include_rts=1 parameter to the feed URL.

    e.g.
    http://api.twitter.com/1/statuses/user_timeline/webdesignfs.json?count=20&include_rts=1&callback=?

    Wil.

    • Dan Johnson says:

      Thanks Wil, but according to the maraboustork.co.uk post I mentioned above, and in my experience of testing it, the include_rts parameter only works for atom and xml feeds, not json :(

  5. Dan says:

    I ended up using the Twitter Widget Pro WordPress plugin, which now supports web intents, on Artist Site Builder. I haven’t looked at the code to see how it works, but I guess you could easily unpick it.

  6. Thao says:

    This xml method seems to work for me Dan.

    function RDC_getLatestTweetid($twitterUser = “thao_”) {
    $url = “http://twitter.com/statuses/user_timeline/$twitterUser.xml?count=1″;
    $xml = new SimpleXMLElement(file_get_contents($url));
    $status_id = $xml->status->id;
    return $status_id;
    } ;

    coupled with …

    a href=”https://twitter.com/intent/tweet?in_reply_to=”>Reply</a

    I'd really like to use ProBlogDesign's JSON method (with Wp cache and relative time), but I can't workout how to call the status ID via JSON. Here's the PBD link – http://www.problogdesign.com/wordpress/how-to-use-the-twitter-api-in-wordpress/

  7. Thao says:

    Here’s that above code in full: http://pastie.org/pastes/2718208/text