Twitterers Times Two: Multiple Twitter Widgets in a WordPress Sidebar

March 27th, 2009  |  3 Comments

(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.

Responses

  1. RaiulBaztepo says:

    March 31st, 2009 at 1:03 pm (#)

    Hello!
    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language ;)
    See you!
    Your, Raiul Baztepo

  2. Jose says:

    June 30th, 2009 at 10:22 am (#)

    Hi,

    I think this trick would be great for me.
    I ran 2 Twitter Accounts and would like to display both in my website.
    It’s a hand made CMS, not a WP but that shouldn’t change, right?

    The first problem that I got is that your like to your modified JS file is pointing to: http://micheleandtom.com/wp-includes/js/twitter.js … but when I downloaded it containde the HTML from a 404 Error page.

    I have no idea about JS so I just grabbed this text from your post and saved it into my web as: /$root/scripts/js/twitters.js :
    —————————————
    function twitterCallback2(C)
    {
    var A = [];
    for (var D = 0; D < C.length; ++D)
    {
    var E = C[D].user.screen_name;
    var B = C[D].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\]*[^.,;'">\:\s\\)\]\!])/g, function (F)
    {
    return “” + F + ““;
    }).replace(/\B@([_a-z0-9]+)/ig, function (F)
    {
    return F.charAt(0) + “” + F.substring(1) + ““;
    });
    A.push(“” + B + ” ” + relative_time(C[D].created_at) + ““);
    }
    document.getElementById(E + “_twitter_updates”).innerHTML = A.join(“”);
    }
    ————————————

    Then I created my php element using my own Twitter user in the UL ID line… but I can’t see any content there.
    :(

    Any suggestion?
    Thanks a lot in advance!

    Jose

  3. Tom Offermann says:

    July 3rd, 2009 at 5:08 pm (#)

    Jose,

    Oops, you’re right. I did get the link wrong for the .js file. It should be wp-includes/js/twitter-simple.js (which I’ve now fixed in the post.)

    Most likely the problem you’re experiencing is related to my misnamed file snafu. After you change the id, make sure you edit the lines as well. (Step #2 in my solution)

    The “src” for the first line should point to the .js file you saved. (I had the wrong file name here as well.)

    The second line should include your Twitter user name in the src url (replace “toffermann” or “MichRee” with your user name.)

    Hope this helps! Let me know if you have further questions.

    Tom