Add social bookmarking to wordpress

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
   

   
   &title=”>
   

   
   &title=”>
   

   
   &title=”>
   

   
   &t=”>
   

   
   &title=”>
   

   
   &title=”>
   

   
   &title=”>
   

   
   ”>
   

   
   &t=”>
   

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.

source: http://softwaredevelopmentindia.wordpress.com