In this tutorial I am going to show you how to create a quick and simple social bookmarking option to your blog similar to what you see on this site. This is for wordpress themes only although with a bit of tweaking it may be able to work on other blogs.

This will be the final outcome:

1. First, download these images, these are the icons for the image you see above and put them in the images folder of the theme file: socialbookmarkingicons.zip
2. Now open up style.css in your theme and add this code:
   

   .socialbookmarking {
   margin-right:5px;
   text-align:center;
   clear:left;
   float:right;
   font-family:Arial, Helvetica, sans-serif;
   font-size:8pt;
   color:#333333;
   border-left:1px #FFFFFF solid;
   border-right:1px #FFFFFF solid;
   }

   .socialbookmarking_digg a {
   width:27px;
   height:28px;
   float:left;
   display:block;
   background-image:url(images/socialbookmarkingicons/digg.png);
   }

   .socialbookmarking_digg a:hover {
   background-image:url(images/socialbookmarkingicons/digg1.png);
   }

   .socialbookmarking_delicious a {
   width:26px;
   height:28px;
   float:left;
   display:block;
   background-image:url(images/socialbookmarkingicons/delicious.png);
   }

   .socialbookmarking_delicious a:hover {
   background-image:url(images/socialbookmarkingicons/delicious1.png);
   }

   .socialbookmarking_reddit a {
   width:30px;
   height:28px;
   float:left;
   display:block;
   background-image:url(images/socialbookmarkingicons/reddit.png);
   }

   .socialbookmarking_reddit a:hover {
   background-image:url(images/socialbookmarkingicons/reddit1.png);
   }

   .socialbookmarking_furl a {
   width:28px;
   height:28px;
   float:left;
   display:block;
   background-image:url(images/socialbookmarkingicons/furl.png);
   }

   .socialbookmarking_furl a:hover {
   background-image:url(images/socialbookmarkingicons/furl1.png);
   }

   .socialbookmarking_google a {
   width:29px;
   height:28px;
   float:left;
   display:block;
   background-image:url(images/socialbookmarkingicons/google.png);
   }

   .socialbookmarking_google a:hover {
   background-image:url(images/socialbookmarkingicons/google1.png);
   }

   .socialbookmarking_stumbleupon a {
   width:26px;
   height:28px;
   float:left;
   display:block;
   background-image:url(images/socialbookmarkingicons/stumbleupon.png);
   }

   .socialbookmarking_stumbleupon a:hover {
   background-image:url(images/socialbookmarkingicons/stumbleupon1.png);
   }

   .socialbookmarking_live a {
   width:29px;
   height:28px;
   float:left;
   display:block;
   background-image:url(images/socialbookmarkingicons/live.png);
   }

   .socialbookmarking_live a:hover {
   background-image:url(images/socialbookmarkingicons/live1.png);
   }

   .socialbookmarking_technorati a {
   width:25px;
   height:28px;
   float:left;
   display:block;
   background-image:url(images/socialbookmarkingicons/technorati.png);
   }

   .socialbookmarking_technorati a:hover {
   background-image:url(images/socialbookmarkingicons/technorati1.png);
   }

   .socialbookmarking_yahoo a {
   width:25px;
   height:28px;
   float:left;
   display:block;
   background-image:url(images/socialbookmarkingicons/yahoo.png);
   }

   .socialbookmarking_yahoo a:hover {
   background-image:url(images/socialbookmarkingicons/yahoo1.png);
   }

3. Now add the following to the single.php page underneath the content of the post (normally something like <?php the_content(); ?>
   

   <div class=”socialbookmarking”>

   <div class=”socialbookmarking_digg”>
   <a href=”http://digg.com/submit?phase=2&url=<?php the_permalink() ?>&title=<?php the_title(); ?>”></a>
   </div>

   <div class=”socialbookmarking_delicious”>
   <a href=”http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title(); ?>”></a>
   </div>

   <div class=”socialbookmarking_reddit”>
   <a href=”http://reddit.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>”></a>
   </div>

   <div class=”socialbookmarking_furl”>
   <a href=”http://furl.net/storeIt.jsp?u=<?php the_permalink() ?>&t=<?php the_title(); ?>”></a>
   </div>

   <div class=”socialbookmarking_google”>
   <a href=”http://google.com/bookmarks/mark?op=edit&bkmk=<?php the_permalink() ?>&title=<?php the_title(); ?>”></a>
   </div>

   <div class=”socialbookmarking_stumbleupon”>
   <a href=”http://stumbleupon.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>”></a>
   </div>

   <div class=”socialbookmarking_live”>
   <a href=”http://favorites.live.com/quickadd.aspx?marklet=1&mkrt=en-us&url=<?php the_permalink() ?>&title=<?php the_title(); ?>”></a>
   </div>

   <div class=”socialbookmarking_technorati”>
   <a href=”http://www.technorati.com/faves?add=<?php the_permalink() ?>”></a>
   </div>

   <div class=”socialbookmarking_yahoo”>
   <a href=”http://myweb2.search.yahoo.com/myresults/bookmarklet?u=<?php the_permalink() ?>&t=<?php the_title(); ?>”></a>
   </div>

   </div>

And that’s it, you should now have an area of social bookmarking icons that is similar to the ones you see here on Help Developer.