{"id":533,"date":"2011-05-25T13:14:52","date_gmt":"2011-05-25T00:14:52","guid":{"rendered":"http:\/\/www.thunderguy.com\/semicolon\/?p=533"},"modified":"2013-04-02T15:22:20","modified_gmt":"2013-04-02T02:22:20","slug":"a-simple-twitter-widget","status":"publish","type":"post","link":"https:\/\/thunderguy.com\/semicolon\/2011\/05\/25\/a-simple-twitter-widget\/","title":{"rendered":"A simple Twitter widget"},"content":{"rendered":"

This blog’s sidebar displays my latest Twitter update. I did this manually instead of using a plugin because I couldn’t find a lightweight plugin that did what I want, and I thought it would be a quick and simple project. So here’s how I did it.<\/p>\n

My Twitter widget is written purely in HTML and JavaScript. This means that I can simply put the code into a WordPress Text widget. I don’t have to edit my theme or write a plugin.<\/p>\n

Initially I got the code for the widget straight from the Twitter website. There was a section where you could copy a little bit of HTML to paste into your site (or in a Text widget). This was great because the code was structured to be easily modifiable. They’ve changed to a more opaque implementation now, but they still serve the old scripts from their site. I’ve used these, plus an undocumented feature of the Twitter API, to make my own little Twitter widget.<\/p>\n

Here’s the code, with interesting bits highlighted:<\/p>\n

<div id=\"twitter_div\">\r\n<ul id=\"twitter_update_list\"><\/ul>\r\n<div><a href=\"http:\/\/www.twitter.com\/bnnt\"><img alt=\"Follow bnnt on Twitter\" src=\"http:\/\/twitter-badges.s3.amazonaws.com\/follow_me-b.png\"><\/a><\/strong><\/div>\r\n<\/div>\r\n<script type=\"text\/javascript\" src=\"http:\/\/twitter.com\/javascripts\/blogger.js\"><\/script><\/strong>\r\n<script type=\"text\/javascript\">\r\nfunction twitterCallback2_filtered(timeline) {\r\n\t\/\/ Try to select a non-reply\r\n\tvar select = 0, i;\r\n\tfor (i = 0; i &lt; timeline.length; ++i) {\r\n\t\tif (timeline[i].text.charAt(0) != '@') {\r\n\t\t\tselect = i;\r\n\t\t\tbreak;\r\n\t\t}\r\n\t}\r\n\tvar status = timeline[select];\r\n\t\/\/ Edit the status\r\n\tstatus.text = status.text.replace(\/ #(?:yam|fb|in)\\b\/g, '');\r\n\ttwitterCallback2([status]);\r\n}\r\n<\/script>\r\n<script type=\"text\/javascript\" src=\"http:\/\/api.twitter.com\/1\/statuses\/user_timeline.json?screen_name=bnnt&amp;count=5&amp;include_rts=true&amp;callback=twitterCallback2_filtered\"><\/script><\/strong><\/code><\/pre>\n
Here’s a breakdown of the code.<\/p>\n
The “Follow me on Twitter” button is taken straight from Twitter’s Follow Buttons page<\/a>.<\/p>\n
<a href=\"http:\/\/www.twitter.com\/bnnt\">\r\n<img alt=\"Follow bnnt on Twitter\" \r\nsrc=\"http:\/\/twitter-badges.s3.amazonaws.com\/follow_me-b.png\">\r\n<\/a><\/code><\/pre>\n
Then the little formatting script Twitter have thoughtfully provided. It contains a function called twitterCallback2<\/code>, which formats an array of tweets and writes them into a div with ID twitter_update_list<\/code>.<\/p>\n
<script type=\"text\/javascript\" \r\nsrc=\"http:\/\/twitter.com\/javascripts\/blogger.js\">\r\n<\/script><\/code><\/pre>\n
Twitter no longer seem to link to this script from their site, but it’s still there if you know where to look. I suppose thousands of sites will break if they ever remove this. It’s pretty simple – at some point I will write my own even simpler one and ditch theirs.<\/p>\n
At first I simply used the above script for my Twitter widget. But then I wanted to make a couple of changes. So I wrote a little filter which would tweak the returned tweets and then pass the result to the twitterCallback2<\/code> function.<\/p>\n
function twitterCallback2_filtered(timeline) {<\/code><\/pre>\n
First, I wanted to avoid displaying @replies, since they usually make no sense without context. For example: @DavidPlumpton “They also serve who only stand and look out of the window” (apologies to Milton)<\/a>. (Actually, that doesn’t make much sense even with<\/em> the context.)<\/p>\n
To do this, I set the API call to fetch the last 5 tweets instead of the last one. Then I search through until I find one that isn’t an @reply. If they’re all @replies then I just give up and take the first one.<\/p>\n
\t\/\/ Try to select a non-reply\r\n\tvar select = 0, i;\r\n\tfor (i = 0; i &lt; timeline.length; ++i) {\r\n\t\tif (timeline[i].text.charAt(0) != '@') {\r\n\t\t\tselect = i;\r\n\t\t\tbreak;\r\n\t\t}\r\n\t}\r\n\tvar status = timeline[select];<\/code><\/pre>\n
I also wanted to filter out “control” hashtags that have nothing to do with the tweet. For example, the hashtag #in<\/code> in a tweet will cross-post the tweet to my LinkedIn account. I don’t need this to show up in the widget. Likewise for #fb<\/code> (Facebook) and #yam<\/code> (Yammer).<\/p>\n
\t\/\/ Edit the status\r\n\tstatus.text = status.text.replace(\/ #(?:yam|fb|in)\\b\/g, '');\r\n\ttwitterCallback2([status]);\r\n}<\/code><\/pre>\n
The last line of the function calls twitterCallback2<\/code> to render the tweet.<\/p>\n
The last piece of the puzzle is the Twitter REST API call that actually fetches the tweets. I call user_timeline<\/a> with the undocumented callback<\/code> parameter to turn the response into JSONP<\/a> and call my twitterCallback2_filtered<\/code> function. (To use the raw JSON result I would have to contend with the same-origin policy, which would complicate things considerably.)<\/p>\n
<script type=\"text\/javascript\" \r\nsrc=\"http:\/\/api.twitter.com\/1\/statuses\/user_timeline.json?\r\nscreen_name=bnnt&amp;count=5&amp;include_rts=true&\r\namp;callback=twitterCallback2_filtered\"><\/script><\/code><\/pre>\n
As I mentioned, the final step is to paste the code into a Text widget in my WordPress Admin screens. If you want to use this too, just change the two occurrences of “bnnt” to your own Twitter handle (unless you want to display my tweets on your blog).<\/p>\n