Just over a year ago (as my schedule seems to be) I released an update to my Twitter Statuses JavaScript Badge. Within two days I had further updates, including variables to override the name of the DIV element, hide the user’s icon, etc., ready to go, but I put it on the back burner as I was unhappy with the poor name-spacing.

About a month ago I rediscovered the postponed release, so this weekend I completely revamped my name-spacing. You know what that means? I better release v0.6 before I delay it again!

So, without further ado: Twitter Statuses JavaScript Badge v0.6

And the release notes are as follows:

Further namespacing improvements plus variables for defaults/settings. Re-implemented @reply filtering, limiting tweet count, and added changing of the element ID and disabling the icon.

This release really solidifies the base I’ve built up over the past few years and gives me something to build upon for the features I have in store.

Please let me know if you have any questions or feature requests.

Posting around here has been sporadic, at best, lately. With little to no time to author full articles this time of year, I figured I’d better improve the efficiency of my quick linking to tidbits I’ve found elsewhere online. I’ve got a ‘hyper’ section in Textpattern (my CMS of choice) for just such a task, akin to and inspired by the Daring Fireball Linked List, but it’s actually more cumbersome to post to. I usually include a quote and the title from the target site, it’s URL, switch it to the ‘hyper’ section, add some tags and a little commentary. A bookmarklet that could pull in much of that data for me to just tweak and comment could drastically reduce the amount of tab switching and cutting & pasting required.

Fortunately, just such a bookmarklet exists. It pulls your selection into a new post body, sets the post title to the page title, and allows you to customize what section & category it gets posted in:

javascript:
var d=document,
w=window,
e=w.getSelection,
k=d.getSelection,
x=d.selection,
s=(e?e():(k)?k():(x?x.createRange().text:0)),
f='http://PathToYourTXPFolder/index.php',
l=d.location,
e=encodeURIComponent,
p='?bm=1&Section=SectionName&from_view=1&Category1=CategoryName&Title='+e(d.title)+'&Body='+e(s),
u=f+p;
a=function(){
  if(!w.open(u,'t','toolbar=0,resizable=0,status=1,width=800,height=800'))
    l.href=u;
}
;
if(/Firefox/.test(navigator.userAgent))
  setTimeout(a,0);
else
  a();
void(0)

However, I require the target URL in a custom field in order to automatically build the link to the target site. It was designed to do that, but no example was given. You merely need to insert the following (replacing ‘custom_1’ with the number of the appropriate custom field) after Category1 and before Title¹:

custom_1='+e(l.href)+'&

But there’s one more thing I found necessary to tweak: the size of the pop-up window. It was a bit too narrow for my install, so I increased the width to ‘960’, but more importantly, I made it scrollable by adding scrollable=1 to the call to w.open().

So, with the my aforementioned modifications, you get something like this (still requiring replacement of PathToYourTXPFolder, SectionName, CategoryName, and custom_1 with your particulars, of course):

javascript:
var d=document,
w=window,
e=w.getSelection,
k=d.getSelection,
x=d.selection,
s=(e?e():(k)?k():(x?x.createRange().text:0)),
f='http://PathToYourTXPFolder/index.php',
l=d.location,
e=encodeURIComponent,
p='?bm=1&Section=SectionName&from_view=1&Category1=CategoryName&custom_1='+e(l.href)+'&Title='+e(d.title)+'&Body='+e(s),
u=f+p;
a=function(){
  if(!w.open(u,'t','toolbar=0,resizable=0,scrollable=1,status=1,width=960,height=800'))
    l.href=u;
}
;
if(/Firefox/.test(navigator.userAgent))
  setTimeout(a,0);
else
  a();
void(0)

What now? Run it through something like Bookmarklet Builder to name it and further minify it, then merely drag it to your bookmarks bar. I ended up whipping up two: one for use on this site and one for use on Slotted Pig.

¹ You can obviously move it around elsewhere in the query if you’re careful with the quoting.

I’ve been getting an increasing number of questions about my JavaScript Twitter Statuses Badge as of late and this past week the most prominent questions have been regarding using multiple Twitter badges on the same page. Here’s an except from one of my answers via email:

As it stands, due to the way the Twitter API works, it will only display one per page. That said, it is definitely possible to make it work with the following hacks:

1. In the mtaTwitterStatuses.js file, you can duplicate the mtaTwitterCallback() function and name it something like mtaTwitterCallback2().

2. Also in mtaTwitterStatuses.js, you’d then have to modify the last line of your new function, mtaTwitterCallback2(), to replace document.getElementById('mtaTwitter').innerHTML with document.getElementById('mtaTwitter2').innerHTML (note the change to ‘mtaTwitter2’.

3. Then, in your HTML, you’d want to put <div id="mtaTwitter"></div> where you want your first badge, <div id="mtaTwitter2"></div> (note the same change to “mtaTwitter2”) where you want your second badge.

4. Also in your HTML, you’d want to put the following just before the </body> tag:

<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/morgant.json?callback=mtaTwitterCallback&amp;count=1"></script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/slottedpiginfo.json?callback=mtaTwitterCallback2&amp;count=1"></script>

Note the “mtaTwitterCallback” & “mtaTwitterCallback2” in the above, in addition to the two different twitter account names (“morgant” & “slottedpiginfo”, in this case).

I’m currently considering my options for implementing better support for multiple badges on the same page for a future release, but I hope this helps in the meantime.

I’ve got a new version of my JavaScript Twitter Statuses Badge out for you all.

This version, 0.4, includes some minor modifications to the regular expression for @replies to fix some formatting & issues when they were abutting punctuation.

I’ve also further reduced the amount of HTML you need to include down to a single DIV element (plus the JavaScript include & call, naturally). You’ll have to replace the HTML and probably tweak your CSS (only slightly) to handle the changes, but I don’t intend to change the HTML again for quite some time.

As always, the latest version can be downloaded from the development page.

Update: I’ve released version 0.4.1 with a README file containing an overview, basic instructions, and change log. There are no other changes, so if you don’t need the README, you don’t have to worry about updating.

First I wait nearly two years for an update and then only a matter of days. I had actually intended to release this update nearly immediately after the last update, but twitter was having some issues when I was attempting to complete my testing. This weekend’s testing was successful, so here’s the latest update to my Twitter Statuses Badge.

Version 0.3 now includes clickable @replies and links. Many thanks to René van Meurs for the regular expressions.

As always, the latest version can be downloaded from the development page.

I’ve updated my Twitter Statuses Badge to include Jon Aquino’s IE date parse fix, some function name changes to reduce the possibility of namespace clashes, and tweaked the CSS a tad.

It’s a tiny update to a nearly two year old hack, but hopefully it’s still helpful to many of you. Version 0.2 is now available from the development page.