ThemeLab's Blog

Stay up to date with our newest WordPress themes, WordPress plugins, WordPress tutorials, and other announcements.

Social Bookmarking with WordPress

Last Updated on by

With web 2.0 in full swing, social networking sites have played an ever increasing role in the evolution of the internet. Sharing, creativity, and collaboration are all vital factors in this web 2.0 trend. Sites such as Facebook, MySpace, StumbleUpon, Digg, Mixx, Del.icio.us, Reddit, and the like have changed the way content is distributed online. These sites can turn into valuable marketing tools for your website if used correctly.

In this tutorial I’ll go over a few things to make your WordPress blog more social-networking-friendly:

  • How to use the Sociable plugin to add icons to your posts and pages.
  • How to use the ShareThis plugin to combine all these icons into one.
  • How to add a dynamic Digg button to your posts.

If you’ve been wondering how to add those social bookmarking icons to your posts, read the rest of this tutorial.

Sociable Plugin

This is an excellent plugin which I’m actually using on this site right now (just scroll down to see it in action). You can download it on this page. Read my earlier tutorial if you don’t know how to install a WordPress plugin.

What’s great about this plugin is the wide variety of social sites to choose from. Here’s a screenshot of all the sites you have at your disposal.

Sociable Sites

There are 83 sites to be exact. Below the list of sites are display options you can use to choose where the icons should be displayed.

Sociable Display Settings

Those should be pretty self-explanatory. I want to highlight one thing where it says: it may be tacky to display icons on all types of pages. Unless you have a huge site, chances are your readers wouldn’t want to bookmark a search result page, or monthly archive page for that matter.

ShareThis

Instead of having a bunch of icons which could clutter up your design, you can opt to have all these icons combined into one with ShareThis. What’s great about ShareThis is along with all the social bookmarking options, you can also allow visitors to send it to a friend through e-mail, AIM, MySpace, or SMS (text message). The first step is to get the plugin from WordPress.org and install it.

ShareThis Options

On the ShareThis website, you can also register to customize the widget and get free tracking. More information on that is available here. You’ll need to paste the new widget code into the ShareThis Options page in your WordPress administration panel to enable the tracking and have the customized the widget (if you chose to do so).

How to add a dynamic Digg button to your posts

There are a few different ways to add a Digg button to your post. Fortunately Digg makes this easier with their Digg Tools. With the WP Conditional Digg This Badge you can make sure only posts with a certain number of diggs have the Digg button displayed. I prefer to use Digg’s integration tools to add a dynamic Digg button to certain posts – manually. Here’s how to do it.

  • Make sure you’re in the Code Editor and add the following code in your post. <script type="text/javascript">digg_url = "http://www.themelab.com/2008/03/21/social-bookmarking-with-wordpress/";</script><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
  • In order to add styling or make it “float” to the left like I do, enclose it with a div tag like so: <div style="float:left;margin-right:5px;"><script type="text/javascript">digg_url = "http://www.themelab.com/2008/03/21/social-bookmarking-with-wordpress/";</script><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div>

Make sure you change the URL to your own blog post, unless you want your readers to Digg the article you’re reading right now instead, which is perfectly fine with me.

In closing, here are a few tips you should take into consideration when adding these things to your blog(s):

  • It’s not a good idea to choose all 83 of those social bookmarking sites with Sociable. Too many of these icons may “overwhelm” your readers. Not to mention some of them are non-English sites, which may not be relevant if your blog’s primary language is English.
  • Either cut down on the icons and only choose the most popular ones, or use the ShareThis icon which combines everything into one, or have a mix of both (like I have).
  • If you have a viral story and expect it may hit Digg’s front page, make sure your server is ready to handle an influx of traffic. The Digg effect can cause a trail of destruction to sites that aren’t prepared.

That’s about it. Feel free to comment and share if you like this article. I wouldn’t mind a few Diggs or Stumbles either.

About

Leland Fiegel was the original founder of ThemeLab. He is a web developer who loves WordPress and blogging.

  • http://www.websitestocomputers.com Curt

    Excellent information. Right now I’m using the Sociable and Share This plugin together. I just use 5 of the major social sites icons with Sociable t get them visible, and then the Share this form more choices.

    I just might put the Digg button on instead of the icon.

    Thanks!

  • Leland

    @Curt: Yes, if you’re looking to get more Diggs from people accessing your site directly (instead of finding it through a Digg story), the Digg button would surely help. Thanks for commenting!

  • http://measuringhistory.com/blog DeeK

    Exactly what I was looking for. Thanks

  • Pingback: some wordpress resources : brutally succinct