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:
- 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
- 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);
} - 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.
irrinfentTiep said...
Hello my friends
May 18th, 2008 at 1:21 pm
redall said...
to actually them. I started Behind every his
May 20th, 2008 at 6:06 pm
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