A Consuming Experience

Delicious bookmarks before domain name change:

This is an introduction and tutorial, with code and customisation howto, for the new "Tagometer"button or badge launched yesterday by social bookmarking service Del.icio.us. (While I give the full code for Blogger, I also explain how users of other blogging platforms can also customise Tagometer.)

Not only will the badge let visitors click to bookmark the webpage on Delicious - but it shows, live on the webpage displaying the badge, the number of people who've already bookmarked that webpage on Delicious, and what tags they used for the page.

For example this is what their one-line badge, designed for blog or page footers, might look like if it was displayed on the Del.icio.us homepage (which in fact it isn't!):


There's a tall narrow version designed for a sidebar too, which looks like this:


If you want to see a live example in action, check out my intro to Technorati tags.

Delicious have given the code for the badge on their Delicious Tagometer badge page, which you can copy/paste into your blog template or webpage where you want the badge to appear.

The issues

The Tagometer is an excellent and helpful idea (even though it will slow down the loading of whatever page you put it on - you have been warned!). I've included it in my own blog.

But there are just two problems with it that I can see.

First, the one-line version doesn't display properly on some blogs. The line is cut off at the right, so that the tags in particular aren't visible or even the "tags" label isn't visible - see the screenshots below (if you want to see the live posts for those, see this or this):


Second, the code given by Delicious only displays bookmark information for the current webpage.

That's fine if you're looking at a blog item page or post page. But if you're looking at the main page of a blog which has several posts on it, the one liner for post footers still shows only bookmarks info relating to the main blog home page, not the individual post, and it only lets people bookmark the main page - not the individual post page. A fact that several commenters on the Delicious blog post had already noted, and requested a solution for e.g. Jon Williams.

Fortunately, there are ways round both issues, though a bit of hacking is involved.

I'll outline the "what and how to" first, and then provide code that you can just copy/paste if you're using Blogger (including old as well as new) - plus, if you're using another platform like Wordpress or Movable Type or indeed some other blogging tool, I don't give the code but you should be able to adapt my instructions very easily for your own blogging system.

Getting the Delicious display not to be cut off

You can get the display to just take the whole width of your page but not get cut off, like this:

But to do that, you have to change the CSS.

I see that Fred has already done a howto on the Delicious blogbadge CSS. So I won't repeat it here.

This is what you do:

1. Embed the stylesheet in your own template as Fred says (for beginners, you copy/paste the code he's given in Step One in the head section of your template, just before the </head> bit will do fine).

2. Now you need to edit that code you just pasted in your template, so that in:

.delicious-blogbadge-custom {
font: 12px arial; border: 2px solid #B1B1B1; width: 190px; text-align: center; position: relative;
}

you delete the "width: 190 px;" bit, that I put in bold above, but just that bit - leave the rest alone. (I'm no CSS expert. I've picked up a tiny bit here & there, mainly I just look at stuff and guess. I suspect that instead of embedding the long blogbadge CSS wholesale into your template, if you are happy with the original look and don't want to style it further but you only want to fix the "cut-off at the right" problem, you could just override that width thing by adding a single ! important declaration in your own template. But I shall leave it to Kirk or others to explain how to do that! Hint hint?)

UPDATE (after a comment on this post): as mentioned I'm no CSS expert. I'd tried a few things before I did the above, which worked fine for me. But if the suggestion above doesn't work for you, I'd suggest trying two things:

• insert "word-wrap:break-word;" (without the quote marks) into the CSS in various places, and/or
• change "display:inline;" to "display:span" in various places - though this made the display more of a tall narrow tower block, whereas I wanted it to stretch across the page horizontally as much as possible.
  

3. Then you can use the code he's given in Step Two of his post, pasting it where you want the badge to appear e.g. post footer. The main thing to note is that in the original Delicious code, you need to change 'delicious-blogbadge-line' to 'delicious-blogbadge-custom'.

So, that should sort the "cut-off" problem. But it still doesn't deal with the multiple-post webpage issue. That's a different thing to look at.

How to customise Tagometer - manual mode

Les of Del.icio.us, in a comment on the original Delicious post, mentioned a hidden feature of Tagometer - "manual mode" - which he's used on his own Wordpress blog to point to individual posts instead of the main webpage. He said they'll be releasing more tips & tricks about this "in the coming weeks". I guess they wanted us to do some detective work of our own!

So I've done some detecting, and figured out the basics of manual mode. Manual mode is what you need if you want to be able to point to an individual post's Delicious info (rather than the blog home page's info) from a main page that displays several posts. Delicious haven't documented it yet, so I'll document what I've been able to find out.

This is what to do to use manual mode:

1. In the head section of your blog template (e.g. the just before the </head> bit ), paste this code:

<link id="delicious-blogbadge-css" href="http://images.del.icio.us/static/css/blogbadge.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
if (typeof window.Delicious == "undefined") window.Delicious = {};
Delicious.BLOGBADGE_MANUAL_MODE = true;
</script>
<script src="http://images.del.icio.us/static/js/blogbadge.js"></script>

2. Now in your template, in the section where you want the badge to appear, you need to insert some other code - different from what's on the Tagometer badge page.

The following is not the exact code you paste in, but is to help me explain the structure, so you know how to adapt it for your own blog/blogging platform:

<div class="delicious-blogbadge-line" id="badge-POSTID"><script type="text/javascript">Delicious.BlogBadge.register('badge-POSTID', 'PERMALINK', 'POSTTITLE');</script></div>

Now take a look at the bits I've put in capitals/uppercase: POSTID, PERMALINK and POSTTITLE.

What you need to do is change POSTID to whatever special code or template tag it is for your blogging platform that represents the unique ID number of the individual post that you want to point to. With "old" Blogger for instance, it's <$BlogItemNumberWhat you need to do is change POSTID to whatever special code or template tag it is for your blogging platform that represents the unique ID number of the individual post that you want to point to. With "old" Blogger for instance, it's <$BlogItemNumber$>- and I think it's "<$MTEntryID$>" for Movable Type and "<?php the_ID(); ?>" for Wordpress but don't take my word for it on those as I don't use 'em, it's just what I've heard before.

Similarly you should change PERMALINK to whatever will produce the individual post's permalink, and POSTTITLE the post's title.

(And don't forget that if you customise the CSS to improve the display e.g. as mentioned above, you should change "delicious-blogbadge-line" to "delicious-blogbadge-custom" too.)

I've found from experimenting that if you try to include the code more than once for the same post, the full Delicious info (no. of people, tags etc) only shows the last time the code is included. Earlier instances just provide the ability to bookmark the post on Delicious. Maybe someone can tweak it so each time the code shows the full works, but that won't be me!

Individual post tagometer code for Blogger

Here's code for Blogger that Blogger users can copy/paste. In the template, you delete the <p class='post-footer-line post-footer-line-3'/> line and paste the following in its place, or if you already have other code in the post-footer-line-3 section, just add the following code after the <p class='post-footer-line post-footer-line-3'> line but don't include the first and last lines as they're already there:

<p class='post-footer-line post-footer-line-3'>
<div class='delicious-blogbadge-line' expr:id='"badge-" + data:post.id'>
              <script type='text/javascript'>
                  Delicious.BlogBadge.register(&#39;badge-<data:post.id/>&#39;, '<data:post.url/>&#39;, '<data:post.title/>&#39;);
              </script>
<noscript><a expr:href='"http://del.icio.us/url/url/check?url="+data:post.url'>Del.icio.us history</a></noscript>
</div>
</p> 

I know Blogger Beta is now out of beta, but some people still haven't got the option to switch (like me!). So here's the code for "old" Blogger, I put it at the end of the post:

<div class="delicious-blogbadge-line" id="badge-<$BlogItemNumber$>"><script type="text/javascript">Delicious.BlogBadge.register('badge-<$BlogItemNumber$>', '<$BlogItemPermalinkURL$>', '<$BlogItemTitle$>');</script><noscript><a href="http://del.icio.us/url/url/check?url=<$BlogItemPermalinkURL$>">Del.icio.us history</a></noscript></div>

Noscript

As I saw a comment on the Delicious blog quite rightly pointing out that there should be a noscript option, you'll have noticed that in the Blogger code above I've included that. It'll automatically work for the individual post URL. For non-Blogger users, it should be straightforward to tweak the noscript part of the final bit of code above, just change <$BlogItemPermalinkURL$> to whatever represents the post's URL on your blogging system.

Tagometer manual mode - other uses

You don't have to just display info related to the blog the badge is on. You could, if you wanted to, display info on other blogs. Just use the same code:

<div class="delicious-blogbadge-line" id="badge-POSTID"><script type="text/javascript">Delicious.BlogBadge.register('badge-POSTID', 'PERMALINK', 'POSTTITLE');</script></div>

As long as POSTID is the same in both places, you can put any URL you like instead of PERMALINK, and any title (e.g. the name of a blog or website) instead of POSTTITLE. (Again remember to change "-line" to "-custom" if you've customised/fixed the CSS.)

For example this:

<div class="delicious-blogbadge-custom" id="badge-delicious-home"><script type="text/javascript">Delicious.BlogBadge.register('badge-delicious-home',  'http://del.icio.us/', 'del.icio.us');</script></div>

displays info on Delicious's home page -



And this displays info on Kirk's blog (home page):


and this, on his post on Blogger label clouds:


UPDATE: also to add that if you use the fab Feedburner service for your feeds, they've produced a Feedflare for Tagometer, with instructions in that post on how to turn it on (remember to Activate Feedflare too). So you might want to do that for each of your feeds if like me you offer several versions, full, excerpts and headlines. Then all subscribers to your feed will be able to see the Tagometer info and bookmark posts too.

Lots to play with... so happy tagometering!

Add this post to Del.icio.us, Digg or Furl | Email this post to a friend    | Edit | New