How To: Add custom social bookmarking in your WordPress blog posts without a plugin
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 class="bookmarking">
<p>If you liked this article please consider sharing it.</p>
<ul>
<li class="rss-bookmark"><a href="http://feeds.feedburner.com/<?php echo $social_feedburner_id; ?>" title="Rss Feeds" rel="nofollow external ">RSS Feeds</a</li>
<li class="digg-bookmark"><a href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Digg This!" rel="nofollow external ">Digg This!</a></li>
<li class="stumble-bookmark"><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Stumble Upon" rel="nofollow external ">Stumble Upon</a></li>
<li class="delicious-bookmark"><a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Bookmark on Del.icio.us" rel="nofollow external ">Bookmark on Del.icio.us</a></li>
<li class="twitter-bookmark"><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 class="reddit-bookmark"><a href="http://reddit.com/submit?url=<?php echo the_permalink(); ?>" title="Reddit" rel="nofollow external ">Reddit</a></li>
<li class="buzz-bookmark"><a title="Share on Google Buzz" href="http://www.google.com/reader/link?url=<?php the_permalink() ?>&title=<?php the_title(); ?>&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--*/
This is how the social bookmarking section we’ve made should look:
If you want to see a live demo just look at the end of this article and see the social bookmarking section. For my blog I’ve used this free set of icons: 110 Free Classy Social Media Icons. For the demo I’ve used a free set of icons for personal use from Fasticon. You can find hundreds of social bookmarking icons on IconFinder or by searching on Google.
Hope you enjoyed this article and find it useful. Cheers.
If you enjoyed this article, please consider sharing it!
i stumbled upon you post when sorting out my own theme that i am developing. i have something similar in my theme (but done a different way) problem i have is that when i try to validate the theme w3 shows errors for all the symbols in the urls (ie &, =, etc) you dont happen to know a way to make this validate do you?
have you tried to use & amp; (without the space after &) instead of &
thats works for validating, but produces a 404 on the websites when link is clicked?, dont think there is a way round this
okay, sorted it. problem was with replacing all the & with an & amp; for some reason it lets you get away with the first & and the rest need to be formed correctly. thanks for your help.
just thought you might like to know, with wordpress 3.0 now here, you dont need a url shortner function. just use the_shortlink.