Offermann.us

(Or, How I wrote almost 800 words about changing two lines of code…)

My wife and I keep a blog about our recent move to Buenos Aires. Michele is a non-stop, daily blogging machine, while I write a post, oh about once a month…which may not be a very impressive body of work, but it certainly beats my track record around here lately!

In addition to my relative lack of posts, what’s also been missing on our blog has been my Twitter updates in the sidebar. Why? Because while Twitter provides a nice, simple widget that works well for including Twitter updates on the blog, it only works for a single user.

But, what if you have a blog with two writers, and they both want to include their tweets in the sidebar? Here’s how I finally solved that problem.

What Goes Wrong When You Add Two Twitter Widgets, Anyway?

I’m no javascript expert, but Twitter’s widget code is fairly simple:

First, Twitter generates the following lines of HTML, which you paste into your blog’s template. With WordPress, it’s easiest to put it in a Text Widget in the Sidebar.

The HTML for the second widget looks like this:

Looks familiar, right? In fact, the only difference is the different Twitter user name in the second script. It’s now MichRee.json.

Notice that the <ul> in this widget has the same exact id as the first one: “twitter_update_list“. That’s where the problem lies, because watch what happens:

1. In the first Widget Text Box, toffermann.json calls twitterCallback2, which looks for the first unordered list element with an id of “twitter_update_list” in the page’s HTML, where it inserts the list of toffermann’s tweets.

2. Then, in the second Widget Text Box, MichRee.json calls the same twitterCallback2 function, which again searches for the first unordered list with an id of “twitter_update_list.” And, rather than find that list to be empty, this time it finds that toffermann’s tweets have already been inserted…so it goes ahead and overwrites them with MichRee’s tweets.

Final result: One widget displays the wrong updates, while the other widget is blank.

Oops.

My Not-So-Easy Two Step Solution

1. Change the twitterCallback2 Function

   I modified the twitterCallback2 function so that it looks for an element ID that includes the Twitter user name, not the hard-coded “twitter_update_list” ID.

   After running the blogger.js code through javascript tidy and changing just the last line of the function, it now looks like this:

   I saved the modified file as wp-includes/js/twitter-simple.js.

2. Change the HTML in the Widget Text Boxes

   Include the Twitter user name in the <ul> element ID, and then point to our newly saved twitter.js file.

   That means, in Widget Text Box #1, you put:

   And, in Widget Text Box #2:

And, that’s that! You now have updates for two Twitterers on the same page.

That Seems Complicated. Aren’t There Any Other Solutions?

Why, Yes. There are a ridiculous number of Twitter-Wordpress solutions out there. Here is a list of the main contenders I considered that can handle multiple Twitter users…and the nitpicky reasons why I ultimately rejected them:

1. Twitter for WordPress by Ricardo González.

   A strong contender. But, it’s not super configurable, so I couldn’t get the output to look exactly like the output of the Twitter widget. It can’t make the timestamp linkable. And, it doesn’t always show timestamps for tweets in “human readable format”. I prefer it to say a tweet was posted “about 4 days ago”, rather than posted on “03/22/09”, but this plugin switches to the dd/mm/yy format if the tweet is more than 24 hours old.

2. twitterjs by Remy Sharp.

   Looked promising, but since it’s not a WordPress plugin, it requires a bit more configuration than I was hoping for. Plus, it also doesn’t do “human readable format” timestamps for tweets older than 24 hours. (Though it looks like earlier versions did do it, so I wonder why it changed.)

3. Twitter Widget Pro by Aaron Campbell.

   I came very close to using this. It’s almost perfect. But, here’s where I get really picky…In addition to the text of the tweet, it also shows its “source”. (As in “this post was sent by TweetDeck.”) I know that twitter.com shows the source as well, but I think it’s superfluous information, and I don’t care to show it.