Where magic lives: Very Easy Blogger Categories

Friday, July 07, 2006

Very Easy Blogger Categories

I am a bit surprised that Blogger do not have a system in place for categorising blog posts. A quick Google search on the matter reveals that it is something a lot of people want to do but there are not really any elegant solutions available. The methods that I saw before I decided to make my own system involved creating a new blog for each category, or used the del.icio.us bookmark site, which does not allow for a very attractive user interface.

I have made a system that can be used by any website to categorise pages. Here are the installation instructions:

Add this code to any page that you want to assign a category: <img src="http://da.vidnicholson.com/blogtags.php?tag=Category Name" />, replacing Category Name with the name of the category the page belongs to. (If you are using Blogger insert this in the Edit Html tab whenever you create a new post.)
On any page that you want a list of categories to appear add the code: <div id="tagbox"></div> where you would like the list to appear and put the code <script language="JavaScript" src="http://da.vidnicholson.com/blogtags.php?dom=1"> </script> just before the closing </body>. (If you are using Blogger enter these in the Template tab.)

Update The bold text above reflects changes made to fix a bug.

Update Support has been added for other character sets.

...And you're done. No need to setup an account or password with me, no need to install any scripts on your server; as people start to view your articles through your 'permanent links' a category list like the one to the right will be generated for you.

How it works Including the img tag in each of your posts causes a transparent pixel to be shown. Whenever that image is loaded the referrer data is captured by my PHP script and your page along with the tag specified is added to my database (root URLs and archive pages are ignored so only individual posts should appear in your category lists). There is a delay of a few minutes before the page will actually appear in your category lists while the page is added to a queue for the server to verify it actually should have the tag given (this stops people spamming your category lists). If you later decide to remove a page from a category, just remove the img tag; it may take up to 24 hours for the change to be reflected in your category lists though. If you want a post to belong to more than one category, just use more than one img tag. For this to all work correctly you must have all your posts appearing on the same domain (e.g. myname.blogger.com) and be the only person using that domain. Including the JavaScript file and div tag in your Blogger template causes a nice AJAX category menu to be drawn into each of your blog pages.

Update If you want the names of the assigned categories to be displayed on each post instead of a transparent pixel, then use the following img tag: <img src="http://da.vidnicholson.com/blogtags.php?tag=Category Name&r=127&g=34&b=255&font=3" /> where r, g and b are decimal numbers between 0 and 255 specifying the amount of red, green and blue to use in the text colour and font is a number between 1 and 8 to specify the typeface that should be used.

Update I have added some true type fonts; font numbers 1, 2 and 3 are Times New Roman, Verdana and Arial respectively, 4 through to 8 are the older fixed width fonts.

Showing the number of posts in a category Change the Javascript shown above to <script language="JavaScript" src="http://da.vidnicholson.com/blogtags.php?dom=1&showcounts=1"> </script> if you would like the number of posts in each category to be shown on your blog.

Making a Backup If you would like your own copy of your category database as a backup just go to http://da.vidnicholson.com/blogtags.php?backup=yourdomain.com as often as you like and save the XML file that you are given. So, for example, to see my backup file go to http://da.vidnicholson.com/blogtags.php?backup=da.vidnicholson.com

All source code and related services that I release are "dontation-ware". If you use the above please make a dontation (pay whatever you think the it is worth) or (where applicable) leave the link to my site attached.

Labels: Programming

63 Comments:

Really cool David. I will give it a try.

By Venkataramani, At 2:08 AM
btw, pls check out my hacks at http://hackosphere.blogspot.com and let me know what you think.

By Venkataramani, At 2:09 AM
Great idea, well executed!

I wonder if this would work?

Put this into your Blogger template:

<img src="http://da.vidnicholson.com/blogtags.php?tag=<$BlogItemUrl$>" />

Then, when using Blogger's post editor page, insert the desired category into the "link" field (just under the the title field).

Upon publishing, the link value would get written into the template tag, creating the proper img src fetch.

That way, the script can be "hard-coded" into the Blogger template, and the user only has to do the bare minimum ie enter a word into the link field.

What do you reckon?

