How do I display multiple HTML badges on my site? I only appear to be able to display one user at a time.

i am really very very angry about tis..!

I'm confused, I tried to do this and had no problem. Can someone point me to a site where they're trying to do this and failing? Here's what I did:
http://www.bradhubbard.net/~oracle/te...

Checked it in both Firefox (2.0.0.11) and IE (7). Only change I made was giving the DIVs unique IDs.

Can you please post the code of your two badges? I tried changing the div id, but that didn't do anything.

My blog is private (restricted access) so posting the address wouldn't help.

You should be able to view the source directly (from your browser, go to View > Page Source or View > Source).

I would happily post it here, but whenever I do it posts the two badges directly, and strips out my div tags. See example below:
<div>
follow calciphus at http://twitter.com</div>

And the second badge:
<div>
follow clunkclunk at http://twitter.com</div>

Oh, these are the Flash badges! I think the problem is with HTML badges. At least I am using the latter on Blogger, and they appear on top of each other.

Interesting, even here it appears to work. I wonder what is causing it to not work on your blog? Are you certain you have the IDs correct in the twitter code tag? It is buried under the FLASHVARS property, as id=######

I was faster. One minute! ;)

i was talking about the html badges also. i have no problem with the flash badges.

Completely my mistake. I'll look into it.

iframes? the js looks to be one request specific, (ie, gets executed per page, not each part of page...) iframes would be a (yes, icky) work around.

Yeah, I was just looking over the HTML code. What the javascript is doing is finding an element named "twitter update list" and then populating it with all the twitter updates for a user. Unfortunately, Javascript honors the last-loaded script, so that's why you can't see multiple people.

Yep, works with iframe.

http://www.bradhubbard.net/~oracle/if...

Look at the files involved here:
http://www.bradhubbard.net/~oracle/

You will need to be able to create little files like html_test1.html and store them on a server someplace for this solution to work. If you can't, you might consider switching to the flash badge.

Someone good at Javascript could update the twitter JS. To behave properly, you simply need to be able to provide a different DIV name for each user, and have the script honor that div. If I was any good with JS, I'd do it myself.

I don't know much about JavaScript either. It would be cool if you could give the callback function the ID as argument, but I don't know if that's possible.

Is it possible to copy the script, add another callback function, change the UL ID both in the script and in the HTML code, and upload it somewhere else? I tried to test this locally, but it didn't work. Again, I know nothing about JavaScript.

I figured it out. You need to change the src of the javascripts to your own web server and tweak the name of the twitter_update_list elements so they are different for each badge, for example I just changed the second one to twitter_update_list2 and it worked for me.

Could you please post your source?

The script for each badge became something like this:

<div><span></span>
</div>

And http://micronauta.googlepages.com/tw_... contains:

function twitterCallback2(obj) {
var twitters = obj;
var statusHTML = "";
var username = "";
for (var i=0; i<twitters> 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);

if (delta < 60) {
return 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}

Yo add pairs, that is the code and include for each badge, modifying the twitter_update_list for each pair. In my case the second pair is twitter_update_list2 . You can see it working at http://blog.canal.cl/

Hope this helps.

Oops the code got stripped by the this commenting system, sorry. You can go to http://blog.canal.cl/ and check the source.

When I use that code, it reverses the problem for me, making my twitters viewable on safari and IE, but not Firefox. Do you have any idea why?

Hey, I managed to figure out how to display two twitters on one webpage. I figured I'd tell everyone who wanted to know:

Your Twitter (All of them) accesses this javascript:

<twitters> 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);

if (delta < 60) {
return 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';

Copy the code and paste it into a javascript(.js) file that is associated with YOUR site.

Inside the code, the function twitterCallback2 needs to be renamed to whatever you decide, preferably something that has to do with the first twitter you have. ex: exampleCallback

Also, at the very end of the function is 'document.getElementById('twitter_update_list').innerHTML = statusHTML;'.
'twitter_update_list' needs to be renamed. ex: 'example_update_list'

Save those changes and go to the page where you've placed the code given to you by twitter. The

ID (twitter_update_list) name needs to be changed to whatever you wrote in the getElementById() slot. (In my example that would be: example_update_list)

the first (src="http://twitter.com/javascripts/blogger.js") needs to be replaced with the location of the .js file you just created, relative to your site.

At the end of the second javascript's src is a callback ID. This needs to be changed to whatever you renamed the function to in the .js file you created. (In my example, callback=twitterCallback2&count=5 would be remaned to callback=exampleCallback&count=5)

Your site should now still display 1 twitter. To make the site display multiple twitters, copy and paste the Callback function as many times as you need within the .js file you created, making the necessary edits I mentioned earlier.

Something to note: Though you must have the second javascript call within your site for each individual Twitter, the first:

Hey, this site cut out almost everything I wrote. I'm posting the solution on my website, at www.rewindcomic.com/twittersolution, until I can find a better post for it. Hope this helps!

Seems like you got it. Congratulations! :)

But I'm on Blogger and can't upload JS that easily, as far as I know. Too bad Twitter is ignoring this thread :(

I'm sorry you have trouble with JS man. I hope you're able to find a solution if mine doesn't help you. And yes, it's terrible that Twitter isn't paying attention. Even worse that they didn't know this themselves.

yeah, thanks for that, mdy. www.rewindcomic.com/twittersolution.txt is the correct url. i don't know why i didn't post correctly the first time.