05401, 05403, 05446, 05462, 05482, 05673, 05701, 37signals, 40hz, 2008, 2010, aardman animations, ac propulsion, adium, ads, aim, airport, al franken, algorithm, amazon, animation, apache, apple, applescript, architecture, archive, art, article id, asterisk, at&t, atom, automobile, away message, backpack, badge, barack obama, basecamp, bash, beos, bernie sanders, bicycling, billboard, blacklisting, blog, blogroll, blogzot, bluetooth, blunt, bluray, book, bookmarklet, bot-net, brad bird, browser, btv, bug, build, bungie, bunny, burlington, call of duty, camera, camping, can-spam, cars, centralized, channel camp, chocolate, classic, classic mac workshop, clothing, cms, collection, color classic, comedy, comedy central, comic, computer, concert, conversion, cookbook, corrosion, cowards way out, crack, crashing, creature comforts, criticism, daring fireball, darwin, dashboard, david byrne, dcl, death, delicious, derbi, design, development, digg, dilemma, discussion, disney, domain, download, drivers, dvd, dynetk, e-mail, e3, easter, ebox, eckhart, eckhart köppen, eckhart koppen, eddie izzard, edward gorey, einstein, election, electric motorcycle, electric motorsport, electric vehicle, electronics research laboratory, elmo, emate, emulator, encryption, environment, environmental impact, erin mckeown, escale, exploit, express 530t, expressionengine, feature, feed, feedburner, filtering, finance, firmware, fixdavsvn, flickr, flynn center, focus, font, food, ford, for sale, free, freeverse, freezing, fresh air, frog design, front row, fusion, games, gears of war, geek, geek technique, geocities, gmail, google, gpr, grammar, grant hutchinson, graylisting, gtd, hack, haiku, halo, hayao miyazaki, health, higher ground, highrise, hiking, hiroshi noguchi, history, hope, hotspot, html, html5, hulu, humor, hybrid, hybrid technologies, hypercard, intel, internet, interview, ipad, iphone, ipod touch, isao takahata, itunes, jabber, japan, javascript, jetblue, jfk, john gruber, john oliver, jon stewart, kid koala, launchd, layover, leopard, liberal, long trail, lorem ipsum, mac, macbook pro, macworld, maczot, magazine, mail, maine, makkintosshu, marathon, marketing, mark hoekstra, matthias melcher, media, mesagepad, messagepad, microbus, microsoft, mobileme, model s, modern warfare, money, monitoring, moon river, motorola, movie, movies, mrtg, multitasking, music, mwsf07, mystic, nascar, ncx, nda, netflix, network, newton, newton os, newton press, newtontalk, newton x press, nick park, nitch, npr, on point, openpbx, open source, operation ivy, optimization, organic, os 8, os9, osheaga, osx, os x, owc, package, palm, password, paul guyot, pbx, pdf, pesticides, photography, pico card, pilot, pixar, playstation, plist, plug-in, pod jungle, politics, productivity, ps3, psp, pump-and-dump, quicksilver, racism, rack-n-roll, radio, ratatouille, rebooting, recycling, remake, required reading, restoration, retrochallenge, review, roadster, room without a window, rss, scion, screencast, script, search, security, server, sesame street, seven days, shame, shelburne, shelburne museum, shirt, shoppinging cart, simon bell, small dog electronics, snow leopard, social, software, solution, sony, spam, spam haus, startup item, statistics, status, stefano paris, stephen colbert, steve jobs, steven colbert, steven frank, studio 360, studio ghibli, subethaedit, subversion, swiss, sync, syndication, sysmon, tablet, tags, tax, technorati, ted talk, television, terry gross, tesla motors, textpattern, the colbert report, the daily show, the flaming lips, the gashleycrumb tinies, the radiator, the world, times argus, titles, tkip, todd kollins, tom gage, trailer, travel, tree, trends, troubleshooting, twitter, typography, tzero, unicel, unna, update, upgrade, url title, user interface, v710, venue, verizon wireless, vermont, victor rehorst, video, virtualization, vmware, volkswagen, volvo 122, vpr, vw, wait wait don't tell me, wall-e, wallace & gromit, wavelan, web, web 2.0, webkit, web site, whitepaper, wifi, wikipedia, windows, winter warm-up, wireless, wpa, writing, wwdc, wwnc, xbox 360, xbox live, xhtml, yahoo, ze frank, zero emission
Articles Tagged "badge":
Multiple Twitter Statuses Badges ¬
2009-04-06
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 likemtaTwitterCallback2().2. Also in mtaTwitterStatuses.js, you’d then have to modify the last line of your new function,
mtaTwitterCallback2(), to replacedocument.getElementById('mtaTwitter').innerHTMLwithdocument.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&count=1"></script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/slottedpiginfo.json?callback=mtaTwitterCallback2&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.
Twitter Statuses Badge v0.4 ¬
2009-02-12
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.
Another Twitter Statuses Badge Update ¬
2009-01-12
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.
Updated Twitter Statuses Badge ¬
2009-01-07
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.
Twitter Statuses Badge ¬
2007-05-07
A couple weeks ago, my friend Jimmy saw a modification of the Twitter JavaScript badge that I had whipped up for the coming site redesign and liked what he saw. He decided to integrate it into his site, but wanted a few more features: most notably, the ability to display more than once recent tweet.
So last week I took an hour to clean it up and improve it. The end result is as follows:
The main features of this modification are:
- The twitterer’s icon, which links to their twitter page.
- One or more of the twitterer’s recent tweets.
- Tweet date-stamp that links to that tweet’s permalink.
- More CSS hooks for more advanced styling, including: ‘first’, ‘last’, ‘even’, and ‘odd’ classes on the list item tags.
You can download following package which contains a stand-alone copy of the JavaScript, plus an example theme (CSS) for it that mimics much of the Twitter look (as seen above):
Please note that the included example CSS stylesheet does not render exactly as intended in Firefox and has not been tested in Internet Explorer for Windows. It was hacked together pretty quickly and tested in Safari, but does fail fairly gracefully in IE for Mac1. I’ll leave those fixes as an exercise for the reader.
I’d highly suggest also taking a peek at Jon Aquino’s modifications as well, because he’s got a fix for date parsing in IE (it doesn’t appear to work in IE for the Mac, though) and provides a similar hack with no additional CSS hooks and such.
I do intend to release additional features that I’m currently developing for my site so check the development page for the latest release.
I hope you all find it useful! I also am interested to hear if anyone wants it wrapped into a Textpattern plug-in.
Update: There were some errors in the gzipped-tarball that have been fixed and I now also provide a zip archive alternative.
Another Update: Version 0.2 0.3 0.4 has been released and is available from the development page.
1 If I didn’t personally have a collection of Classic Macs, I probably wouldn’t even bother testing it anymore.
