Please note that my blog has changed addresses! It's all new and improved. Hence this old friend of mine had to be left alone. You can visit me at
The Last Word (beta). It's all warmed up for you! :)
Categories has really been one of the biggest low points of Blogger blogs, and even after so much time, it seems as though their API will prevent them adding categories anywhere in the near future without making big changes to almost everything to do with Blogger. Not to mention added load server side, having to bear the brunt of millions of blog (some of which have been abandoned, not deleted), and then holding posts natively categorised,
per blog. Sheesh! It hurts just by the sound of it.
So, seeing that, there have been many categories hacks from all over the place. Many of them varying in degrees of complexity (either in code or implementation). I'll agree I seem to have taken the easiest way out, but hey! If it works! :) So I shall now unveil my Blogger Categories Index. I call it ABCI (Asynchronous/Aditya's Blogger Categories Index). You can see it in full glory on the right in the sidebar. Here are the codes if you wish to use them on your blog:
Implementation
Insert this external script from delicious in your <head> area. It calls all your tags, sorted by the number of posts in them from delicious:
<script src="http://del.icio.us/feeds/json/tags/username?sort=freq" type="text/javascript"></script>
Next is the big ballyhoo itself! This bunch of code should be put in a seperate set of <script></script> tags, so that if something goes wrong, it doesn't interfere with the other functions on the page:
/* `````````````` TAGS DISPLAYING `````````````````` */
/* <license rdf:resource="http://creativecommons.org/licenses/by-nc-sa/2.5/" /> */
/* Asynchronous/Aditya's Blogger Categories Index by Aditya Mukherjee (www.aditya-mukherjee.com) */
var tagn="";
var user="";
function tags_s(tagname){
tagn=tagname;
var tag=document.createElement('script');
var url="http://del.icio.us/feeds/json/"+user+"/"+tagname+"?callback=write_tags&count=100";
tag.src=url;
tag.type="text/javascript";
tag.id = "app-tags";
document.getElementsByTagName('head')[0].appendChild(tag);
}
function write_tags(tag){
document.getElementById('cont').style.display="block";
document.getElementById('cont').innerHTML="<div align=\"right\"><a href=\"http://del.icio.us/rss/"+user+"/"+tagn+"\"><img src=\"http://photos1.blogger.com/blogger/2472/807/1600/feed-icon-16x16.png\" style=\"border:none\" align=\"right\" \/><\/a> <b>Subscribe To "+tagn+"<\/b><\/div><br /><br />";
var elem=document.getElementById('cont');
var i=0;
while(tag[i]){
var head=document.createElement('a');
head.innerHTML=tag[i].d;
head.title=tag[i].d;
head.href=tag[i].u;
head.id="cat-title";
var desc=document.createElement('span');
desc.innerHTML=tag[i].n;
if(tag[i].n){
elem.appendChild(head);
elem.appendChild(document.createElement('br'));
document.getElementById('cont').appendChild(desc);
elem.appendChild(document.createElement('br'));
var k=0;
var t=document.createElement('span');
t.innerHTML="<span id=\"filed\">Filed Under:<\/span> ";
t.id="cat-t";
while(tag[i].t[k]){
t.innerHTML+=tag[i].t[k]+"\t";
k++;
}
elem.appendChild(t);
elem.appendChild(document.createElement('br'));
elem.appendChild(document.createElement('br'));
}
i++;
}
var rem=document.getElementById('app-tags');
rem.parentNode.removeChild(rem);
}
/* ```````````````` END OF TAG DISPLAY ```````````````````` */
The stuff in red has to be filled out by you. They're going to be your delicious username, so that the correct data is called. Ofcourse, if you want to call someone elses tags instead, feel free to replace it with theirs, but make sure you have their permission first! :P Next is the displaying of the tags:
<div id="tags">
<ul id="taglink">
<script>
for(var i in Delicious.tags){
document.write("<li onclick=\"javascript:tags_s(\'"+i+"\');\" \/><a>"+i+" ("+Delicious.tags[i]+")<\/a><br \/>");
}
</script>
</ul>
</div>
This writes out the tags in a list. The style of the list can be edited by calling the ID selector as taglink. lis and as can be individually styled as well. All CSS rules apply here! :) The last bit is the place where the posts filed under your categories will finally be displayed. Add this wherever you want them to go:
<div id="cont"></div><br />
Usage
As before. Individual styles within this can also be set by prefixing div#cont to the IDs cat-title (for the title of the post) and cat-t (for the display of the categories its filed under). The categories display itself can be styled using ul#taglink and then styling the subsequent li and a. If you them to look the way do on my blog, you can grab the styles straight off my template (My Template). The post content can be set by setting the global style for div#cont. Thats it for this. Now, to use this, you'll have to start tagging your psots over at delicious.
You can use Johan's userscript to help in categorizing your posts. The script up there will not write the posts which don't have a post body. This is to maintain the uniformity of the appearance. Although if you don't want this, remove the if statements that I have marked up there. The rest, is the same as to how you tag your posts. Everything is automated, so just add those chunks of code and you'll be on your way.
As always, any doubts or questions will be answered. Just add a comment, and I'll get back to you as soon as I can. Enjoy! :)
32 Comments
This is impressive. Looks like I'll have to add another Aditya hack to my "to be installed" list...
Aditya yo da man!!! btw I like the way you explain/show your code here compared to blogeratto i don't like the show/hide way the codes are presented. just my thought. keep up the good work
Thanks a ton Ariel and Bubos!
@Bubos: Bloggeratto is more of an announcement platform, not the original or final destination for my hacks, hence the explanations are better here. I'll try and make the explanations uniform across the two blogs, but for latest and updated hacks, this is the place!
As for the code display goes, you can make the suggestion to change it directly at Bloggeratto. I'm sure Avatar will be glad to look into it! :)
Ofcourse I do! :) Ok, bit by bit!
"I didn't know where to put this in my blogger template, so I pasted it in the sidebar section. Obviously that was wrong, but I don't know how I'm supposed to use that bit."
That bit is what displays the posts, so you place it wherever you want the results to show up. On this blog, I've put right above the main post holder, and placed the categories to the right. Place it in an accessible place, where you know people won't miss it!
"Moving the cursor over one of these categories, however, reveals that there is no link to follow - it's just text."
It is not just test! Its a link without the href defined! You can set up a style for it, so that the cursor changes if you hover over it, but it'll work if you click it! Any more than this, I'll have to see what is wrong before I can help you, so mail me your blog address and I'll have a look?
I spent a long time poring over the "Help" topics of Blogger to try and find the tag/categorization feature for my fledgling blog. I am glad that you've creating this hack to fix the problem!
Unfortunately, I seem to have a problem with the display of the tags as well.
When I input the last line of code after my [Blogger] tag, clicking on a del.ico.us category only makes an RSS feed saying "Subscribe to [tag]" appear.
I toyed with the end code line's location and the problem persists.
What can I do to fix this?
I don't think you have added any postbody content in the notes box in del.icio.us while tagging them. My script, by default, doesn't write the posts which don't have a notes section. You can disable this by removing the lines (if statement) marked in green.
It'll write out all your posts!
Ah, thank you for that extra bit of information. It is nice to know that I can use del.icio.us for things outside of my blog as well.
Kudos to you for your awesome site! :-)
Hello Aditya just want you to know that I love your work very impressive.
I just updated my site and I'm going to use some of your script. Right now I've installed Asynchronous/Aditya's Blogger Categories it works fine with IE6 and Opera but it doesn't work on Firefox don't know what I'm doing wrong. Can you have a look see at my site it's
1ijack and tell me what wrong with my ABC?
thanks and keep up the good work
There's a line --> document.all.cont.className="show";
Remove that! I removed it from the code given in the post too, don't know how you got the messed up one! Anyway, try this out! :)
Its now working!! thanks
the script that I used was the one I saved last month, kinda stupid of me didn't bother to check for updates.
anyway thanks man and keep up the good work
Hey there Calvin! I'm glad my code could help you! :) If you want to display the categories a post is filed under, I'll suggest you have a look at my
Link Field hack. I use that on my blog, and I'm sure you'll be able to do the same.
Thanks for dropping by!
Aditya -
I am trying to get this cooking and I am very close (I think). I setup a test area at http://131365414343.blogspot.com/ because I need you to take a look. When I click the tag (listed in the archive by categories on the right) I do indeed see a list of posts for a few of the tags, but not all. Additionally, when it does show the post titles, its only listing a couple of them and not all.
Am I missing a setting somewhere? Confused because it does work on a few of the tags...
Thanks a lot.
Mark
Hey Mark!
I can see your problem. The thing is that by default, my code prevents posts without any summary from showing up in the results. Now, its common practice that people don't add anything in their Notes area of del.icio.us bookmarks. However, categories don't make sense if a little summary of the post is not displayed as well, hence I had to take this measure. You can do two things!
a) Add some content in the Notes section of your bookmarks or,
b) Remove the lines marked in green in the code. There is one if statement, and one } brace.
I hope I've solved your problem! :)
Got it - I will add the descriptions. Its crazy quickly your script works.
Last thing then I will leave you in peace and tell the world about your skills. On the post title display, I cut and paste your single line of code (which was the last step) but its showing a > that I can not get rid of when the page displays. I've implemented it on the main site now so you can see it right under the banner. Its at dumblittleman dot com (written so you don't think I am looking for any publicity). You can also see it on the test site I listed earlier
Thanks again
Haha! Thank you for your kind words! :)
The < is because I had managed to leave a < inside the <div id="cont"></div>. If you remove that, the angular bracket will be gone! I've edited it in the post as well, so thank you again for the little alert! :)
Looks great, I love it. Have you ever considered building a similar script using the the tag bundles as the top line item and then sub heading containing the tags? Has to be do-able, just way, WAY outside me brainpower.
Mark
I thought about that initially when I was writing this script. Unfortunately I couldn't find a JSON feed for their tag-bundles anywhere, hence I had to stick to this approach. I'll be working on allowing headings for a bunch of tags/categories as a part of my next update. Thanks for the suggestion! :)
Hey Aditya - 2 things.
I have a decent amount of categories. When a user click on a category, it would be helpful if the page would automatically go to the top of the page as opposed to loading without moving. I've had a few comments from people indicating that they were unable to tell the post summaries had been displayed (go to my page at www.dumblittleman.blogspot.com and select a category with less then 10 posts and you will see what I mean).
Also, I have been trying to get the same yellow-fade effect in the div that displays the post summaries. I've gone thought your template but I can't figure it out. Have any tips you can send my way?
Thanks a lot
@DDM: To make it autoscroll to the top, put a
<a id="top"></a> right at the top of the documents. Then, find this line, where the links to the categories are generated:
<a>"+i+" ("+Delicious.tags[i]+")<\/a>And replace it with this:
<a href="#top">"+i+" ("+Delicious.tags[i]+")<\/a>That should do it for the scrolling bit!
Secondly, the effects are all courtesy of
script.aculo.us, so you can give it a read. I use the
highlight effect quite dominantly on the blog! :)
Also, you didn't tell me how the tag bundles thing went. Did you find anything on that?
I followed the directions but nothing happens when I click on a category. Obviously I did something wrong. Please advise.
http://itsallinvickishead.blogspot.com/
@Vicki: The line in your template which reads var read4thefunofit=""; should actually be var user=" read4thefunofit";. Fix that, and it'll work!
Hi Aditya, is it possible to limit the number of del.icio.us tags this hack displays? I started out with a set number of category tags (which I still use) but began to tag my posts more liberally...so now I have a couple hundred tags, which would be overwhelming if they were displayed in the sidebar.
Is there a way I can choose which tags will be displayed in this hack?
Cool, but in when I put in my blog appears rss links.
@Gerald: I don't think you have added any postbody content in the notes box in del.icio.us while tagging them. My script, by default, doesn't write the posts which don't have a notes section. You can disable this by removing the lines (if statement) marked in green and yellow.
@Ariel: Yes there is! But you'll have to make the tags which you don't want displayed not shared (using Del.icio.us' newly added feature). Otherwise, you can only limit the number of tags, but not which, to be displayed.
hi aditya, your script is awesome. thanks so much, i followed your step to change my blog and the categories finally works perfectly in firefox. but if i use IE6 to browse it. the cursor pointer didn't show up when i put it to my categories. is that my css problem? or did i do something wrong? pls advise. thanks.
I'm guessing so, yes! Try putting in a cursor:hand statement in there. If that doesn't work, search around for the IE equivalent of a hand pointer in CSS. I'm sure that'll help you.
I'm sorry but I really don't bother with IE so much! :P Thanks for dropping by! :)
I came to know of your wonderful hacks from blogger forum. As for categories,
I'm directly linking to the del.icio.us page, which makes the visitors leave my blog.
I want to implement your hacks. As I'm not savvy with CSS/HTML, I would prefer
to create separate posts for each category with the category name as title and I would like to extract the urls corresponding to each tag from del.icio.us into those posts. Could you kindly suggest what changes I should make in the code specified by you? I'll be very much grateful for your help.Thanks in advance.
Hi Aparna! Thanks for wanting to use my hack! :) There are just a few steps that you'll have to take to get this working for you! Just follow the itsy bitsy steps below, and you'll be on your way! :)
1. Make a post for every category, with the title as the name of your category. Then in the post body, put
<script>
var categ=location.search.slice(1);
categ=categ.replace("?", "");
if(categ!="") tags_s(categ);
</script>
<div id="cont"></div>
(This bit will look for a ? and load the category which is written after that)
The post editor will give an error when you try to publish. Check off Do not show errors and publish again. It'll get posted.
2. Add the entire part above in the post which is supposed to go in the <head> area within <script></script> tags.
3. Make links in your template, and make them point to url-to-post?category. For example, if your category is called 'Personal', and your post url is 'http://blogname.blogspot.com/2006/08/personal.html', then your url for the category will be http://blogname.blogspot.com/2006/08/personal.html?Personal
I hope this helps! :) Best of luck!
Aditya,
First, amazing script. To get the basics working took almost no time. Unfortunately, I've now spent way too much time customizing and I've reached a wall in my ability to plagiarize your work.
First question: How do you limit the number of tags that are displayed? I know that I only want to show the top 10 most used tags, and I'm willing to accept that the topics may change over time.
Second question: What determines the order that the links are shown in the list (after clicking on a category)? It doesn't seem to be chronological - which would be preferable - or even alphabetical. Is there some way to force it to be chronological so that the most recent posts are at the top?
And one note. You suggested to DDM that he put href="#top" in his script. I believe it needs to be href=\"#top\". right?
Here's the link to my site. Only the index has been published with the script for now.
Banana StewThanks again for the creativity,
Scott
Hehe! Thanks for the kind words! :) I'd like to know what all you've customised, so that maye I could add in the features natively as part of my next update? As far as your questions go, here are the answers! :)
1. You can limit the number of tags to be shown to be the top 10 most used tags, by changing the URL from which the JSON feed for the tags is received. The following line will do nicely!
<script src="http://del.icio.us/feeds/json/tags/username?sort=freq&count=10" type="text/javascript"></script>
2. The order of the posts showing up is the recency of them being added to Delicious. Means if pots 1, 2, 3, 4 are posted to Delicious as 2-3-4-1, then thats how they'll show up. I will look into making the posts chronological in the display, and will announce it when I put it in. Thanks for the suggestion!
And yes, the double quotes needs to be escaped, so you'll write them as \".
I hope all these help! Tc!
Aditya,
Thanks for the response. I implemented #1 and it works beautifully. My problem with #2 was my own. I'd screwed up some code and the tag list was just building instead of clearing and reprinting. It's ok now.
As for the customization, most of what I've done is cosmetic. I didn't see a need to add an RSS subscribe button, links, or description text, so I changed the output to just put the blog title and name of the category at the top. Then I personalized the style a bit so that it fit in better. You can see the latest version at
my blog.
Then, unfortunately, I followed your link to script.aculo.us and have now wasted waaaay too much time playing with those.
Thanks again. Great hack.
Scott
« link to me!
my coComments
my claimID
subscribe to feed
add to google
add to del.icio.us
add to yahoo!
add to bloglines
add to msn
add to Netvibes!
add to feedster
add to furl
