Tutorial: Add Social Bookmarking to your blog posts

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.

Brought to you from Help Developer

410 views