Blogosphere search engine Technorati helped pioneer tags (intro to Technorati tags). But they've taken their time introducing a tool for ordinary users to display tag clouds easily on their blogs. Well, we won't have to wait much longer, hopefully. UPDATE 11 April: now officially launched, see this post.
In working on a form (strictly, debugging my attempt at a form!) for New Blogger users to add the Technorati blog authority widget to their blogs with a couple of clicks, Kirk noticed that the underlying Javascript file used by Technorati for their widget had some references to tagclouds.
So, clearly, you'll soon be able to show clouds just for the top Technorati tags specific to your blog (which they're calling "Blog Top Tags"), rather than all tags used by everyone. But Technorati haven't announced this officially yet, e.g. via their blog (UPDATE 11 April: now officially launched, see this post.) Still, the ever clever Kirk has worked out from their script how you can get a tagcloud for your own blog, based on tags picked up by Technorati - now, if you want it.
For an example, mine looks like this (at the moment the live version's in my sidebar on the right):
If you too want a Technorati tag cloud for your blog (shows the top 20 tags) in advance of the official release, here's how. But note the gotchas, below.
Technorati tag cloud widget code
Use this code in your template (but change URL to your blog's URL, bearing in mind the note in my previous post that you mustn't include the "index.html" or similar part of your homepage URL):<script src="http://widgets.technorati.com/t.js" type="text/javascript"></script><a href="http://technorati.com/blogs/URL?sub=tr_tagcloud_t_ns" class="tr_tagcloud_t_js" style="color:#4261DF" >View Cloud</a>How to add Technorati tag cloud to New Blogger blogs with one click
UPDATE: Blogger keeps messing up the code in the form on publishing, so I've given up.You can add the Technorati tag cloud to your blog using the Add button which you can find (with a few other "add widget" buttons) here.
Click the Add to Blogger button below (any mistakes are mine not Kirk's, please let me know if you spot any! UPDATE: this is odd. Blogger Help say you should escape code inside the widget.content and widget.template bits. But escaping anything inside the b:includable tags seems to muck things up so the button below doesn't work. NOT escaping that makes it OK again. Hopefully this version should work now):
Step by step instructions on how to add New Blogger third party widgets to your blog: see my post on the Technorati link count widget (the steps relate to the linkcount widget launched last year, but the principles are the same). For this widget I'd recommend leaving it in your sidebar as it's for the whole blog and not just a particular post. You can see it in mine on the right.
(Created for your convenience as people can now make and share their own widgets so that bloggers can easily add third party widgets to their blog layouts with a few clicks without having to know any coding, e.g. the Bluepulse widget, on New Blogger.)
How to add Technorati tag cloud to Classic Blogger blogs
Copy/paste the following code into your Old Blogger template, wherever you want the Technorati tag cloud to appear:<script src="http://widgets.technorati.com/t.js" type="text/javascript"></script><a href="http://technorati.com/blogs/<$BlogURL$>?sub=tr_tagcloud_t_ns" class="tr_tagcloud_t_js" style="color:#4261DF" >View Cloud</a>
Gotchas, and how to style the Technorati tag cloud
UPDATE 11 April: now officially launched, see this post, but the styling's still not easy. First, the Technorati tag cloud widget isn't official yet. This is just a sneak preview based on some detective work - it's not even an official "pre-release" version. So it may not work fully yet. In particular, you'll see the formatting's not as nice as it could be, in fact it looks a bit messy, but there we are. Hopefully they'll be adding an easy way to style the tagcloud, before they officially launch this widget.UPDATE: Technorati haven't made it easier as per my suggestion below, nor have they given us the info needed to tailor things easily ourselves, but Chris Looseley has with experimentation worked out the classes Technorati have used, what they're named, how they've used them, and - most !importantly (pun intended) - how to override them so that you can tailor the look and feel of the Technorati tag cloud to tie in with your blog's individual colour scheme. Chris has kindly shared his findings in his comments to this post - please see the comments from this one onwards. Thanks Chris!
Second, the widget only displays a cloud of tags as picked up by Technorati. If Technorati fail to pick up properly-coded tags from your blog (and they often fail!), their tag cloud obviously won't reflect your blog tags fully. Their ongoing problem with tags "missing" from their tag pages has afflicted countless numbers of bloggers since Technorati introduced tags. They've still not got to the bottom of those bugs, just see e.g. this post - my latest report to them of tags not getting indexed or displayed, maybe a month or two ago, went completely unanswered, so I don't hold out much hope of their fixing this issue. I've kinda given up blogging about the issue or trying to help pinpoint the problem, they really have to get their own house in order now.
New Blogger label cloud - better alternative?
If you're on the now feature complete fancy New Blogger, formerly known as Blogger Beta, you can already display a Blogger label cloud on your blog courtesy of Kirk's own New Blogger Tag Cloud / New Blogger Label Cloud code.)Blogger labels also get picked up as "tags" on Technorati (or would, if Technorati wasn't so buggy), but you have more control over them. Plus, Kirk's cloud uses label data from Blogger's own databases, so you can rely on it accurately reflecting your Blogger labels (unlike Technorati tags). So you're probably better off using labels (unless you want e.g. to split out labels/categories from tags/keywords, which is another matter altogether).
Tags:
15 comments:
Note that some of the formatting/styling issues are due to this style rule in your blog:
.entry ul li:before, #sidebar ul ul li:before {
content: "\00BB \0020";
}
You may want to make it more specific to make it apply to only the lists you want it to, or perhaps add the following style rule to clear it out for the Blog Top Tags widget in particular:
#sidebar ul .tags ul li:before {
content: "";
}
You need to do this for this style rule on your blog (rather than the widget doing it) due to the fact that it is not possible to style (or unstyle) pseudo-elements like :before/:after (or pseudo-classes for that matter) in the inline style attributes in the widget itself.
Heh, you know how I like to slam technorati, but I should add something to this statement
Plus, Kirk's cloud uses label data from Blogger's own databases, so you can rely on it accurately reflecting your Blogger labels (unlike Technorati tags).
That's true, but not 100%. New Blogger itself is having some issues for some people with Labels that either show the incorrect count, or should be removed entirely but are still showing. It's not everyone who runs into, but enough that it's a problem. But you at least have the potential of having more control over the Blogger Labels. :-)
But right now, neither is 100% reliable for everyone. I suspect Blogger will nail down their label bug before technorati nails down their long ongoing tagging problems.
Tantek, thanks for your comment. Yes, I could certainly do what you suggest (or in the case of my template's stylesheet specifically,
#sidebar .tags li:before{content:"" !important}
#sidebar .tags ul {text-align:center !important}) -
but really the point is more that perhaps Technorati could do more at thir end to "pretty up" the results for non-techie users, rather than making people do tailored DIY fixes for their own individual templates.
Technorati have put in their own background color (rather than inheriting the sidebar's natural one) and given it its own width. Technorati are using inline styles in the content they inject.
Delicious, on the other hand, write in an actual stylesheet section to style their cloud, and override any issues the user's stylesheet might have with it. They override before statements by literally writing in
<style type='text/css'>
stylesheet stuff here
</style>
before writing out the cloud itself. They use some inline styles, but write in a stylesheet section for some of it.
Now technically, stylesheets shouldn't be in the body of the page. But Delicious's method does work, and makes their cloud more pleasing over a wide variety of templates.
Delicious use a document.write statement to writing in as the page renders. That definitely works. Technorati are having the script "inject" the content after the page loads. Could it be that there are some issues with doing stylesheet sections the Delicious tagcloud way when injecting content after pageload?
Is that why Technorati have not adopted the Delicious approach? Or, if not, what other reason is there for Technorati not taking a more userfriendly approach to tagclouds. please? Would be very interested to know.
Kirk, thanks for the clarification about the Blogger bug - alas, I share your suspicion that Blogger will sort out their bug first, given how long Technorati have had to (not) sort out their tagging bug. It would be good to hear an update from Technorati on this issue too..
How long was it before your tag cloud started displaying top tags? Thanks.
John
John, mine displayed in literally just a couple of minutes or less. Are you having issues?
I included the code in my sidebar, but no cloud. All I get is a link "View Blog Top Tags." This takes me to Technorati and my tagcloud there. Any suggestions? I have been pulling my hair out for days on this.
Doc Think, you're still on a classic template aren't you? Did you definitely use the Old Blogger code rather than the new one?
I have the same problem as Doc Think. No cloud but a link to my cloud on Technocrati.
Thanks Linda. I had a look at your blog. Tested exactly the code you used, the only difference being that I swapped my own URL for yours, and I did get the tag cloud coming up for my blog, but not for yours.
I see that your tag cloud displays fine on your blog's Technorati page, so obviously it's being generated somewhere.
I'm afraid that the inability to display it on your blog must be a Technorati issue - you've clearly implemented the code correctly. I can't suggest anything beyond your contacting Technorati support now e.g. the tag forum, it looks like others have the same problem too. Good luck!
Hi,
While I was wrestling with how to format the Technorati Tag Cloud widget to fit nicely in my blog's sidebar, I found your discussion. I eventually figured it out, so I thought I'd come back and share my CSS solution. My code may not be optimal, but it seems to work for me in IE and Firefox.
My solution
First I enclosed the Technorati code by <div class="cloud"> and </div> tags to create a unique CSS class to format. Then I added four statements to my CSS template:
1. I wanted to hide the two headings at the top, and the "powered by Technorati" image at the bottom:
.cloud h3, .cloud h4, .cloud img { display: none; }
2. I wanted to format the widget to fit in my sidebar, and look nice:
.cloud .tr-blog-top-tags
{ width: 176px!important; border: 1px solid #668899; padding: 2px; margin: 5px 0 0 0; }
I discovered that it would not resize until I included the !important directive with my desired width, but that seems to be enough to force my CSS to override whatever Technorati is generating. This was the key lesson I learned while doing this.
3. I wanted smaller text and less white space. After a lot of trial and error, I settled on this:
.cloud .tr-blog-top-tags ul li
{ margin: 2px; padding: 0px; font-size: .9em; line-height: 1.2!important;}
No doubt other combinations would achieve simlar results!
4. I wanted the link rollovers to behave like the rest of my blog:
.cloud .tr-blog-top-tags li a:hover
{border-bottom-color: #804000!important;
border-bottom-style: dotted!important;
border-bottom-width: 1px!important;
color: #804000!important; }
Again, I had to use the !important directive to get my way.
Check it out!
I hope this is helpful. You can see the result here (I hope :). My current blog is published on Squarespace, not Blogger, so there may be some differences I am not aware of. But if you find it does not work when you look at the result, let me know!
--Chris Loosley
Thanks for your comment Chris, I'm sure that will be helpful to lots of people. It's a pity the colour of Technorati's heading (Top Tags) can't be easily changed to tie in with an individual blog's style - or are you working that out too?
More Tag Cloud Formatting ...
Headings
Since you asked, I experimented with some CSS statements, and was able to format the two headings. The following suggestions would have to replace some or all of my code in item #1 in the post above, which hides the headings.
1a. I was able to format the first heading using:
.cloud h3 a { color: #804000!important; }
Note that the first (h3) heading is also a link (a) and Technorati must be generating the link color, which overrides the h3 color. That's why trying to specify the color of the heading alone does not work in this case. I also had to add the !important directive to give my specification sufficient weight to override theirs. I believe that other font properties that Technorati is not generating inline will not require the !important directive.
1b. The second (h4) heading, however, reformatted immediately with the minimal CSS:
.cloud h4 { color: #804000; }
Background color
5. I was also able adjust the tag cloud background color, using:
.cloud ul { background-color: #F0F0F0!important; }
Hope these work for you!
--Chris Loosley
And finally ...
The Tags themselves
6. I realized that since the tags are also links, they might respond to the same technique as the h3 did (#1a). And they do -- this will adjust their color:
.cloud li a { color: #668899!important; }
I've added this one to my CSS code at Web Performance Matters, which now has a fully color-coordinated cloud :)
Thanks Chris, I've updated my post to refer to your comments and also done a separate new post to bring people's attention to it. Thanks again for the hard work and for sharing!
Great Widget Thanks
Post a Comment