Blogger Hacks, Categories, Tips & Tricks

Saturday, July 16, 2005
Using Greasemonkey & del.icio.us for categories in Blogger

New Intro 2/16/06:


This script broke when Firefox and Greasemonkey were updated. It has recently been edited to work with the upgrades, and links here now point to both this revised basic script, and to the original version (for anyone using earlier versions of Firefox or GreaseMonkey)

For a third, feature-rich script, see my how-to for Johan's script.

_________

It occurs to me that my posts about the Greasemonkey categorization method [1] [2] haven’t been especially clear & may not be all that helpful. I was writing as I was puzzling it out, & so my how-to wasn't especially definitive. However, since I’m finding this to be far & away the most straightforward strategy for tagging & categorising posts in blogger, here’s a detailed how-to.

You should:

  1. Use the Mozilla Firefox Web Browser
  2. Install the Greasemonkey extension for Firefox, which enables you to run open-source user scripts on specific webpages.
  3. Get a del.icio.us account.
  4. Install either Greasemonkey Script 3187: For Firefox 1.5 and GreaseMonkey 0.6.4 or Script 1240: For earlier versions of Firefox and Greasemonkey.
  5. Edit the tag-generating script to point to your del.icio.us account.
  6. Install the Technorati & Del.icio.us tag-generating script in your Firefox browser. The script runs on blogger “create / edit post” pages and adds a field to the form where you can type your tag / category keywords.
  7. Add a “my categories” link to your sidebar that points to your del.icio.us page

http://del.icio.us/username/

  1. Write a post, publish it, & bookmark it on del.icio.us.

So, step-by-step:

1 - Greasemonkey only works with Firefox, so you need to be happy browsing with Firefox. (let’s face it, why wouldn’t you be?)

2 – Greasemonkey is a Firefox extension that enables you to run open-source user scripts on specific webpages. To enable Greasemonkey, visit their website & click the install link. As Improbulus notes at A Consuming Experience:

if nothing happens and you see just below your tabs a message in horizontal bar that "To protect your computer, Firefox prevented this site (greasemonkey.mozdev.org) from installing software on your computer", you should click "Edit Options" at the end, then "Allow" and "OK" to allow that site to install software, then try clicking the Greasemonkey extension link again, give it a few seconds then click "Install now". Close and re-launch Firefox.)

3 – Visit http://del.icio.us/ and sign up for an account.

4 – With Greasemonkey enabled in your browser (step 2), choose a script and go to the page that displays the script content.

  • Script 3187: For Firefox 1.5 and GreaseMonkey 0.6.4
  • Script 1240: For earlier versions of Firefox and Greasemonkey

From the above-linked pages on Greasemonkeyed, click either Install this Script or Original Source Location (both seem to be the same .js file). Copy the text of the script into a text editor, and edit to insert your del.icio.us username instead of mine.

Save the script, & upload it to your web server. Then view the script in its new location, go to the “tools” menu in Firefox & select “install user script.” When prompted, select OK & you should see a message indicating that you’ve been successful.

5 - To tag your posts, simply click over to the HTML view in the compose window, type keywords in the new field that was added to your page by the greasemonkey script, and click “append tags.” When you publish your post, it will have tags included that are visible to Technorati & link to your page of bookmarks on Del.icio.us. As I’ve said here before (sorry to repeat…) Technorati tags don't have to link to technorati. They can link to del.icio.us and technorati will find them because of the rel: tag attribute.

Now only one step remains. Bookmark your post on Del.icio.us, into a del.icio.us account that only contains posts from your site & not from other sites. To bookmark on del.icio.us you can use either the bookmarklet that is available from the site, or a one-click link out of your post.

Update 2/16/06: The script has been revised to work with Greasemonkey 0.6.4 and Firefox 1.5

