Show Non PR Links Bookmarklet | January 21, 2005
After a brief discussion on a local mailing list this morning, I created a simple bookmarklet that will highlight links using Googles new rel="nofollow" comment spam prevention method.
To install this bookmarklet, simply drag the link to your bookmarks/favourites bar. It’s been tested on Safari, Firefox and IE6 but should work on any modern browsers that support the DOM. If you want to test it out now, click on the bookmarklet and this link should highlight.
If you’re interested in how this bookmarklet was created, it’s very simple.
// grab all the links on the page
var links = document.getElementsByTagName('a');
// loop through all the links
for (i=0; i < links.length; i++){
//check to see if the rel attribute is set to nofollow
var theLink = links[i];
if(theLink.getAttribute('rel') == 'nofollow'){
// set the desired styles
theLink.style.backgroundColor = 'red';
theLink.style.color = 'white';
theLink.style.fontWeight = 'bold';
theLink.style.textDecoration = 'none';
}
}
This code was then pasted into the Bookmarklet Crunchinator and spat out as a loverly bookmarklet.
Comment
Very nice, Andy. I’ve been interested in seeing if people start using nofollow for other unexpected purposes that I normally wouldn’t catch, so I’ve just added something permanently into UserContent.css file (Firefox) that would make the links always stand out.
a[rel="nofollow"] { color: red !important; text-decoration: line-through !important; }It’s actually quite surprised me how many people have started implementing it.
Comment
Nice one Andy, that’s a prety handy little bookmarklet. Being a hardcore Firefox user, I kinda like Andrew’s method little better. That way I don’t have to click on anything :)
Comment
thanks a million. this tool will be invaluable to give to the younger guys i have working on link campaigns at work next week.
Comment
That’s pretty useful. Thanks. I am also suprised on how fast this has caught on. Maybe I’ll make a WordPress plugin to do this? It could certainly be useful.
Comment
Couldn’t you once put more things in the “rel” attribute? What if it looks like rel="friend co-worker neighbor nofollow"?
Has anybody thought of that yet?
Comment
Adding a user defined stylesheet did come up in the discussion, I asked Andy if he could make a scriptlet out of it because I don’t want to see red blocks around links all over the place, they only concern me when I’m interested in link building.
Thanks again Andy for doing the conversion.
Comment
Nice tool! It’ll be interesting to watch the growth of ‘nofollow’ tags over all the blogs I read.
Comment
Julian, you sure can put multiple values in the rel attribute…
http://www.w3.org/TR/REC-html40/…
I could see how a bookmarklet would be more desirable, if this nofollow thing becomes widely used. Until I start getting annoyed with red links all over the place, I’m going to stick with the user-defined stylesheet method. Gotta love Mozilla for that handy pseudo-class.
Comment
Very nice Andy, thanks for this!
It’ll be useful to see how nofollow spreads.
Comment
That’s a nifty li’l tool there! I tried it out on some of the big boys and lo and behold, “nofollow” tags everywhere. And not just on comment pages. Then I tried it out on some of my favorite little blogs, and I didn’t see a single red box. The rich get richer and the poor get poorer. Feh.
Comment
Okay, so your comment system ate my bookmarklet. Here’s the code.
javascript:(function(){function cE(element){if(typeof document.createElementNS!=’undefined’){return document.createElementNS(‘http://www.w3.org/1999/xhtml’,element);}if(typeof document.createElement!=’undefined’){return document.cE(element);}return false;};var css=document.getElementsByTagName(‘head’)0.appendChild(cE(‘link’));css.setAttribute(‘rel’,’stylesheet’);css.setAttribute(‘type’,’text/css’);css.setAttribute(‘href’,’data:text/css,a[rel~=”nofollow”]{border:thin dashed firebrick !important;background-color:#ffc8c8 !important;}’);})();
Comments on: Show Non PR Links Bookmarklet
Jump to the comment form