Pages

▼

Monday, January 08, 2007

The del.icio.us tagometer on Blogspot.com

Some days ago I read about the del.icio.us tagometer, which is basically sort of save as I had before on this blog. The tagometer, however, shows some interesting properties of the blog items, like the number of people who bookmarked the item, and what tags they used. The tagometer help does not show how it can be integrated with blogspot.com (where this blog is hosted), but with the source from 0xDECAFBAD I got it working. These blogs are not yet moved to the new blogger.com system (so, www.blogger.com, not www2.blogger.com), so the below principally applies to the older system.

First you need to adapt this blob to the <head> of the template:

<$BlogMetaData$>

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

</head>

where <$BlogMetaData$> and </head> should already be present in the template.

Further down the template, you need to add a bit in the <div class="blogPost"> section, just after the last <div class="byline"> element in your template. The bits you add use blogger variables, so make sure to get it right:

<div class="delicious-blogbadge-line" id="badge-<$BlogItemNumber$>">
  <script type="text/javascript">
    Delicious.BlogBadge.register('badge-<$BlogItemNumber$>', '<$BlogItemPermalinkURL$>', "<$BlogItemTitle$>");
  </script>
</div>

Note the quotes of the third argument. Do this properly, the quotes in the output of <$BlogItemTitle$> should be escaped, so that it does not interfere with the quotes of the register() JavaScript call. Can anyone tell me how to do that in JavaScript?

at

7 comments:

  1. Egon Willighagen3:55 PM, January 08, 2007

    Ah, just discovered this blog item. Same deal, but also contains bits on customization:

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

    ReplyDelete
  2. Anonymous8:49 PM, January 08, 2007

    blogspot seems weird when it comes to javascript

    it tells me that it won't include the script tags. I was really crushed because I thought I could not include a script I wrote. but now I found out I just have to ignore the error message.

    is there anything easy to do about that or do I just have to ignore the message every time?

    ReplyDelete
  3. Unknown9:29 PM, January 08, 2007

    thanks egon, I looked at the tagometer a while ago, but had problems installing it on blogger !
    Great!

    ReplyDelete
  4. Egon Willighagen9:40 AM, January 09, 2007

    Felix, I might have been blind, but I have not seen any error message... Moreover, I have other 3rd-party JavaScripts bits on my template...

    You are trying to include it in the template, right? Not actual blog entries, right?

    ReplyDelete
  5. Anonymous12:46 PM, January 09, 2007

    I included it in the blog entries. Is that bad programming? But I don't think I could do it any other way.

    For example here: http://chemical-quantum-images.blogspot.com/2007/01/sleeping-well.html

    I wanted to include a jmol applet that lets you look at the structure of morphine interactively in my post.

    It tells me it won't keep the script tag but I can ignore this.

    thanks for helping

    ReplyDelete
  6. Egon Willighagen1:52 PM, January 09, 2007

    Felix, you are using the new blogger system, via www2.blogger.com. I mentioned in the blog entry that I only tested it for the old system...

    I'll have a look at the new template system, and whether I can get it running with that too.

    ReplyDelete
  7. Anonymous10:35 PM, January 09, 2007

    ok, thanks. it's not a big deal though because it finally does work. At first I was pretty upset though.

    ReplyDelete