IMVU has really messed up viewing your friends on the web site. I guess they never got it right in the first place. In the client, things aren’t so bad. But in the old days, there was a page where you could rearrange the order of your buddies, so you could show your “top 8” buddies in your Friends panel. IMVU took that page away, so the top 8 remains the same and you can’t change it.
But, they claim, you can view all your buddies on your default web_index.php page. Well, 10 at a time, that is. There is a little paging control at the top (the thing with the numbers you click) and you can kind of scroll through them, but not really.
So I decided to make a widget that could show ALL of my buddies at once as well as view their info. It’s a much better interface. I derived it from a buddy-of-buddies widget I had created long ago that allowed you discover your buddy’s buddies, and their buddies, and so on, so you could discover all kinds of new people you shared buddies with. Alas, IMVU took away the ability to discover your buddy’s buddies as a “privacy and security measure”, so I had to dispense with that. At least we still have the ability to view our own buddies, so that’s all you get with this one. Also, if your widget is publicly visible, other people will see their own buddies not yours.
Anyway, here’s the code, which is easy peasy.
<script src="https://www.triggerless.com/imvu/cheri/bud/buddylist.php"></script>
And here’s what you get:
That’s all there is to it, so if you want to drop this on your page, that’s all you need to add to the Custom HTML/CSS code. Feel free to leave now, because the rest of this post is about how I did it, and it might make your brain melt. We’re entering the nerd zone now.
The first thing you’ll notice right off the bat is that we’re assign the “src” property of the script to a .PHP file. Yes, you’d probably expect a file with the .JS extension, which is obviously JavaScript, but one very neat trick you can do is use PHP back-end code to generate dynamic JavaScript code on the fly. Because that’s how we roll in the nerd zone.
The “meat” of this code lies in one of the IMVU API’s. You’ll have to be logged into IMVU for this. Check out the JSON result that comes from the following link: https://www.imvu.com/api/service/dashboard/page.php?type=my_buddy&offset=0. If you’ve noticed it takes a couple seconds for the buddy list on web_index.php to populate, you can see why. The HTML is generated for the list from this wad of JSON, and it’s really that ugly. The “offset” query string parameter refers to the page number, starting with zero (0) for the first page. But actually it’s much worse than that. This is the worst possible implementation of JSON ever, because all the HTML is generated on the server and shoved into a single property of the JSON variable, complete with character escaping and inline JavaScript code. So to get any meaningful data from this, you have to scrape HTML to get tidbits like avatarID, avatarImage, avatarName, and so on. The only thing that makes this tolerable at all is that we are using jQuery to navigate through this horrible wad of data. (Check out the com.triggerless.BuddyList.budIterate() method in https://www.triggerless.com/imvu/cheri/bud/buddylist.php to see how you can shoehorn this blob into a jQuery object and cut through it like a hot knife through butter.)
So the steps to getting this to work are as follows:
- Substitute the guts of the #buddy_panel with an empty prototype of our widget HTML,
- Grab IMVU’s “JSON” for the current page using jQuery.ajax(),
- Parse out the actual data from the HTML in content.my_buddy.panel into a local object graph using jQuery,
- Render the new HTML for each buddy inside the prototype using jQuery,
- Check each buddy’s online status using jQuery.ajax() and update the red/green indicator
- Repeat from step 2 until all the pages of buddies have been processed.
If you’re not familiar with jQuery and its AJAX capabilities, you should definitely google and read up on it.
Step 5 is also kind of crazy. You can basically supply a list of avatar IDs, and the API https://www.imvu.com/catalog/web_status_updater.php which receives a POST request containing a JSON object in the form {ol: 1, list: olstr}, where olstr is a comma delimited list of avatar IDs, and 1 signifies “online”. It returns back an AJAX response where the property names are numeric avatar IDs (thanks guys) and the property value is always 1. Whoever programmed this should be forced to do their next project in COBOL as punishment. At least it means you can get the online statuses of 10 avatars at a time.
If it were up to me, I wish the my_buddy API could give all your buddies at once, instead of breaking them up into 10 at a time. If you have 100 buddies, this code has to make 10 round trips to the server to populate this widget. If you have a 1000 buddies, it might take forever. I tried playing around to see if this was possible and it’s not. If they had just returned “real” JSON instead of this HTML crap, this would work a whole lot smoother. But this is IMVU we’re talking about, so don’t expect this to be fixed anytime soon, because technically speaking, “It ain’t broken”.