By Greg, At 2:59 AM
I just tried this for a blogger blog I am creating for a friend, hoping it would create a way to group guest bloggers entries into categories (so a reader could see all posts by one guest blogger). We don't HAVE any guest bloggers yet of course. Anyway, where I added the "tagbox" code there is now a spinning gray box. ??? I could do with out that.

In your directions, you say that you must be the only person using the domain, so I wonder if that means this won't work? She will be inviting people to be "members" of her blog so that they can post using their own blogger name.

Would love it if this could work.

By Jenny, At 5:16 AM
Hmm... it still doesn't work for me. I have no grey box but I don't have any categories either (even though there is a bigger gap where they are supposed to appear). Perhaps it's beacause I haven't "made" a category list, but only inserted the codes that were in your instructions? Please help me.

By Lina, At 8:25 AM
Now it says:

Please update your category code (see http://da.vidnicholson.com/)

By Lina, At 8:30 AM
Hello and thanks.
Its working for me now, but instead of showing the title of the post in the category it shows the title of the blog.
Any idea of the reason why?

By Rodolfo, At 4:17 PM
Rodolfo: Your problem is now fixed.

Please do bear in mind that pages wont be added to your category list until they have been viewed at least once through their "perma link" (click on the time underneath each post after you create it if your blog does not get much traffic).

For those of you asking about specific character encodings... I am working on it, it is an area I have little experience in as I have only ever made English websites but I will find a solution.

By David Nicholson, At 11:56 PM
re greg's suggestion, an alternative would be to copy and paste

img src="http://da.vidnicholson.com/blogtags.php?tag=Category Name" /

into "Settings: Formatting: Post Template"

substituting "Category Name" with your most used category or just leaving it blank. This code would then appear with each new entry and you can tweak it accordingly.

By Anonymous, At 11:59 AM
I am a little confused, do I change the dom=1 to something unique?

By GadgetGirl, At 9:32 AM
Hi me again,

Do the category tags have to be 1 word, the only cats showing are single words.

\D

By GadgetGirl, At 9:37 AM
No, you leave the dom=1 exactly as is. And you can use as many words as you like (you'll notice that I am using 'Book Reviews' as a category).

By David Nicholson, At 10:39 AM
I hade a cat Music & Art and it displayed as Music, I changed it to Music/Art and it was complete.

By GadgetGirl, At 6:51 PM
thank you, it works at once for me. i am very happy about it.

what i am missing is a "view all of one category - button (fulltext)" where you view all the posts of one category and not just one at a time. but maybe that is difficult or impossible to do in blogger.

By 失踪, At 6:41 AM
when i left my comment and switched back to your blog i saw MY categories in YOUR sidebar. i refreshed and then it was alright again. is this a bug?

By 失踪, At 6:46 AM
This is cool. I seem to have managed to create an unwanted category (Renewal) will it disappear by itself now I've removed it from the postings or could you delete it for me?

Cheers

Fiona

By Fiona, At 2:31 PM
失踪, This was because your browser was caching the JavaScript from your page an using it when rendering my page. I have modified the script so it sends some headers asking the browser not to cache it.

By David Nicholson, At 8:02 PM
Fiona, it should delete itself from your category list within 24 hours of you deleting the tag from the post (or deleting the entire post). Let me know if this has not happened.

By David Nicholson, At 8:03 PM
I think that I paste everything correctly, but the categories still didn't show up at my side bar. What should I do? Do I have to wait for hours for the link to show up? (I had also click the permalink, as what you told in your previous reply)

By Whatever, At 10:52 AM
Huntress, shortly after I visited your blog your categories appeared. It might be that your browser or personal firewall software or anoter computer somewhere in your network is preventing HTTP referrer headers being sent when you view the category images.

As you start to get traffic to your blog other people will view your category images all the time so this will no longer be a problem.

By David Nicholson, At 11:10 AM
Thanks a lot¡¡

great idea, great explanation and great everything¡¡¡¡¡

thanks again ;)

By zaebos, At 6:33 AM
Ok , all fixed now. The problem was in the firewall and the HTTP filters...

But i have another question:
Can i use two or more tags to include a post in a lot of categories at the same time??

for example : videos and humor... or whatever..

thanks again.

By zaebos, At 7:24 PM
zaebos, yes using two or more tags per post is fine, just use multiple img tags.

By David Nicholson, At 7:41 PM
Thanks!
By the way, why does the bullet does not look the same as the rest of the bullets in the sidebar?

By Whatever, At 11:05 AM
Huntress, I just use:
<ul>
<li>Category 1</li>
<li>Category 2</li>
...
</ul>

So the bullet will be set according to whatever the styles in your blogger Template use for <ul> and <li> elements in your sidebar.

By David Nicholson, At 11:10 AM
This is the best looking categories solution I've seen. I haven't liked any of the blogger search or del.icio.us methods. Only one problem with it... If you ever stop hosting the database and php file (or even if your server goes down), everyone's blog categories will stop working! I'd be much more comfortable with this knowing that my categories will work as long as MY server is working. I don't suppose you could be persuaded to post your php code and database schema?

By Donny Bahama, At 7:00 AM
Donny, I have responded to your comment as a blog post.

By David Nicholson, At 11:45 AM
Super solution! I'm inept when it comes to code and yet managed to execute your instructions without embarrassing myself.

Many thanks.
Charmian

By Christie's Corner, At 4:15 PM
Where should I insert the tags? Before, after or in between the [div id="tagbox"][/div] tag? I'm not using the template provided by blogger, do you think that this might cause the problem?

By Whatever, At 4:29 AM
Huntress, on the blog listed in your Blogger Prolfile ("Bring Me To Life") you are using the code correctly and your categories are appearing already.

By David Nicholson, At 1:13 PM
FYI My categories with a / in them stopped functioning, so I changed them to dashes, check it out at http://naples-ny-the-fingerlakes.blogspot.com/

Cheers

By GadgetGirl, At 4:36 PM
GadgetGirl, thanks for pointing out that slashes bug, it is now fixed so you can change back and use slashes if you like! Hope you like the script.

By David Nicholson, At 4:46 PM
I think I have found a bug:

If you enter in the blog with "www" the list of categories will fail. That doesn´t happen if you enter in the blog without www.

Example, with your blog:

http://www.da.vidnicholson.com/

http://da.vidnicholson.com/

Thanks for the great work!

By Shora, At 12:49 PM
Shora, this is not actually true, if your blog is regularly visited at both URLs then the categories lists will be populated for each of them. It does not work on my blog because I do not advertise the www. version, hence noone visits it so noone has clicked on any of my permalinks and no categories for it have been generated.

By David Nicholson, At 1:35 PM
Ah, sorry about that. I didn´t know that the category lists depend on the visits.

By Shora, At 4:33 PM
Do categories need to be one word? I have a three word category and occasionally it will not take and spontaneously create a new category containing the first word only ("Food for thought" becomes "Food"). It doesn't do this all the time, just once in a while.

Any suggestions?
Many thanks.
Charmian

By Christie's Corner, At 9:10 PM
Charmian, multiple words are allowed but all tags must be properly escaped, this means that spaces turn into + characters (e.g. Food+for+thought instead of Food for thought). Most browsers have known what you meant but some are more strict and will just use the first word which is what you are seeing.

By David Nicholson, At 9:52 PM
Thanks David! I'll make sure I add a + between my words.

I appreciate the quick response and just love your solution!

All the best,
Charmian

By Christie's Corner, At 9:54 PM
Hi there,

I just your categorization method and I think it's great! But nevertheless, I have one problem. I cannot place the categories in my list, they only show up when I place the div outside of the list div, so I cannot place the tagbox div inside my sidebar div.

Can you please help me?

By LivingInspirations, At 8:11 AM
LivingInspirations, your categories look and work fine right now, maybe you could move them to wherever they are not working and ask again so I can take a look?

By David Nicholson, At 12:53 PM
Excellent idea and tool! Problem though, categories show in posts (chose the name instead of blank pixel), however I don't get the category list.

domain is cmehil.com (backup shows all data)

Could it be because of the way I access the blog?

http://craig.cmehil.com
http://cmehil.com/craig

By Craig, At 9:57 PM
Craig, you haven't quite followed the instructions correctly. You need to put <div id="tagbox"></div> where you want the category list to be displayed.

By David Nicholson, At 10:25 PM
Feeling the total n00b here - had it in but removed it and forgot to put it back. Any chance of adding in a count next to each category?

By Craig, At 7:21 AM
Craig, I've implemented the counter now (add &showcounts=1 to the end of the JavaScript URL to use it).

By David Nicholson, At 2:36 PM
Excellent!

By Craig, At 3:14 PM
Hi David,

Placed your categories DIV tag now behind the div sidebar tag. the heading "categories" is visible but instead of a list with the categories, nothing is displayed (a blank line). like I said this only happens when I place it inside the sidebar DIV.

By LivingInspirations, At 8:36 AM
hi David, do not know what has changed, but now suddenly it appears! So ignore my previous post ;-) Thanks for this great method!

