Kendal

There are many social bookmarking plugins for WordPress out there like SexyBookmarks, ShareThis, Bookmarkify, etc,
but I don’t like to use plugins when I can do things myself and exactly how I want it. Sure plugins are awesome for those
who don’t know or are not interested in coding.

In this article I will show you, step by step, how you can make your own social bookmarking section that you can customize
in a thousand ways. Of course, this post is for those who know at least basic wordpress/html/css/php coding and why not for
those who want to learn and want to get their hands a little dirty.

So let’s begin. At first we have to create the html/php of our wordpress social bookmarking section:

<!--social bookmarking-->
<!-- use tinyurl to shorten your urls for twitter-->
<?php
$shortenedurl = file_get_contents('http://tinyurl.com/api-create.php?url=' . urlencode(get_permalink()));
?>

<div>
<p>If you liked this article please consider sharing it.</p>
<ul>
<li><a href="http://feeds.feedburner.com/<?php echo $social_feedburner_id; ?>" title="Rss Feeds" rel="nofollow external ">RSS Feeds</a</li>
<li><a href="http://digg.com/submit?phase=2&#038;url=<?php the_permalink(); ?>&#038;title=<?php the_title(); ?>" title="Digg This!" rel="nofollow external ">Digg This!</a></li>
<li><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&#038;title=<?php the_title(); ?>" title="Stumble Upon" rel="nofollow external ">Stumble Upon</a></li>
<li><a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&#038;title=<?php the_title(); ?>" title="Bookmark on Del.icio.us" rel="nofollow external ">Bookmark on Del.icio.us</a></li>
<li><a href="http://www.twitter.com/home?status= Currently reading: <?php echo str_replace(' ', '+', the_title_attribute('echo=0')); echo '+' . $shortenedurl; ?>” title="Tweet This!" rel="nofollow external ">Tweet This!</a></li>
<li><a href="http://reddit.com/submit?url=<?php echo the_permalink(); ?>" title="Reddit" rel="nofollow external ">Reddit</a></li>
<li><a title="Share on Google Buzz" href="http://www.google.com/reader/link?url=<?php the_permalink() ?>&#038;title=<?php the_title(); ?>&#038;srcURL=<?php bloginfo('url'); ?>"   rel="nofollow external">Share on Google Buzz</a></li>
</ul>
</div>
<!--social bookmarking end-->

I only added the social networks that people usually use. You can add whatever network you want.

Then the css part:

/*--social bookmarking--*/
.bookmarking {
background: #e3e3e3;
width: 550px;
border: 1px solid #c5c5c5;
}
.bookmarking p {
font: normal 14px Arial, Verdana, Tahoma;
color: #555555;
padding-bottom: 10px;
line-height: 30px;
text-align: center;
}
.bookmarking ul {
list-style: none;
margin: 0 0 0 100px;
float: left;
}
.bookmarking ul li {
float: left;
margin-left: 10px;
}
.bookmarking ul li a {
width: 38px;
height: 38px;
text-indent: -9999em;
display:block;
}
.bookmarking ul li.rss-bookmark a {
background: url(rss-bookmark.png) no-repeat;
}
.bookmarking ul li.digg-bookmark a {
background: url(digg-bookmark.png) no-repeat;
}
.bookmarking ul li.stumble-bookmark a {
background: url(stumble-bookmark.png) no-repeat;
}
.bookmarking ul li.delicious-bookmark a {
background: url(delicious-bookmark.png) no-repeat;
}
.bookmarking ul li.twitter-bookmark a {
background: url(twitter-bookmark.png) no-repeat;
}
.bookmarking ul li.reddit-bookmark a {
background: url(reddit-bookmark.png) no-repeat;
}
.bookmarking ul li.buzz-bookmark a {
background: url(buzz-bookmark.png) no-repeat;
}
/*--social bookmarking end--*/

Here’s a nice set of free social bookmarking icons:

You can find hundreds of social bookmarking icons on IconFinder or by searching on Google.

Hope you enjoyed this article and find it useful.