Since my recent site redesign, several people have told me they love how I set up my social bookmarking icons at the bottom of my posts and wanted me to provide the code and explain how to do so. Here is a quick rundown of my thought process, then an explanation of how to do it on your site.

Why did I want them set up like this? If you’re a WordPress user and looking for an easy way out, there are several great plugins you can use to easily accomplish what I did (without the links next to the icons). The two most popular extensions are WP-Notable and WP-Sociable.

Although you can select which services to use in the control panel, you are still likely going to flood the reader with icons that will serve as more of an eyesore than anything else. The point of these buttons is to encourage bookmarking, digging, etc., so in my mind having little tiny icons defeats the purpose. My setup below seems to be more encouraging to readers to bookmark or stumble articles on this site, which can improve traffic and hopefully increase the amount of readers that return. The icon draws the readers attention and the link encourages it to be clicked.

What is the code needed? Although there are probably 50+ social bookmarking services available to users, only a few are really needed. I went with the only four I feel are truly worth the space on my blog. Here is the code for them:

Digg

<a href="http://digg.com/submit?phase=2&url=<?php the_permalink() ?>&title=<?php the_title(); ?>"> Digg This!</a>

Del.icio.us

<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title() ?>"> Add to Del.icio.us</a>

Google Bookmarks

<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php the_permalink()?>/&title=<?php the_title(); ?>"> Google Bookmark It!</a>

StumbleUpon

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"> Stumble it!</a>

I’ve also done some digging around (pun intended) and found a few others that I don’t use, but others may be interested in for their sites. I have not tested them, so please let me know if they don’t work for some reason and I’ll try to get it corrected in this post for other readers.

Netscape It!

<a href="http://www.netscape.com/submit/?U=<?php the_permalink() ?>&T=<?php the_title(); ?>&C=<summary>">Netscape it!</a>

Add to Google

<a href="http://fusion.google.com/add?feedurl=<?php the_permalink() ?>"> Add to Google!</a>

Add to MyYahoo

<a herf="http://add.my.yahoo.com/rss?url=<?php the_permalink() ?>"> Add to My Yahoo!</a>

This is just the code for submitting the URL to the various sites. Now that you have that, you will next need to get the appropriate icons for each service (the easiest way to do this is download one of the plugins mentioned above, then load the icons into your images folder). You can place the images just before the link by typing the following code with the appropriate .png or .gif file immediately before the code provided above for each respective service:

<img src="<?php bloginfo('template_url'); ?>/images/{Name of Your Image}" border="0" alt="tag" />

You’ll want to replace the bolded brackets section with the name of the image (for example, netscape.gif). If you don’t know how to do this, or don’t use WordPress, you can create a free account at Photobucket, upload the images there, and get the URL that it gives you. Insert that in between the first set of quotes.

Hopefully many of you have found this post useful. Please post questions below and I will do my best to answer them. Also, if you have the code for other services, feel free to link to it and I’ll update my post. Enjoy!