Hacking the Twitter javascript

After considerable searching I found the other day instructions at PluggedOut for an improved javascript that won't hang your page while data is being retrieved from Twitter. It works splendidly for the purpose. I've been playing with the code Jonathan provides and have made a number of changes to it.

1. Since Twitter is apparently no longer including the time stamp in its API I removed the part of the code that time stamps the output.

2. But also, I turned it into a kind of chat box, so that it outputs the recent Twitters from people I've designated as friends as well as my own.

3. I've added the location of the Twitterer as well as links to the Twitterer's profile.

Now, I don't know anything about javascript. I don't know how to write it, or why the elements do what they do. But I did manage to successfully manipulate this script so that it works for me, and I thought others might want to try it for themselves and see how I did it. So, here's the script, which has two parts.

First, put this script in the head section of your template:

<script> window.onload = function() {   var twitter_id = '765942';   var url = 'http://www.twitter.com/t/status/friends_timeline/' + twitter_id + '?callback=twitterCallback&count=3';   var script = document.createElement('script');   script.setAttribute('src', url);   document.body.appendChild(script); } function twitterCallback(obj){   var elem = document.getElementById('twitter_data');   var html = "";   for(var i=0 ; i<3 && i<obj.length ; i++){     html += "<div style=''><ul><li class='tweets'>" + "<a href='http://www.twitter.com/" + obj[i].user.screen_name + "'>" + obj[i].user.name + "</a> <span style='color:#444444;'>(" + obj[i].user.location + "):</span> <span style='color:#777777;'>" + obj[i].text + "</span> </li></ul></div>";   }   elem.innerHTML = html; } </script>

Note:

1. You need to change the ID in this line to your own ID:

var twitter_id = '765942';

2. I assigned the <li> to a class called "tweets." (And in that class I have the list-style set to call up an image for the bullet.) This can of course be removed or changed. There are also a couple colors assigned that can be changed at will.

3. At the time of writing I have three tweets being shown at a time. You can alter this by changing the number after count= in the code. It also seems to be the case that you have to change the number in this line:

for(var i=0 ; i<3

Why? I don't know, but that's what worked for me.

Second, put this script where you want the Tweets to appear on your page:

<div id="twitter_data"><span style="color:#777777;">Loading - Please Wait...</span></div>

Again, you can change the color of the text to whatever you'd like.

It occurs to me that one could make a sort of chat box for one's site in this way, to replace a tagboard. You'd just want to register a new account at Twitter and make the username and password of that account available to your blog visitors. Of course, unless/until it becomes easy to move between Twitter accounts having separate ones for separate purposes will be inconvenient.  (If one did create a Twitter chat box, it would be nice if there were a way of making a form for users to type into with the username and password already plugged into it, so your blog visitors wouldn't have to deal with Twitter directly. Not that I would know how to implement such a thing or if it's possible.)

Update (4-1-07) -- For some reason the javascript, now in the sidebar, loads beautifully on the main page and also in the date-based archives, but it doesn't load on individual pages or in the category archives [fixed that!]. This is a mystery to me. I've tried various things to get it to work, but I'm at a loss. If anyone knows why this should be, please let me know!

Update (4-2-07) -- I seem to have fixed everything now! Other TypePad users attempting to use this script are going to encounter the same problem, so let me explain how I did it.

First, a general comment, again specific to TypePad. I added the first part of the javascript above to my head-common template. In order to do that I had to create (or have already created) a head-common template module. And I also had to create template modules for all the indexes that call up the head-common template. (In addition to the ones listed at that link, I think you have to add head-index and head-date-based, but maybe there's duplication in these and it's not strictly necessary; I'm not sure.). Then emend this line in each:

<$MTWeblogIncludeModule module="head-common"$>

to this:

<$MTInclude module="head-common"$>

Once I did that correctly all my various pages worked--the main page and category archives and date-based archives--but the individual pages still didn't load the Twitter output.

I finally figured out that this is because the first section of the Twitter javascript is conflicting with javascript that's called up in the comments section of the individual pages. Specifically, it's conflicting with this script, which appears as this line in the comment-form template: 

<script type="text/javascript" src="<$MTStaticWebPath$>js/comments.js"></script>

Apparently, the problem arises because both scripts use the onload function. So, knowing nothing whatever about this I figured I'd try a fix suggested on this page and, incredibly, I got it to work on the first try.

What I did was to copy the .js file called up by the comment form and paste it into a new window of my html editor. I appended to the end of the new .js file the first section of the Twitter javascript, with just the <script> and </script> tags removed. Then I uploaded the .js file (I called it comment-form.js) to my TypePad account, in the files section (accessible via the control panel.)

Finally, in order to make this work you have to create a new comment-form template module, if you haven't already. The template is available here. In your new template, replace the address in this line:

<script type="text/javascript" src="<$MTStaticWebPath$>js/comments.js"></script>

with the address for your comment-form.js file:

<script type="text/javascript" src="YOUR-ADDRESS-HERE/comment-form.js"></script>

Rather complicated! But it does seem to work, at least. Makes me wish that TypePad didn't have to rely on so many nested templates, which make doing even ordinary things very difficult.

Tags: shout box, javascript, tagboards, chat, hacks, Twitter

Comments

[Felipe Pereira]

This doesnt work anymore...

[Debra Hamel]

That's likely. I don't think it's needed anymore. With Twitter's current script you can just put the second part of it (they mention this on the site, I believe) at the bottom of your site so it doesn't call up the Twitter information until last.