Dec 20 2006

tagometer: badges badges badges badges BOOKMARKS BOOKMARKS

Being a blogger, one of my long-standing wishlist items for del.icio.us has been to find some way to get more of what’s going on here to show up out there. Instead of just simple links, I’ve wanted to get a bit of peek through the keyhole to see just what “save to del.icio.us” means and what others are doing with it on my pages. So, I’m happy to cross this item off my list and introduce a new version of the usual social bookmarking button that we’re dubbing the ‘Tagometer.’

what’s a tagometer?


These are some snapshots of what the Tagometer looks like. Like simpler static widgets, it includes a button inviting readers to bookmark your page on del.icio.us. The Tagometer opens things up from there - using a JSON data feed from del.icio.us, the Tagometer includes an up-to-date count of others who’ve already bookmarked the page, as well as a fresh list of the top tags applied.

Visitors can click on the count to see more detail on who bookmarked your page, when they did it, and how they tagged it. The list of tags shows visitors why your page is interesting, and clicking on a tag takes them to similar sites on del.icio.us.

how do i get one?

At the time of this launch, you’ve got an out-of-box choice of two CSS-based presentations shown in screenshot form above:

  1. A rectangular badge, suitable for sidebars and inset information displays.
  2. A single line, intended for use at the end of stories and blog entries.

Whichever one you choose, you can copy our example code for either of these and just paste it into your pages or templates. The Tagometer will automatically populate itself from the location and title it finds on the page where you’ve given it a home.

If you’ve got a bit more advanced DOM scripting, JSON, and CSS chops - try taking a look under the hood. The folks over at FeedBurner, for instance, have already built a new FeedFlare unit that incorporates the JSON feed data. We’re trying out a few new things here that should make customizing the Tagometer easier for web developers, while at the same time working to maintain a simple copy-and-paste option.

Try it out, let us know what you think, and tell us if you’ve got any ideas on improving this new tool.

Les Orchard · deusx Tags: blog-bling features bookmark this

