A Tagging Bookmarklet for WordPress and WordPress.com Users

I get a lot of questions about the tags I use at the bottom of most of my posts. I used to feature two sets of tags, one for Technorati tags and the other as navigation tags to search my site. Up until recently, these were created from a text file I kept open all the time with my tag list all laid out. I’d copy and paste the tags I wanted into the bottom of each post. Well, now I don’t have to.

The technique I use for putting my Site Search Tags on the bottom of each post uses a bookmarklet. A bookmarklet is a bit of javascript that you can put on your bookmark or favorites sidebar or toolbar, similar to the WordPress Press It Bookmarklet. I keep my tagging bookmarklet in my toolbar so it’s fast and easy to access. The javascript is literally a mini-program with programming language instructions. In this case, the bookmarklet brings up a pop-up window form in which I enter my tags and click OKAY, then it generates a list of my tags and HTML which I copy and paste into the bottom of my posts. Nice and simple.

Oddiophile’s Rather Fab Technorati Tags Bookmarklet contains javascript instructions which adds tags to your blog. I ran across this little gem while researching for my article on More Must Have Bookmarklets Than You Can Swing a Bookmarklet At.

While this tagging bookmarklet works great as it is, the look of the tags is controlled by a <span> CSS tag. With the full version of WordPress, you can customize the look of the tags, but in WordPress.com blogs, all that code is stripped away. So what do you do? We’ll get to that. Stay tuned.

Note: Now there are two versions of this Tagging Bookmarklet. There is the first version which includes pluses (+) between the linked combined tag phrases and a space between tag words, and another version that shows only a space between linked combined tag phrases and a comma between the the tag words.

Using Oddiophile’s Technorati Tags Bookmarklet to Make Your Own Tagging Bookmarklet

To use, go to Oddiophile’s Rather Fab Technorati Tags Bookmarklet and click and drag the Oddiophile’s link to your sidebar or tool bar. A link will appear.

1. While writing a post in the WordPress Write Post panel, click the Oddiophile bookmarklet link.
2. In the popup window that appears on your screen, enter the Technorati tag names you want to use.

   

3. Use one word terms or two or more word phrases with a plus between the words, no spaces (unless using the new version listed below – then use spaces):

   wordpress+tips

4. Do NOT use commas, only spaces to separate the words. To use multi-word phrases as tags, put a + between the words such as wordpress+plugins (Unless using the newer version listed below which does not use the + sign and does use commas to separate the words).
5. Click Okay.
6. In the next window, copy the text with the copy shortcut keys CTRL+C.

   

7. Click Okay.
8. Move your cursor to the point in your post where you want the tags to appear.
9. Paste the text with the paste shortcut keys CTRL+V.

That’s all it takes to put Technorati tags in any full version WordPress post.

Customizing the Tagging Bookmarklet for WordPress.com Users

That’s right. I hear the brakes squealing. You are using the limited version of WordPress called WordPressMU and WordPress.com. You want all the joys of easily adding Technorati tags to your posts, right?

Well, Lorelle is here to make your day.

The problem is that Oddiophile’s Technorati tagging bookmarklet just isn’t very pretty with WordPress.com blogs. It puts the tags in a <span>, dependent upon CSS stylesheets to style its look. Unfortunately, the powers behind WordPress.com have stripped away all our abilities to add CSS and HTML tags other than the most simple and common tags to our posts. It just looks like part of the text. So we use our creativity and the tools we do have access to and make this tagging thing look pretty.

The key is to put in whatever HTML and style tags you can get away with.

To change the structure of the Technorati Tagging Bookmarklet, do the following:

1. Make sure you have the Oddiophile’s Rather Fab Technorati Tags Bookmarklet in your Favorites or Bookmarks.
2. Right click the bookmarklet link and choose Properties.
3. Move your cursor to the Location block.
4. With your keyboard, press CTRL+A to select the whole code, or just select it with your mouse. Make sure you get all of it.
5. Paste the code in a text editor (not word processor!)
6. Make your changes and edit the code.
7. Copy the newly edited code.
8. Right click on the Tagging Bookmarklet on your toolbar or links and choose Properties.
9. Move your cursor to the Location block.
10. Select the old code and delete it.
11. Paste in the newly edited code.
12. Click OKAY and then test drive the new code.

If it doesn’t work when you test it, it could be because you accidentally deleted part of the code, the quote marks have been turned into “pretty quotes” by WordPress.com (search and replace them to make them plain quote marks), or the tags you are using don’t work. If it works, do a little dance and have fun with this.

In my tag list, I use a horizontal line to separate the tags from the post. Then in a paragraph, I list the title in bold, followed by the tag links. At the end I include a copyright notice and two graphics, one for my signature and one for 9Rules, of which I’m a member. Very simple.

