Using Firefox Bookmarklets Within the HTML of a Blog Post

I'm currently working on a stealth project… a new eCommerce blog where social media is a big part of the plan… and I had this crazy idea that actually works. It started when I wanted to customize the images for smartlinks from AdaptiveBlue and the AddThis button. (NB: I've been meaning to write posts about both these great services, which I pretty much use on every blog I build now. But I've been having a hard time fitting posts into the schedule lately. So just go try them both out. They rock. And I will at some point do detailed posts about why they rock). Although they have similarities, they both have strong points so I tend to use them both.

So anyway, what AdaptiveBlue does is create a variety of great widgets that automatically index and display related content for the things on a page… people, blogs, books, wine, etc. AddThis supplies a single button that allows people to submit a page to most social bookmarking sites with just a click (they also have a nice subscribe button with multiple RSS options).

What they don't do (either of them) is submit pages to social shopping sites like ThisNext or StyleHive. I'd love to see someone create a button that works like AddThis but submits products to social shopping networks. Which brings us to the cool new hack… a roll your own solution for making it easy for readers to recommend your stuff to social shopping networks.

I use bookmarklets (a browser bookmark that uses javascript to cause an action) to submit items to social shopping sites… almost all of them supply a bookmarklet to make it easy to submit new stuff. You just add the link to the menubar of your browser and it does all the heavy lifting for you. And so I wondered, if I paste the bookmarklet code into a link in an HTML page, will it work? Can I insert an image and turn it into a button that submits the page to a site?

YES! Nice!

This is really kind of sweet because there are bookmarklets that cause all kinds of actions… from  email this page to persistent sticky notes for your browser.

I'm kind surprised I never thought of this before, but I guess it's because these code snips are always presented with the instruction to use them to extend the browser rather than the web page. Funny really.

So here's the syntax: <a href="insert code snip here"><img src="http://imageURL.jpg" border="0"></a>

Pretty simple way to add new functions to your blog, eh?

Go play!

Comments

[Posted: Feb 29, 2008 1:18:29 PM]

Hey, Tyson from over at ThisNext here. I think we might have what you are looking for.

Check out http://www.thisnext.com/help/recommend-button/

Its not part of a larger tool like Addthis or AdaptiveBlue, but it should do what you are looking for. Hope this helps and keep on ThisNext'n!

[Posted: Feb 29, 2008 5:59:44 PM]

...Also, here's a better link to ThisNext: http://www.thisnext.com/recent/

[Posted: Mar 1, 2008 4:52:33 PM]

Hey John,

That's funny, we actually added ThisNext and StyleHive a few weeks ago as options for the dropdown. It's currently an undocumented feature in the new version of the widget, which supports customization (including choosing the service options). We'll add more services and document them very soon.

Here is how to enable the two services. Get the latest version of the widget here http://www.addthis.com/customization.html and add 'thisnext' and 'stylehive' to the addthis_options variable. For example:

addthis_options = 'favorites, digg, delicious, myspace, facebook, thisnext, stylehive, reddit, newsvine, more';

If you want you can also co-brand the widget with the company name and logo.

Have fun with it! :-)

Dom

(co-founder - AddThis.com)

[Posted: Mar 2, 2008 2:15:04 PM]

Tyson,

Hey thanks for the info and the link! I kinda looked for something like that but hadn't found it.

Dom,

Yeah, I did customize the widget for the first time on this project. Added the logo, rearranged the order and number of services that it bookmarks to, etc. It was really easy, actually. I'll definitely add 'thisnext' and 'stylehive'to the variables list (although, it does occur to me now that for sites that don't have the product info on every page, these may actually not be as useful. I might just add it to the variables on a separate widget that only lives on the product page.)

In fact, you should think about doing a version of the widget geared towards social shopping… bet you could whip it out pretty quick!

[Posted: Mar 3, 2008 6:28:50 PM]

Hi John, this is Max from Wishpot.com.

I was actually testing adding the button on our Typepad blog. You can easily add support for our engine as well. You can just copy and paste our bookmarklet at http://www.wishpot.com/public/tools/buttons.aspx. No need to do much more.

Cheers,
Max

[Posted: Mar 5, 2008 10:11:42 AM]

Talk about scripts doing your work for you ;)