Adding Social Bookmarking Button in WordPress – Without Plugins

Many blogs have links to add the current post to various social bookmarking site like Digg, Reddit, Delicious, etc. This blog don’t have it – but my LinDesk blog does. This effect is achieved using wordpress plugins like…

• S-ButtonZ Social Media Buttons – WordPress Plugin
• WordPress › Social Buttons
• Sociable – Social Bookmarking for WordPress
• Hacked WordPress Plugins
• WP Plugin: Gregarious
• I Love Social Bookmarking plugin
• WordPress › Add to Any Share/Save/Bookmark Button

For those who are new, this is part three of the Plugin Killer series. This series will show you how to duplicate the functionality of the a few wordpress plugins without having to install it using custom code in the wordpress theme. The earlier posts in this series are…

• Avoid Duplicate Content – Use Canonical URL in WordPress
• Show Popular Posts in WordPress – without a plugin

The Code

You can add social bookmarking button to your post by editing the single.php file in your theme. Go to the place in the file where you want the buttons to show up – then add this code at that location…

<a href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php echo urlencode(the_title('','', false)) ?>">del.icio.us</a>
 | <a href="http://digg.com/submit?phase=2&url=<?php the_permalink() ?>">Digg it</a>
 | <a href="http://reddit.com/submit?url=<?php the_permalink() ?>&title=<?php echo urlencode(the_title('','', false)) ?>">reddit</a>
 | <a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&title=<?php echo urlencode(the_title('','', false)) ?>">StumbleUpon</a>

Of course, you don’t have to do it like that – a better way of doing it is by putting the links in a li/ul list and then styling it. The point is, you don’t need a plugin to do this.

Different Implementations

Another thing I would recommend is get the images – in the above code, I just used text links. If you get the favicons of the sites you’re linking to, it will look a lot nicer. Example (go to the end of the post). You can use bigger images as well – example. Or use some kind of effect – example(here the icons are a bit transparent by default – but when you hover over them, it shows up clearly – its completely opaque).

Here only the four big ones are given. You can find code for more social bookmarking sites elsewhere.