Posted at 2:47 PM by John.
39 Comments:
<    >
Blogger shakester said...
phew.
ok, have just been through your multiple posts on delicious, categories, greasemonkey et al. Sounds fab, cause I have needed this for a while- except I ahve one problem. I use firefox at home and IE at work (and that can't, unfortunately, change). So if i install greasemonkey, and I spot from work (which I do pretty often), then I am stuck.
SO either I wait to go home and tag my posts (which doesn't make that much sense because of the lag),
or I use the greasemonkey thing at home and the insert tag code when using IE?

Are those my options then?
(thanks for the how-tos, and thanks for hopefully replying to this query as well)
cheers

<    >
Blogger John said...
As you say, you could use Greasemonkey at home and the bookmarklets at work, or if you want to keep it simple the bookmarklets will work on IE and Mozilla, & you can do the same thing both places. They aren't that much slower or more complicated than greasemonkey, & the result is the same either way.

Best of luck with it!!

<    >
Blogger Fritz said...
For posting URLs to del.icio.us, I use Firefox and Greasemonkey and blogger.com and followed the directions here, got frustrated and wrote 7 lines of Javascript to do the same thing with a *lot* less effort. It's 9 lines if you want to take advantage of blogspot macros. No special browsers, plugins, or even blogging software is required.

<    >
Blogger John said...
Fritz,

There's a difference between what you're doing (one click posting to del.icio.us) and the method described here. What this will do is generate tags in the body of your blogger posts that link to del.icio.us, so that when someone clicks one, they're taken to your del.icio.us page for that tag & shown a list of all the posts that you've bookmarked with that tag. This substitutes for the missing categories feature in blogger. Generating the tags in your posts allows your readers to link directly to the posts that you've tagged....

<    >
Blogger skierpage said...
Neat, so much work for a feature Blogger should implement!

Step 4 instructions are incomplete. You have to go to the Greasemonkeyed page, then click either _Install this Script_ or _Original Source Location_ (both seem to be the same .js file). Then (at least on Mac Firefox) you have to explicitly copy the script into a text editor -- View > Source just reopens in Firefox.

Note the released Greasemonkey doesn't work in Deer Park Alpha2 (the next version of Firefox), and Greasemonkey TNG isn't out yet.

<    >
Blogger John said...
Thanks for the heads-up!! I pasted your instructions into the body of the post.

<    >
Anonymous wd said...
Thanks for the method!

And here is my enhancement for the one-clink link. Hope it will help all of you.

<    >
Blogger Scott said...
Very nice. Thanks for the instructions. I've been spending spare moments over the last few days adding categories to all of the old posts in my blog.

One minor problem is that they're all showing up on delicious with this week's dates instead of the date I would prefer (the date that they were actually posted). I don't see any way around this. I suppose it'll work out in the long run with new posts. In the short run, you get what you pay for - until blogger finally decides to implement the feature correctly.

Thanks again.

<    >
Blogger Archaic Rhz. said...
I have a question: I installed the script onto my browser (making sure to substitute my username), but when I click on the "append tags" field in Blogger nothing happens. Additionally, when I publish a post, the java console records this error:

Error: post_options has no properties
Source File: technoratianddeliciousta.user.js
Line: 332
Source Code:
332

What might I be doing wrong?

<    >
Anonymous Anonymous said...
This comment has been removed by a blog administrator.

<    >
Anonymous Anonymous said...
sorry for the dumb question, but how do I upload the script to my web server once I change the script with my del.icio.us account name? No idea how to upload it to my web server. I am just hosting my blog on blooger. Thanks

<    >
Blogger John said...
Not a dumb question.... In fact an opportunity for Blogger, I think. They don't provide additional space to users for template images / user scripts / stuff like that, & they could include a small amount. To make this work without a server (I don't have one either...) you'll need a free website acct somewhere else to house the script, uploaded to the web. You can view and install the script from that new URL.

Get in touch again if this doesn't help!!

<    >
Blogger RPM said...
I tried the steps and even uploaded the file to my ISP's 'personal web space' FTP location. I could browse to that file with http://home.comcast.net/~username link. But the 'install user script' option in the Tools menu is greyed out. How can I install the script?

I noticed that on your hosted page, it shows the Install User Script as an available menu choice, but not when I point it to my script.

What can I be doing wrong?

<    >
Blogger John said...
Be sure to call the script

whatever.user.js

or the browser won't know what it is & won't activate the install option.

<    >
Blogger Craig said...
John - thanks for all of your help enhancing my blog... these scripts and posts are great. Keep up the great work. If you are ever in NYC beers on me.

-Craig

http://techstockblog.blogspot.com/

<    >
Blogger Stephen said...
Hey guys,

I think they updated Greasemonkey--it's working fine on the latest version of Mozilla. I'm loving this extension--thanks!

<    >
Blogger Singpolyma said...
I was hoping someone had come up with a way to use greasemonkey to post to delicious without pushing an extra button and re-entering you tags (such a pain) oh well...

<    >
Blogger m. said...
Hm. Is there no way to syndicate content from del.icio.us, suck out som rss and build a proper menu with js?

<    >
Anonymous Anonymous said...
About the webserver thing, I didn't upload it to a webserver and reinstall it. What I've done: After installing the script, I go to Tools - Manage User Script - Select the Script - Edit - Click 'save' in Notepad. The script has change to my username in del.icio.us. I don't know, it seems to work. Can someone confirm this?

<    >
Blogger John said...
If it works for you, & the posts don't have my del.icio.us signon in them, I guess that's fine!! When I try to edit that way (tools, user scripts, edit) I get a large & garbled error msg that I don't understand, & I don't see the text of the script. But if it works for you, more power to you....

<    >
Blogger Serene said...
Bad news! Greasemonkey 0.5.3 is not compatible with Firefox 1.5. So we have to wait for a updated version of Greasemonkey or is there any alternative?

<    >
Blogger John said...
P.S: Greasemonkey have a beta of an updated version on userscripts.org. See Greaseblog. I haven't tried it, & there are bugs in the comments, but it seems to be an effort to address the issue...

<    >
Blogger Johan Sundström said...
I believe this post is getting a little overcrowded to carry more information; if you want to clear things up for your readers, you might opt to write a follow-up more or less from scratch. I believe my linked three in one script covers most of steps 4, 5 and the boring bits of step 7, but I might not have covered up all of what your tutorial does, as I don't touch technorati county yet.

Any wish lists or suggestions on what would be a good way of adding that are very welcome indeed; I have put off acquainting myself with technorati time and again already, but expect it should eventually do both. Just not sure on how, whether tag duplication would be good, or if you want two separate Tags fields, and so on.

<    >
Blogger nathan said...
I created a way to create categories on my blogspot blog. It's an easy way to get your blog tagged and categorized at the same time. I call it technorategories. Go here to check it out.

http://thegate.blogspot.com/2006/01/technorati-categories-technorategories.html

<    >
Blogger sogi said...
h++p://greasemonkeyed.com/scripts/show/1240<--- broken links, can you show us another site/page ?

<    >
Blogger John said...
Sogi,

See the first paragraph of this post, from 12/2/05, where I point to a new script and a new how-to that will work w/ the Firefox update and the new Greasemonkey.

"Update 12/2/05: This method has been superceded. The Greasemonkey script for tags that I'm using & linking to from my is broken due to version upgrades of both Firefox and Greasemonkey. Ah... innovation. See my new how-to for an updated script that will work with Firefox 1.5 & Greasemonkey 0.6.4. "

<    >
Blogger Sara said...
I did all of these steps and everything said it was successful, but when I try to actually put in the tag on the new/edit posts form, nothing happens. I click the Append Tags button - nothing happens. I go to look at my blog and the tags aren't there, nor are they there on my Delicious account.

Any idea what the problem could be?

<    >
Blogger John said...
Sara,

You may need the new script etc, or perhaps you just need to be in the "edit html" side of the post window (instead of the rich-text editor) when you hit append tags. Try that first. If that isn't it, see the new how-to.

<    >
Blogger waldwicht said...
Hey, I have a question: Can I place the "tags" in or under the "byline"? The line that starts with "Posted by waldwicht at 18:37 | Permalink | Comments (0)" for example. Is that possible?

waldwicht.

<    >
Blogger John said...
Waldwicht,

Not possible, as best I can tell, although I will happily ask the community to prove me wrong. The thing is, your byline elements are static & part of your template, & can't easily be changed each time you post without a 100% republish. The part that updates each time is the post content, & so the easiest way to tag is in that area.

<    >
Blogger Publius said...
Here is my problem.

I uploaded my script to my webserver and got my user.js to appear in my script manager on Firefox.

HOWEVER, when I use blogger and append the tag it still shows up with the [XXXchangemexxx] and I still have to erase that and manually write in my del.icio.us name!

So, why won't my script take over where the original is?

<    >
Blogger John said...
Publius,

You have to edit your copy of the script that sits on your webserver before you install it. Open it in an editor and replace the **username** section with your actual username. Then save the script and reinstall it. Failing that, use Johan's script, which asks you for all the info the first time you run it.

<    >
Blogger Publius said...
I did that. But it seems that my browser is using the original script3187 as it was downloaded instead of my new script. When I open my script manager I see the following:

http://blogger.com*
http://www.blogger.com*
http://www.myscript.user.js*
(by the way I shortened my script address so everyone won't know where it is)

I have tried removing the two blogger scripts leaving only mine but then I don't get any append field on my blog updater.

So, how do I get my blog site to see MY altered script and NOT the original blogger script?

Also, in the field at the left on my script manager I see two entries:

Technorati and Delicious Tags for Blogger2
myscript

Should I only see one? If so, which one.? Like I said if I get rid of the blogger stuff in the script manager and only leave my script, I get no append field wen I update my blog.

Thanks for all the help so far. This page is great!

<    >
Anonymous em said...
Hi, I've just started using greasemonkey and del.icio.us for categorizing my posts in Blogger. While the del.icio.us is working great, I couldn't seem to get my tags to show up at the bottom of every posts. My initial impression was that the script installed via greasemonkey would allow me to append the tags to each of my posts. but it won't work. (that's what its for right?) :( Help!

<    >
Anonymous em said...
Hello John!! Finally got the tags to appear at the bottom of each page. Wee!!! Quick question, how do I insert a line in between my post and the "Tags" heading. Plus, how do I make my tags appear as a cloud, (as opposed to the list sequence) Thanks! :D

<    >
Anonymous em said...
Hi John! Figured out how to put all the tags in one line based on this post. Thanks! Just need to insert a line in between the post and the "Tags" title/heading. :D

<    >
Blogger John said...
Em,

To leave a line between the post and the tags, put a couple of hard returns at the end of your post (putting a blank line after your text) & leave your cursor on the last possible blank line when you click over to the HTML side. The tags get written in at the bottom of the content, so if there's a space there, they get written in after the space.

<    >
Anonymous em said...
John!!! Thank you so much! You really made my day! Keep up the good work! :)

<    >
Blogger Carolyn said...
Hi, I'm having some problems - my tag links don't go to my technorati page. i've checked and double-checked the instructions, but can't figure out where I went wrong - any thoughts? my blog is www.fieldtofeast.blogspot.com.

thanks! carolyn

Links to this post:

Create a Link


eXTReMe Tracker