By LivingInspirations, At 8:39 AM
After 24 hours, an article that no longer has the tag leaves the category list (and I assume your database). Does this mean that any post not accessed in the last 24 hours is no longer in the category list?

By Filip, At 12:27 AM
Filip, in short: No.

Once a page has made itself into the database, it stays there as long as it is accessible on the Internet and still contains the category image. If your blog is down for a while, when it comes back online the page will not reappear in your category list until it has been visited though.

By David Nicholson, At 9:53 AM
Hi David,

Thanks for your great solution. Unfortunately, deleting or changing a category is not working well. I just begin my blog, so my categories are usually changed. But I have no way to control my categories list.

My other question is that, if your database server is down, does that mean the categories function in all our blogs will die too? Although we have a backup xml file, what can we do with that file to restore our categories functionality?

Regards,

By Cyrus Dang, At 3:51 PM
Cyrus, you need to wait up to 24 hours after deleting or changing a category for the changes to take effect in your category list. If a change has still not propogated after this time period please let me know the exact post so that I can check.

The XML backup file is just for your own records. The idea is that if I do dissapear you will all have your category lists in a common format and somebody else can come along and make a new system that uses those files.

By David Nicholson, At 6:19 PM
Dear David,

Just a little suggestion. Can you modify the code a little bit so that the first item, which is usually the category name, can be stand out. I think it should be bold and should not be in the same format like other list-items (therefore not with a bullet).

