21 April 2008 - Posted in CSS, HTML, PHP, Wordpress

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:
dsadasd.png

  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.

Twitter

5 Comments

  1. irrinfentTiep said...

    Hello my friends :)
    ;)

    May 18th, 2008 at 1:21 pm

  2. redall said...

    to actually them. I started Behind every his

    May 20th, 2008 at 6:06 pm

  3. Matthew said...

    Great post, very useful. But you need to fix the curly-quotes (smart quotes automatically formatted by WP or MS Word, Explorer etc) in your WP/PHP code; only dumb straight quotation marks (”) work correctly. Maybe your code chunk in this post should be formatted as code. :-)

    April 24th, 2009 at 11:10 am

Trackbacks

  1. Wordpress Island - Wordpress Themes, Plugins, News, Forums, Articles » Blog Archive » Tutorial: Adding Social Bookmarking to your blog posts
  2.   Table Of Contents Of Wordpress Tutorials, Helps, Tips and Tricks by aComment.net

Leave a Comment