73 Comments

  • Jon Williams  |  Dec 20 2006 at 10:14 pm

    Would it be possible to get a version of this that exports itself as a function that accepts a url as a parameter? I’d like to be able to have this point to permalinks in multi-post displays.

  • Nick  |  Dec 20 2006 at 10:53 pm

    Jon,

    Take a close look at the source of Les’ blog, you can see what he’s done to do exactly what you’ve asked for. We’ll have a blog post in the future for tagometer ‘tips and tricks’ but in the meantime I think you can probably figure out what’s going on from looking at his blog. http://decafbad.com/blog

    Nick

  • Ilyia  |  Dec 20 2006 at 10:53 pm

    How about a Firefox extension that shows the same info about the currently viewed page?

  • EgOiStE  |  Dec 21 2006 at 12:21 am

    This is great but I have found them to be “clutter” now that people have created browser add-ons to tag a page for del.icio.us. I removed all my social tagging links on my blog template for this reason. I figured it was much more economical to clutter up my own toolbars than to add social links on every single post. I guess what this does that perhaps the firefox addon that I use doesnt is have it tagged for you, although the add-on I use does have suggested tags (del.icio.us 1.2)

  • Search Engines WEB  |  Dec 21 2006 at 1:02 am

    FANTASTIC & LONG OVERDUE!

    Just one minor suggestions:

    1- would like to customize the colors with URL parameters - so as to blend in the the color theme of given site :-)

  • MySchizoBuddy  |  Dec 21 2006 at 1:31 am

    Option to not show the tags.

    Plus colors so I can blend the badge with my site

  • K  |  Dec 21 2006 at 1:49 am

    For color hacking, lookie at http://images.del.icio.us/static/css/blogbadge.css, and then override styles with !important declarations in your site CSS. I have a tutorial for doing the same trick with Pandora’s sideboxes at kradeleet.com.

  • Andy  |  Dec 21 2006 at 5:47 am

    We’ve just added it to the bottom of one of our sites. Looks nice in the footer.

  • Marcel de Ruiter  |  Dec 21 2006 at 5:50 am

    How can I be that the Tagometer shows “no saves” by other people when I know that it should?

  • Derek Anderson  |  Dec 21 2006 at 7:07 am

    This is great!

    Now how do I get it to point to individual posts instead of the entire page?

    I have the widget in each post but only the top post shows any “saved by” information. They all point to saving the site not the post.

    Tried the feedburner feedflare…that doesn’t even appear. (and doesn’t look as cool either)

  • Benny_A  |  Dec 21 2006 at 9:54 am

    This is great! Now how do I get it to point to individual posts instead of the entire page? I have the widget in each post but only the top post shows any “saved by” information. They all point to saving the site not the post. Tried the feedburner feedflare…that doesn’t even appear. (and doesn’t look as cool either)

    I’m having the same problem as derek. Is this a typepad and blogger specific problem? I figured it wouldn’t work at all if the sites didn’t allow it…

  • gerhardb  |  Dec 21 2006 at 10:50 am

    cool tool but yet another bad example for bad internationalization.

    Thats the way an international service is launching services.

    Hey? is it so much work to have an tag within the js-script tag to identify in which language I would like to see the tagometer?

    A lot of people are talking about “people” in terms of all this so called cool web 2.0 services.

    Yep - this is good example how companies really focus on people.

  • Shelby  |  Dec 21 2006 at 12:49 pm

    Just what I need to stoke my small small ego.

    Too bad the page I’m now using it on is only bookmarked by me.

    *sob*

  • Fred  |  Dec 21 2006 at 1:29 pm

    I’ve posted a guide to customizing the look and feel of the Tagometer on my blog:

    http://chimprawk.blogspot.com/2006/12/customizing-delicious-tagometer-in-two.html

    Nice work del!

  • Jim Kingdon  |  Dec 21 2006 at 2:04 pm

    I know it isn’t super-trendy to worry about this, but I insist on having something (suitably degraded) work without javascript. What I came up with can be seen at via view-source on http://jkingdon2000.blogspot.com/ . I’d paste it here but that doesn’t seem to work - so copy-paste the noscript tag and its contents from there.

    You’ll need to look up the right value to put after “url” at http://del.icio.us/url/ .

  • Oguz Karadeniz  |  Dec 21 2006 at 3:21 pm

    I have created a greasemonkey script based on the new tagometer code, which shows the tagometer at the right bottom of the screen for the pages you visit.

    http://members.chello.nl/o.karadeniz/20061221.html

  • Stefan  |  Dec 21 2006 at 3:40 pm

    Am I really the only Safari user whose notification bar reenables itself zombielike upon every reload even though I pressed the hide button ? It works fine in Firefox and Camino - maybe some kind of javascript/cookie issue ?

  • egillie  |  Dec 21 2006 at 4:56 pm

    How do you organize your bookmarks? It would be nice not to have to scroll through the pages to find one thing.

  • l.m.orchard  |  Dec 21 2006 at 8:26 pm

    Jim Kingdon: “I know it isn’t super-trendy to worry about this, but I insist on having something (suitably degraded) work without javascript.”

    The noscript tag is a good tip, and we should consider including it in the example code snippets. Also, for what it’s worth, I expect that the JSON feed used by the JavaScript could also be used by blog software like WordPress to dynamically generate an HTML version of the same information. Movable Type could do it, too, but the data would get stale on statically generated pages.

  • l.m.orchard  |  Dec 21 2006 at 8:57 pm

    For those of you who want to use multiple Tagometers on one page: Notice that there are two Tagometer instances on the help page - one points at del.icio.us and the other at Yahoo! There’s another way to use the Tagometer hidden in the source code of that page.

    http://del.icio.us/help/tagometer

    You can also find me using this “manual mode” technique on my own WordPress blog:

    http://decafbad.com/

    In the coming weeks, we’re hoping to release more tips and tricks about the Tagometer - but for now, there are a few “hidden features” to be found under the hood.

  • James  |  Dec 22 2006 at 3:41 am

    I love it, and I’ve implemented it across ~1,700 pages of my site tonight. Great work.

  • Ben  |  Dec 22 2006 at 2:14 pm

    Could the script normalise the URL by removing any anchor? Otherwise, under Wordpress the “Read More” link points to a URL ending with an anchor, which del.icio.us considers distinct from the permalink. i.e. ‘http://example.com/foo/#anchor‘ should be normalised to ‘http://example.com/foo/‘ before being hashed or embedded in the link to del.icio.us. :-)

  • l.m.orchard  |  Dec 22 2006 at 4:10 pm

    Ben: Alas, on some blogs and sites the anchor hash is significant in the URL. There’s an as-yet-undocumented “manual mode” to the tagometer where you can specify any arbitrary URL and override the “magical” behavior of the one-line include. I’ve got a WordPress blog myself, and use this mode to include multiple instances of the tagometer using my permalinks and titles for index and archive pages.

  • Elisabeth  |  Dec 22 2006 at 4:15 pm

    Hi there

    I think this is a great idea and want to be able to put a tagometer at the bottom of each of my posts. I’ve tried copying and pasting the various versions of the required across to existing posts but blogger reports an error and won’t let me publish. Have you any idea why this is happening?

    Cheers

    Elisabeth

  • l.m.orchard  |  Dec 22 2006 at 4:28 pm

    For some hints on using the tagometer in a WordPress blog multiple times on a single page, check out this blog post: http://ycoolthing.com/archives/232/adding-delicious-to-wordpress-blogs

  • Improbulus  |  Dec 22 2006 at 7:15 pm

    I’ve figured out and documented the customisation in manual mode (the basics at least), plus whipped up copy/paste code for both new and old Blogger so that the tagometer points to the individual post permalink rather than the main blog page (i.e. the multiple times per webpage thang).

    The deconstruction in my post should however assist non-Blogger users too.

    And I’ve also included noscript stuff.

    See full details at http://consumingexperience.blogspot.com/2006/12/delicious-tagometer-howto-manual-mode.html

    Thanks for using manual mode in your blog Les, dissecting that helped a lot!

  • shadiw  |  Dec 22 2006 at 9:04 pm

    Ah. Are you telling something about css feed. It seems convenient to help you reading news in delicious.

  • soxiam  |  Dec 22 2006 at 9:07 pm

    This is really great. My only request is that there be a way to display only my own tags and not everyone else’s (via user id variable in the javascript perhaps?)

  • redgold66  |  Dec 23 2006 at 4:54 am

    whenever I enter edit mode of a bookmark I made, to read the extensive notes I originally posted, the end portions of the text are never visible and lost. Even though before entering the edit mode the notes are visible on the delicious webpage, but the moment I enter the edit mode the last 3 to 4 lines of the notes are lost. I have experienced this many times and am losing valuable information due to this strange behavior of the bookmarks. Please help. Thanks

  • Viki  |  Dec 24 2006 at 12:39 am

    I must be the only idiot who uses msn spaces, which has got to be the most unuserfriendly blog site. However, now that I am there, I am battling onhow to get this tagometer either in the sidebars or in a post . Can someone please help me ?

  • garcio  |  Dec 26 2006 at 10:33 pm

    Viki,

    I think you are not the only one. Although msn space is not easy to use, it’s there and will exsits for a long time, I think.

  • snunsan  |  Dec 27 2006 at 1:09 pm

    I have one doubt… Why am I not getting the last X (ie. 10) items from the RSS feed for my tag Y? I mean, I read the feed “http://del.icio.us/rss/snunsan/Y“, but the content seems quasi-randomly, and sometimes I’m receiving only one item.

    What are the rules for del.icio.us to generate the RSS view of a user’s tag?

    Thank you

  • Online-TV  |  Dec 28 2006 at 2:13 pm

    Nice job, but how do I get rss feeds from a url?

  • samlowry  |  Dec 29 2006 at 11:07 pm

    Hello!

    Few days ago we had released interesting extensions for Firefox - “Tags Everywhere” which shows Del.icio.us tags at top and some other parts of page of each site. Pls, check it out and, maybe, feedback and support me.

  • kicheto  |  Dec 30 2006 at 2:11 pm

    There is a WordPress Plugin for adding the tagometer badge:

    http://www.ivanuzunov.net/delicious-tagometer-badge-wp-plugin/

  • katie  |  Dec 31 2006 at 12:01 am

    I can’t figure out how to create a del.icio.us tag. oy, I feel so stupid. spill, please.

  • Dan  |  Jan 3 2007 at 3:46 pm

    New web tool I stumbled upon that will take your delicious bookmarks/tags and build an advanced Google Custom search for you:

    http://basundi.com:8000/login.html

    Very cool. Done by a Google insider.

  • twitch  |  Jan 4 2007 at 3:30 pm

    why is no one posting about the title? so funny!

  • hypotheek bkr  |  Jan 4 2007 at 4:42 pm

    I know blinklist.com, who know more site for bookmarks?

    kind regards

  • Tarakananda  |  Jan 6 2007 at 3:51 pm

    Great addition! The best part of it is that the code can be placed in the common side-link include file on our site, and it will cascade to every single page which contains it (over 500!) without me having to place it on every page, and it will refer to that particular page without having to code it for that page.

    The problem is that the currently available options are too wide for our 150 pixel side-bar. We need a “narrow” version which will fit into this area. Any suggestions that do not require work for a non-techy?

    Also, is there a simple “add to del.icio.us” button and code (without the tag and saved by info) which will cascade as mentioned above?

  • Danny  |  Jan 7 2007 at 9:37 am

    Running the script here (http://dannyayers.com/2006/12/29/del) on a series of URIs got me the 999 error (no sure how many had run). There’s a 2 second pause between calls, I thought that would be polite enough. Still throttled now, maybe 10 mins later. Any suggestions for what would prevent throttling? How long it needs to recover?

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . paragraph. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

    [that bit originially posted as a comment over at Les Orchard’s, next bit is new]

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . paragraph. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

    Note that the idea is for the script to be run only very occasionally, with the tag links visible on each post without having to call the del.icio.us server for every visit, i.e. a net reduction in bandwidth demands. Also, because of the way the data will be semantically associated with the original posts, overall there will be *more* linkage to del.icio.us.

  • fALTY  |  Jan 8 2007 at 3:41 pm

    #offtopic http://freshdelicious.googlepages.com/ to check your del.icio.us bookmarks and delete the wrong links

  • maletin  |  Jan 10 2007 at 5:15 am

    at different pages, i need different tags.

    example: i use the bundles “friends” and “public”.

    on my public website, i want to publisch only the tag-cloud with the tags, that are present in the bundle “public”.

    at an other website, i want a tagometer with tags, that are present at “friends”.

  • abc123  |  Jan 11 2007 at 3:50 am

    How do I get this annoying banner from displaying in my account?

  • abc123  |  Jan 11 2007 at 10:06 pm

    As usual, 10 for 10, no answer ever comes back.

  • keith_is_here_2004  |  Jan 17 2007 at 9:48 am

    del.icio.us tagging seems to be broken, as shown in this screen shot:

    http://img411.imageshack.us/img411/4803/delicioustaggingbrokenwn0.png

    Notice that all 8 links are NOT showing.

  • Bellavision  |  Jan 17 2007 at 3:33 pm

    Can this be added a widget for WP?

  • Zvika  |  Jan 17 2007 at 3:59 pm

    Any chance of getting “bundles of bundles”? Example: Got a bundle named Microsoft, and there a (sub)bundle named WINDOWS and another one: OFFICE, each one with its tags.

    Second request: have a tag belong to more than 1 bundle ?

    Example: Got a tag named WINDOWS-security, bundled both in the SECURITY bundle and in the WINDOWS bundle.

    Best,

    /Zvika

  • the web  |  Jan 18 2007 at 9:58 am

    what is wrong with del.icio.us tagging?

    keith_is_here_2004, thanks for posting a screenshot, i’m having the exact same problem! very frustrating!

  • jim.mcfarland  |  Jan 18 2007 at 11:39 am

    I have the tagging problem, too. I logged out and the tags on my page are in sync fine when I am not logged into del.icio.us. I logged back in and they are all screwed up. Clicking on tags gives an out of date list of bookmarks, including bookmarks which had been deleted.

  • naum  |  Jan 18 2007 at 12:46 pm

    BUG ALERT: Bookmarks arn’t showing up.

    The last several items I tagged with “blog” (under /naum/blog) are not showing. They do show in the global bookmark list but not under the blog tag…

  • Swish7  |  Jan 18 2007 at 3:47 pm

    none of my bookmarks are showing up. My tags list the proper number of bookmarks. However, click on the tag, and “not items” display.

    My bookmarks only appear in the global list, which is completely useless.

    I’ve searched through the FAQs and there is nothing about this.

  • jim.mcfarland  |  Jan 19 2007 at 8:20 am

    Since it doesn’t appear that support replies to queries, is there anyway to know if the folks at del.icio.us are aware of the issue and working on resolving it?

    It is a bit ridiculous to have to be logged in to add bookmarks and tags, and they to have to log out to use the tags you have put in.

    I am trying Yahoo!’s My Web, but it is lacking in features. Is there any other option besides del.icio.us?

    Jim

  • Mike  |  Jan 19 2007 at 1:18 pm

    Tag pages are broken. They haven’t been updated in days. Descriptions I modify are regularly lost. Apostrophes are converted to HTML character symbols.

    del.icio.us is broken. I will look for alternatives.

  • BillyG  |  Jan 20 2007 at 7:26 am

    IRT the annoying notification banner on my delicious page that notifies me of the badges feature, how do I make it go away?

  • Bert  |  Jan 21 2007 at 12:23 pm

    A while ago, I believe, I saw a plugin for Firefox that would open the Delicious bookmarks in a panel on the left hand side of within the browser window. One could have on the view the list of bundled and tagged bookmarks on one side of the browser and on the other side the actual site(s) one wanted to see.

    I can’t find this nice handy little tool. any ideas where can I find it?

  • Evgeniy  |  Jan 22 2007 at 3:22 pm

    @Bert

    Laughing? Install any del.icio.us plugin (https://addons.mozilla.org/search.php?q=del.icio.us&type=E&app=firefox) and you’ll get what you’re asking.

  • RacerX128  |  Jan 26 2007 at 4:10 am

    Does anyone remember when delicious was a cool website to find interesting links to stuff on the net… now it seems that it just a smut filled swamp where every other link is some nasty porn… I have really lost respect for this website. C’mon guys try popurls, it gives you the interesting stuff… without the endless smut.

  • Les Cousins  |  Jan 26 2007 at 6:24 pm

    I am old and find it hard to understand.

  • Jury  |  Jan 29 2007 at 9:19 am

    Clean up your comments! It’s a nightmare to read this garbage! It should not happen at such a site that spammers are allowed to join!!!

  • Brahmalila  |  Feb 1 2007 at 3:19 am

    Great application.

    A few things which would make a big difference:

    Bookmark pages really need to be made easier to read by putting them in a tabular format.

    A Default table set up (configurable by the user) for bookmarks could be this:

    1) Each bookmark in 1 fat row, some white space above and below for readability.

    2) Column 1 shows title, column 2 contains links ‘edit’, ‘delete’, a toggle ‘make public/private’, and number of people who’ve saved this link.

    3) Each of these links also has a tick box next to it, to enables batch operations via links (at the top?) ‘delete ticked’ ‘edit ticked’ ‘make ticked private’ ‘make ticked public’, ‘tick all’ ‘clear all’

    4) ‘Edit ticked’ should you to add or remove tags to the selected bookmarks.

    5) Two links at the start of the row to toggle shown/hide my comments and others’ comments.

    6) showing 10, 25, 50, 100 items per page should have a showing ‘all’ option

    I’m sure this is all available in Browser extensions, but it seems time for the site to get a 2.0 makeover in any case, no?

  • just fun 4 u  |  Feb 1 2007 at 4:41 am

    Are you Yahoo oriented service?

  • joelanders  |  Feb 1 2007 at 11:45 am

    The images of the numbers are JPEGs?

    Why not a better looking PNG or GIF?

  • egor  |  Feb 2 2007 at 11:13 am

    versions of the badge in different languages would be really nice. it’s not that much work as translating the whole website will be.

  • LEO  |  Feb 4 2007 at 12:35 pm

    We, at REVO Solutions have a reputation for being the most dynamic, affordable and innovative web design company in India and the overseas. Our Design, Development, Hosting and Marketing teams work closely together and integrate their creativity and technical know-how to create winning web sites for you. We, at REVO Solutions, are equipped with the right skills and technology to create your web site into a visually appealing and informative online presence and a marketing tool that will effectively drive traffic and represent your business image.

  • pcx99  |  Feb 7 2007 at 1:56 am

    The thin badge is nice, but really both badges take up FAR too much realestate. You need a compact version equivelant in size, if not smaller, to the thin badge’s first box “bookmark this on del.icio.us”. The icon, “tagged by x people” will be enough. People clicking on it will soon learn it acts like a tag button.

  • Improper  |  Feb 7 2007 at 2:08 pm

    Wish you could make it to where we free wordpress users could take advantage of the badge code. Free wordpress doesn’t allow javascript code. Drats.

  • ThemeBot  |  Feb 8 2007 at 10:24 pm

    I’d like to be able to specify the URL. Is this possible?

  • ga  |  Feb 9 2007 at 4:54 pm

    what creepy comment spam you guys are getting!

  • ga  |  Feb 9 2007 at 4:57 pm

    Aw shit! I discover too late that you coded this site to POST e-maill addresses! You ar enot supposed to do that! Can I delete my comment now? Please?

    Crap. I understand the need to screen spammers (something you are not doing very well, obviously). But, you know that spammers harvest e-mails from the web!

    Double aw shit!

  • Raulken  |  Feb 10 2007 at 1:16 pm

    Can I customize language?

  • ga  |  Feb 11 2007 at 2:27 pm

    Yup. Got my first e-mail SPAM at the e-mail address I uses here which YOU POSTED! Thanks for that you…. Don’t you get it! We can use technology to stop spammers. Fuck!

  • Dictionary  |  Feb 14 2007 at 11:50 pm

    Clean up your comments! It’s a nightmare to read this garbage! It should not happen at such a site that spammers are allowed to join!!!

Recent comments

Feeds

Who are we?

Posts by tag

Posts by month