Thanks for your great work.

By Cyrus Dang, At 4:37 PM
Cyrus, I have added classes to the <li>'s that contain the category title and the back link. They are cattitle and catbacklink. If you modify the style sheet for your blog and add selectors that target <li>'s of this class you can modify them yourself. e.g.: li.cattitle { font-size: 200%; }

By David Nicholson, At 3:32 PM
Hi David.
I implemented your scrip on my blog and it runs perfectly. My bolg adresse is www.edp.cat. I'm going to link your bolg in recomends. Thaks for all and congratulations.

By edp, At 9:37 AM
hi David,

I've used your categories solution in my blog , worked pretty fine for me. I was almost sold on going the del.icio.us way, but I hit upon your solution, and I must say its power lies in its simplicity. Nice work. I'll link to your work in my posting.

By Sowmya, At 4:43 PM
David,

I seem to have a problem. Categories that have multiple words (e.g.; Web 2.0) dont seem to show up in the categories list. It does show up in the individual posting, though. What could be the problem?

By Sowmya, At 5:01 PM
Sowmya, the problem may be that you are not 'escaping' your category names when embedding the category image in each of your posts. Try using Web+2.0, it will still display as "Web 2.0".

By David Nicholson, At 12:06 PM
It works for me now. I was using the wrong escape character ( ). Thanks for your help,David.

By Sowmya, At 6:12 PM
im not shure how to do the second step, how do i know where to paste it in bloggers template? couldo you tell me? thanks for sharing the info

By riveronmirror, At 5:05 AM
riveronmirror, you put the code pretty much wherever you would like the category list to appear on your pages. Editing your Blogger template is very similar to editing any other HTML page, if you need more specific HTML help you may want to ask around on some HTML forums.

By David Nicholson, At 5:24 PM
Very good, but i have i problem.

I made a post, included everything as said, but bellow my category in the list, there are 2-3 javascript lines that show up.

Furthermore the image that is on the post, show as a box.

By Arfaern, At 10:41 PM
Hi David,
Category list works but is not perfect... the link 'default' shows up before my other category and also the link '(back to list)' doesn't work properly.
Thanks

By jessi love., At 5:54 PM
It seems simple enough but I can't get the show counts code to work either...

By jessi love., At 9:20 PM