The following is my full Tagging Bookmarklet with all my customizations.

---

javascript:(function(){var a='';var t=prompt('Enter Tags without commas:','');if(!t) return;var tr=t.split(' ');a+='<hr /><p><b>Site Search Tags:</b> ';for(var i=0;i<tr.length;i++){if(i > 0){a+=', ';}a+='<a href='+unescape('%22')+'https://lorelle.wordpress.com/index.php?s='+tr[i]+unescape('%22')+' rel='+unescape('%22')+'tag'+unescape('%22')+'>'+tr[i]+'</a>';}a+='<br /><a href='+unescape('%22')+'http://www.cameraontheroad.com/'+unescape('%22')+' title='+unescape('%22')+'Copyright Protected by Brent and Lorelle VanFossen'+unescape('%22')+'>Copyright Lorelle VanFossen</a>, <a href='+unescape('%22')+'http://9rules.com/'+unescape('%22')+' title='+unescape('%22')+'Member of 9Rules Blogging Network'+unescape('%22')+'>member of the 9Rules Network</a></p><img src='+unescape('%22')+'https://lorelle.files.wordpress.com/sig.png'+unescape('%22')+' alt='+unescape('%22')+''+unescape('%22')+' /><img src='+unescape('%22')+'https://lorelle.files.wordpress.com/9rules.png'+unescape('%22')+' alt='+unescape('%22')+'Member of the 9Rules Blogging Network'+unescape('%22')+' />';prompt('Copy this code, press OK, then paste to your blog entry:',a);})()

---

Let’s look at this piece by piece and I’ll show you how you can change this to make it your own.

Changing the Bookmarklet Prompts

You can set the bookmarklet prompts, the text you see in the pop-up windows, to say whatever you need it to say to help you remember what you are doing and how to do it. For instance, I needed a reminder to not use commas, so I added “Enter Tags without commas” to remind myself.

To change the prompts, change the sections featuring:

...prompt('Enter Tags without commas:','');...

and

...prompt('Copy this code, press OK, then paste to your blog entry:',a)...

to whatever you would like it to say.

Change the Bookmarklet Layout

In my example, I have tags for a horizontal line, the paragraph tag, the title in bold, then the links, followed by HTML tags featuring the copyright information and two graphics. In the simplest form, the HTML looks like this:

<hr />
<p><strong>Site Search Tags:</strong> TAG LINK CODE GOES HERE <br />
<a href="https://lorelle.wordpress.com/" title="Copyright Protected by Brent 
and Lorelle VanFossen">Copyright Lorelle VanFossen</a>, 
<a href="http://9rules.com/" title="Member of 9Rules Blogging Network">member of the 9Rules Network</a></p>

Since the bookmarklet code is pasted into your blog post, the code will appear in your blog feeds. To make the links valid, clickable to your blog search “tags”, the full URL of your blog must be included in the tag links. If you would like the images in your “signature” included, make sure the links are also full absolute URLs in order for the images to load in the feed readers.

Here are where you find these tags so you can change them yourself to make them be whatever you want them to be:

Starting HTML:

...var tr=t.split(' ');a+='<hr /><p><strong>Site Search Tags:</strong> ';

Ending HTML:

...;}a+='<br /><a href='+unescape('%22')+'https://lorelle.wordpress.com/'+unescape('%22')+' title='+unescape('%22')+'Copyright Protected by Brent and Lorelle VanFossen'+unescape('%22')+'>Copyright Lorelle VanFossen</a>, <a href='+unescape('%22')+'http://9rules.com/'+unescape('%22')+' title='+unescape('%22')+'Member of 9Rules Blogging Network'+unescape('%22')+'>member of the 9Rules Network</a></p>...

Note that all quote marks within the code don’t quite look like themselves. They are represented by '+unescape('%22')+'. This allows them to pass through the programming code as quote marks, not influencing the code itself. Take care not to delete any part of the code outside of the elements you want to change. If you do, and the bookmarklet won’t work, start over and make sure that you are extra careful with all those characters.

Adding Graphics to the Tagging Bookmarklet

I encourage you to use your imagination and have fun with this. I’ve added two graphics, a signature and the 9Rules logo, but you can add anything you want. A photograph, a cartoon, your signature, a doodle, whatever you can create with a graphics program. I do recommend that you keep the file size low to allow the graphic to load fast, and that the graphic you choose doesn’t screw up your layout, but do whatever you want. Be creative.

To add the graphics, I put them at the end of the paragraph tag, but you can add them anywhere. Just remember to use the '+unescape('%22')+' in place of any quote marks around the image links and alt tags.

