I have talked in length about how del.icio.us and furl bookmarklets can be improved - now I want to talk about another similar service that don't even provide a bookmarklet. I am talking about Digg. Okay, I know that Digg is not a social bookmarking site - but it is a site to which you can submit URLs with it's title and description. So the same kind of bookmarklets can be used here too. With that in mind, I will try to create the 'perfect' Digg bookmarklet.
The Digger Bookmarklet - for the impatient. To install the bookmarklet, just 'dragg' the link to your bookmarks toolbar. Now visit any page you want to submit to digg and hit this button. The bookmarklet will open a new window with all the information filled in automatically.
Requirements
The Digg bookmarklet should have the following features...
- URL must be fetched
- Title must be fetched
- The description to be used must be selectable by the user.
- If the user did not select a description, it must be auto generated.
- All the inputed values must be editable by the user.
The perfect bookmarklet should work in IE as well as the other browsers. However, I am leaving this out as I hate IE and so should you. Anyway, enabling this feature will make many other features impossible - as IE have a very stupid 488 character limit for bookmarks. This will make complex bookmarklets very hard to create - if not impossible.
Fetching Data
URL
Fetching URL of the current page is easy - just use document.location.href. This will be passed in the URL to the Digg site - to the phase 2 page. This means that URL is not editable after the bookmarklet is clicked. I am sorry about that - if it must be editable, I have to use the phase 1. That is more trouble than it is worth.
Title
Another easy one - javascript has the document.title property that can be used to fetch the title of the document. There is a problem with this - in many sites, the site title is given with the page title - like this "xml2array() - XML Parser for PHP < PHP < Bin-Co". Using the first H1 tag may solve this, but again, that could hold the site title too. Anyway this field is editable - so don't worry too much about it.
Description
This is the hard part - I am going to use this method to fetch the description.
- First, see if any text is selected in the document. If so use that as the description.
- If nothing is selected, search for the 'description' meta tag. If present use that.
- If these two methods fails, we use a failsafe - the first paragraph(
p tag) is fetched and used.
I call this the SMP approach - I use this in my custom social bookmarking bookmarklets. But that is another post.
Now all we have to do is create a URL with these data in the query. The keys used by Digg are..
- title
- The title of the page
- bodytext
- The description.
- URL
- The URL of the page.
Please note that you will have to URL encode all the data before using it in the URL.
Bookmarklet
The Bookmarklet - Digger
To install the bookmarklet, drag the above link to your bookmarks toolbar. Now visit any page you want to submit to digg and hit this button. The bookmarklet will open a new window with all the information filled in automatically.
The bookmarklet code(readable format).
(function(){
d = document;
w = window;
s = w.selection;
t = s ? (s.type != 'None' ? s.createRange().text : '') : (w.getSelection ? w.getSelection() : '');
t = t.toString();
if (!t) {
m = d.getElementsByTagName('meta');
for (i = 0; i < m.length; i++)if (m[i].getAttribute('name') == 'description')t = m[i].getAttribute('content');
}
if (!t) {
p = d.getElementsByTagName('p');
if (p) t = p[0].innerHTML.replace(/<[^>]+>/g, '');
}
if (t.length > 345)t = t.substr(0, 345) + " ...";
void (open('http://digg.com/submit?phase=2&url=' + encodeURIComponent(location.href)
+ '&title=' + encodeURIComponent(d.title) + '&bodytext=' + encodeURIComponent(t)))
})();
By the way, this bookmarklet will not work in IE6. You need a good browser if you wish to use the bookmarklet.
If you have any more ideas to improve this bookmarklet, let me know.
Read More...
