The English Guy Web Design

David, of Third World County fame, asked me the other day about the social bookmarking icons I have on some of my themes. Since he had asked I thought I would write something up on it for everyone to copy use. After all, the more social bookmarking that occurs, the more blogging people see, the more social we all become, right?

The concept is simple enough, and it is quite straightforward (x)HTML code.

First of all you’ll need the small icons I use, you can download them here. Right now, as it stands, there are Blinklist, Del.icio.us, Digg, Furl, Spurl, Technorati and Slashdot. I threw in a BoingBoing icon too just for good measure even though in my example below I don’t use it. Put them in your theme’s images directory.

Second, you need to sign up at all of these places. All of them require you to have an account to use the automated methods to add a webpage. It’s no big deal, the accounts are free and it doesn’t take long to sign up and validate the emails they generally send.

Third; now for the codes.

• Blinklist:
  

  <a href=”http://www.blinklist.com/index.php?Action=Blink/
  addblink.php&Description=<?php bloginfo(’description’); ?>&Url=<?php bloginfo(’url’); ?>&title=” onclick=”this.target=’_blank’”><img src=”<?php bloginfo(’template_url’); ?>/images/blinklist_icon.gif” alt=”BlinkList” /> <span>Blink It</span></a>

• Del.Icio.Us:
  

  <a href=”http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php bloginfo(’name’); ?>, <?php the_title(); ?>” onclick=”this.target=’_blank’” title=”Bookmark >?php the_title(); ?< at Del.icio.us”><img src=”<?php bloginfo(’template_url’); ?>/images/delicious_icon.gif” alt=”Del.icio.us” /> <span>Del.icio.us</span></a>

• Furl:
  

  <a href=”http://www.furl.net/storeIt.jsp?title=<?php bloginfo(’name’); ?>, <?php the_title(); ?>&url=<?php the_permalink(); ?>” onclick=”this.target=’_blank’” title=”Bookmark <?php the_title(); ?> at Furl”><img src=”<?php bloginfo(’template_url’); ?>/images/furl_icon.gif” alt=”Furl” /> <span>Furl</span></a>

• Spurl:
  

  <a href=”http://www.spurl.net/spurl.php?url=<?php the_permalink(); ?>&title=<?php bloginfo(’name’); ?>, <?php the_title(); ?>” title=”Bookmark <?php the_title(); ?> at Spurl”><img src=”<?php bloginfo(’template_url’); ?>/images/spurl_icon.gif” alt=”Spurl” /> <span>Spurl</span></a>

• Technorati:
  

  <a href=”http://technorati.com/cosmos/search.html?url=<?php the_permalink(); ?>” onclick=”this.target=’_blank’” title=”See this page in technorati”<>img src=”<?php bloginfo(’template_url’); ?>/images/technorati_icon.gif” alt=”Technorati” /> <span>Technorati</span></a>

• Slashdot:
  

  <a href=”http://slashdot.org/submit.pl” title=”Submit Feed <?php bloginfo(’description’); ?>” onclick=”this.target=’_blank’”><img src=”<?php bloginfo(’template_url’); ?>/images/slashdot_icon.gif” alt=”Slashdot.com” /> <span>Slashdot</span></a>

• Digg:
  

  <a href=”http://www.digg.com/submit” title=”Submit Feed <?php bloginfo(’description’); ?>” onclick=”this.target=’_blank’”><img src=”<?php bloginfo(’template_url’); ?>/images/digg_icon.gif” alt=”Digg.com” /> <span>Digg</span></a>

And that’s it! This is all for WordPress themes of course, hence all the bloginfo() calls, but you can replace the titles and image sources with normal text and (x)HTML code for non-blog sites.