...</p><img src='+unescape('%22')+'https://lorelle.files.wordpress.com/sig.png'+unescape('%22')+' 
alt='+unescape('%22')+''+unescape('%22')+' />
<img src='+unescape('%22')+'
https://lorelle.files.wordpress.com/9rules.png'+unescape('%22')+' alt='+unescape('%22')+'Member 
of the 9Rules Blogging Network'+unescape('%22')+' />';prompt...

I used relative links to my graphics, but you can also use fixed links such as http://example.files.wordpress.com/2006/03/sig.png. It doesn’t change things, just lightens the code load.

Changing the Tagging Bookmarklet Tag Links

As I said, you don’t have to use links to Technorati in your tag links. You are not penalized or punished in any way for using any URL in your tag links. They can be off-site or on-site (intrasite) links. I personally prefer to keep my visitors on my blog, so I use intrasite links.

For site search tag links in your tagging bookmarklet, use the following bit of code, as I have done:

...'<a href='+unescape('%22')+'https://lorelle.wordpress.com/index.php?s='+tr[i]+unescape('%22')+'...

To change the links to other sites, and remember it can be to any website you want, instead of using this link for Technorati:

...;<a href='+unescape('%22')+'http://www.technorati.com/tags/'+tr[i]+...

Simply replace the URL link with your tagging service of choice.

Here are some examples:

• Technorati: http://www.technorati.com/tag/tagname
• WordPress.com: http://wordpress.com/tag/tagname
• Del.icio.us: http://del.icio.us/tag/tagname
• IceRocket: http://blogs.icerocket.com/tag/
• TagJag: http://tagjag.com/discovery/
• BlinkList: http://www.blinklist.com/tag/
• BlogMarks: http://www.blogmarks.net/marks/tag/
• RawSugar: http://www.rawsugar.com/search/
• Sphere: http://www.sphere.com/featured-blogs?q=
• Google Blogsearch: http://blogsearch.google.com/blogsearch?hl=en&q=
• Yahoo MyWeb Tags: http://myweb.yahoo.com/myweb?ei=UTF-8&dg=6&tag=
• Lorelle on WordPress: https://lorelle.wordpress.com/index.php?s=
• Flickr: http://www.flickr.com/photos/tags/
• Eventful: http://eventful.com/events/tags/
• Scuttle: http://www.scuttle.org/tags.php/
• Upcoming: http://upcoming.org/tag/
• Ask: http://ask.metafilter.com/tags/

This should get you started designing your own tags with the Tagging Bookmarklet. There are a lot of things you can do like add a comma or pipe [|] or asterisk between the tag words. If you come up with some neat designs, ideas, or other places to link your search tags to, please post a link here so we can check it out.

Remember, you can find More Must Have Bookmarklets Than You Can Swing a Bookmarklet At also on this site, and if you have any favorite bookmarklets of your own, please post them there so we can add to the list.

---

LouCypher’s Technorati and Site Search GreaseMonkey Bookmarklets

LouCypher has taken the above javascript bookmarklets I developed based on the Oddiophile’s Rather Fab Technorati Tags Bookmarklet, and put them into two GreaseMonkey userscripts to add to Firefox. The first one is to create Technorati Tag Links and the second one is to create site search tags on your WordPress blogs. You can find both of them on his post, “Technorati Tags Button Bookmarklet”, on his WordPress.com blog.

Thanks, Lou, for the great scripts! They will really help folks.

And for the rest of you, this is just another example of the magic of the WordPress Community and its determination to work together to create great things. Amazing.

---

Comma and Space Separated Version of the Tagging Bookmarklet

Rakesh of Bavra Mann has developed a version of my Technorati Tagging Bookmarklet that finally fixed what I haven’t had time to fix. You can now use commas as you enter words, without the plus sign to connect them together, and in the pasted version, there are no plus signs between the words.

His version is at Rakesh’s Technorati Tags Bookmarklet with Commas and Spaces, and here is a detailed look at how to break it down to incorporate your own layout and code. It’s meant as a guide to use to create your own tagging bookmarklet. See Rakesh’s blog for this new version’s full code.

The first section initiates the bookmarklet script with the prompt text:

