The previous statement is false.

So I wanted some blog-posting shortcuts, and after a little searching it seemed that Notable was one of the most common, so I downloaded and installed it. It worked alright, but I had some gripes:

• page was no longer valid XHTML due to some unencoded &s and reused object IDs
• icons were not all the same size
• no way to display text along with the icons
• no slashdot submission support
• ability to use blog categor(y|ies) in submission URLs, for tag fields for instance

I ended up fixing these myself, and in the hope that others will want these fixes/features I am making the new version available for download.

Installation directions can be assumed to be the same as the official v1.14 release.

Read on for details of what was changed . . .

I probably should have tried Sociable, but I didn’t, besides it would only have solved the first item, although adding sites in Sociable looks easier than adding them in Notable. Regardless, I didn’t try Sociable, I just did it myself. After some confusion about why my changes weren’t effecting anything (notable stores its settings in the blog DB, so changes in the script did nothing), things went pretty smoothly.

My first tactic for dealing with the DB issue was to delete the DB info to force it to read from the script again (not great), but I happened to run into someone else’s blog who was hacking on Notable also, and who had fixed this issue cleanly, so I stole his solution for that (Thanks Dave!). I also noticed that he had wanted text along with his icons as well, but he did it by adding the text to each icon - I wanted something more user-definable, something flexible.

Fixing the XHTML validation stuff was easy, just replaced the &s with &s where appropriate, and removed the IDs completely on the span classes. It would have been fairly easy to make them unique, but I really didn’t see a reason why they needed specific IDs anyway, so I just yanked ‘em.

Resizing the icons so they were all 16×16. Some I did manually, but most I just took directly from the different sites’ favicon.icos.

Next I added some options to the Notable option panel to allow user-input text for any site, and created some code to handle displaying it (and wrapping it in a wp-notable_text span class so you can CSS it however you like).

I added slashdot as an option, easy with the DB issue fixed.

Finally, I added some code to replace {{category}} with the categor(y|ies) the story is filed under (multiple categories are comma separated). I did not add this to all of the submission URLs of sites that could potentially take advantage of this (in fact I only did it for slashdot), but it is easy to do in the wp-notable.php file.

I also cooked up some CSS (also partly stolen from David Seah, CSS is not my strong suit) to present the icons and text cleanly. My relevent CSS entries are:

/* WP NOTABLE ADDONS */

.notable {
	width: 100%;
	border-top: 1px dotted #ccc;
	margin-top: 16px;
	padding-top: 3px;
}

.wp-notable-line {
	line-height:16px;
}

.wp-notable {
	float: left;
	padding-right: 8px;
	opacity: .50;
}

.wp-notable:hover {
	opacity: 1.0;
}

.wp-notable_image {
	vertical-align: bottom;
	border: none;
}

.wp-notable_text {
    font-family: small fonts, arial;
    font-size: 7pt;
    padding-left: 1px;
}

.wp-notable a:link    { color: black; text-decoration: none; }
.wp-notable a:visited { color: black; text-decoration: none; }

/* END WP NOTABLE */

Important note, with the “float: left” specified above it is important that you change the icon separator in the notable options to “no space”, otherwise you’re icons will all float to the left.

This CSS makes the icons 50% transparent in firefox and other browsers, turning them fully visible on mouse-over. For IE, however, they stay fully visible the whole time. I wasn’t able to get IEs alpha filter to work with the roll-over in the same manner, so I opted to make them always visible for IE.

I intend to submit my changes to the creator of Notable, but for now feel free to comment with questions or problems here.

-Tom

DEL.ICIO.USDIGGNEWSVINEBLINKLISTREDDITSLASHDOT