Creating Submission Image Links For Digg, Reddit, and Del.icio.us

By Daniel Miessler on October 14th, 2006: Tagged as Blogging | Programming | Social

If you’ve done anything on the Internets over the last few months you’ve probably seen little icons like these:

These are links to various social bookmarking sites — places you and others can submit your content for rating and storage by others. It’s pretty easy to get these on your site if you’re a blogger. There are a number of tools that can add some or all of these to the bottom of each blog post, which is what most do.

What I needed, however, was a way to put these at the bottom of my custom pages, i.e. those that weren’t managed by my blog software. So I did a bunch of searching and came up with the following code for the three that I use: Digg, Reddit, and Del.icio.us.

Sorry for this being an image; I haven't yet solved the code-mangling issue within Wordpress posts. It's on my list.

Anyway, this is how it's done, and it's working great. You can see how it looks by loading any page of mine under /study, such as my guide to the lsof command.

  • Digg
  • Reddit
  • HackerNews
  • StumbleUpon
  • DZone
  • Google Bookmarks
  • Twitter
  • Facebook
  • del.icio.us
  • FriendFeed
  • Posterous
  • RSS
  • email
  

View Comments

  • True, if you didn't have Javascript installed...but most everyone does, so I think it's ok. Good information, though, thanks; I'll definitely check it out...
  • Tim
    Here's a link to a presentation for a DOM scripting session I went to in Rock Eagle last week that may shed some light on to what I'm trying to say.
  • Tim
    I'd like to point something out:

    Putting a javascript action as an "href" for a link is generally bad. If I didn't have javascript enabled, the link would do nothing.

    Here's what I've recently learned (I left out the less/greater than signs so WordPress doesn't screw it up)

    bad:
    a href="javascript:blah"

    acceptable:
    a href="someurl" onClick="javascript:blah"

    Good:
    a href="someurl" class="special"

    In that last example, you'd use a DOM script to add in the onClick event handler for the link (get all elements by tag "a" and filter by attribute "class" equals "special"). For extra encapsulation, you should keep the DOM script in a separate file.
  • joat
    Those same graphics work well in the links bar for Firefox. Drag and drop a site onto the toolbar, click on the link to load the page and the ico, right click on the link, select "Properties", clear the "Name".
blog comments powered by Disqus

 

twitter_icon

Sample Original Content


Information Security

Tutorials and Primers

Culture & Society

Technology & Science

Politics

Philosophy & Religion

Miscellaneous

Tools & Projects


Blog Archives