javascript: ( function() { var a=''; var t=prompt('Enter 
Tags separated by commas:',''); 
if(!t) return; var tr=t.split(','); a+='

At this point, put the HTML tags that start your layout. Usually this is the title section. This is my layout:

<hr /><p><font size="-1"><b>Site Search Tags:</b> 

The next section handles the search and replace technique that replaces the need for the + sign.

'; for(var i=0;i<tr.length;i++) 
{ tr[i]=tr[i].replace(/^\s+/,""); 
tr[i]=tr[i].replace(/\s+$/,""); var 
tag_text=tr[i]; tr[i]=tr[i].replace(/\s+/g,"+"); 
if(i > 0){ a+=', '; } a+='

The next section wraps the tag links around the tag words. If you are using WordPress and wish to feature your tags as site search tags (highly recommended), then leave this as http://lorelle.wordpress.com/index.php?s=. If you would like to replace the tag link with an off-site tag service, then carefully change it to one of the other links mentioned above.

Remember, the +unescape('%22')+ represents a quote mark, required for these links to work. Do not remove or edit them.

<a href='+unescape('%22')+'https://lorelle.wordpress.com/index.php?s='
+tr[i]+unescape('%22')+' rel='+unescape('%22')+'tag'
+unescape('%22')+'>'+tag_text+'</a>'; } a+='

The following section is any final HTML tags or information you would like to add to your tag list. It can end with a paragraph tag </p> or be something more, like my signature example:

<br /><a href='+unescape('%22')+'
http://www.cameraontheroad.com/'+unescape('%22')+' 
title='+unescape('%22')+'Copyright Protected by 
Brent and Lorelle VanFossen'+unescape('%22')+'>
Copyright Lorelle VanFossen</a>, <a href='+unescape('%22')+'
http://9rules.com/'+unescape('%22')+' title='+unescape('%22')+'
Member of 9Rules Blogging Network'+unescape('%22')+'>
member of the 9Rules Network</a></font></p>
<img src='+unescape('%22')+'https://lorelle.files.wordpress.com/sig.gif'+unescape('%22')+' 
alt='+unescape('%22')+''+unescape('%22')+' />
<img src='+unescape('%22')+'https://lorelle.files.wordpress.com/9rules.gif'+unescape('%22')+' 
alt='+unescape('%22')+'Member of the 9Rules Blogging
 Network'+unescape('%22')+' />

The final section adds the last prompt in the tag popup window. You can change this to say anything you want.

';prompt('Copy this code, press OK, then paste to your blog entry:',a);})()

Thanks, Rakesh, for this great variation!

Troubleshooting The Tagging Bookmarklet

The following are the most common questions and problems with this Javascript bookmarklet:

• It won’t work: As mentioned, make sure there are no quote marks in the code. Remove all line breaks so the script is on one line. Take care in editing or modifying this as one missed bit of code and it won’t work. Keep backups as you modify it.
• Is this available as a WordPress Plugin? No. It is a Javacript bookmarklet and not a WordPress Plugin. It is saved to your browser and has no connection with WordPress or its base code.
• It won’t work in X browser: Javascript bookmarklets will work with most popular browsers including Firefox, Internet Explorer, Safari, Opera, and others. You may have to make changes to the script depending upon how that browser interprets Javascript.
• I’d like to add my picture to the signature area: You can add any graphic(s) you want to the script in the format outlined.
• Will this work on Blogger or FaceBook blogs? This technique will work on any blog, not just WordPress blogs, as long as the blogging program will not strip out HTML code. It works from within your browser not your blogging program, so you should be able to use it on anything.

Related Articles

• Tags and Tagging in WordPress
• Categories versus Tags – What’s the Difference and Which One?
• The Problems With Tags and Tagging
• Adding a Signature To Personalize Your Blog Post
• Post Meta Data WordPress Plugins
• Which WordPress Plugins Does Lorelle on WordPress Use?
• WordPress.com Blog Bling: Show Off Your Blog Bling
• WordPress.com Blog Bling: Signatures and Writing Code
• Categories versus Tags: Defining the Limitations
• The Ultimate Tag Warrior WordPress Plugin
• Helping the Ultimate Tag Warrior Work with Jerome’s Keywords WordPress Plugins
• Adding Del.icio.us, Digg, Technorati and Slashdot Links to Your WordPress Blog
• Putting Some Thought Into Blog Categories and Tags
• Tags Are Not Categories – Got It?
• What Do You Blog About? Check Your Tags
• Playing Tag With WordPress
• Top 10 Tips for Technorati Tricks
• Tidying Up Tags – A Technical Review
• Lorelle on WordPress Now Part of Technorati Tools
• Combining Ultimate Tag Warrior With Jerome’s Keywords WordPress Plugins – Meet Tags in the Head
• Link Referrals – Linking to Site Search Tags
• Abuse: Keyword Spamming versus Tag Spamming

---

Site Search Tags: tags, tag, tagging, bookmarklet, javascript, tagging bookmarklet, tag bookmarklet, help with tags, tag help, tagging wordpressdotcom, wordpress tags, wordpressdotcom, wordpress.com, wordpress, wordpresscom, social, bookmarking, bookmark, social bookmarking, technorati, navigation, site links, links, intrasite, intrasite links, search links, site search, technorati tags, add tags, categories, category
Subscribe Via Feedburner Subscribe by Email

Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.