One of the most popular support emails that we receive from readers and bloggers is how do we display and were do we get the social bookmarking widgets that you can see within our posts. For most the answer will probably be obvious and simple (think of this page as your one-stop-shop for sharing widgets instead), but of course, if you are just starting out it can be understandably tricky finding and implementing the code.

What we have done is collected the code snippets from the most popular social bookmarking and sharing services (Digg, Mixx, Reddit, Delicious, Stumbleupon, Google Buzz and Facebook), we also have snippets from popular design niche services (DZone, Design Float, Design Bump and The Web Blend) and finally collected code for sharing via Twitter (Twittley and TweetMeme). Unfortunately not all services offer the option of both large and compact widgets, were we could, both are made available.
If you do feel adventurous, you can click the further options links for personalized customization.

All of the widgets, buttons and badges below can be copied and pasted directly into a Wordpress post, or alternatively they can be placed anywhere within the WP theme (single.php, index.php, header.php…). No knowledge of coding is required at all, just pick the widget you need, copy it and paste it, and yes, it really is that easy.

Digg This Smart Button

The Digg button, also known as the “Digg This” button, support both a Smart Digg button and a static Digg button, they do recommend that you use the Smart button, as it displays a real-time Digg count and is far more customizable. For more customisation options, click here: Digg This Smart Button.

Digg Compact Button Code

This code generates a button like this ↓

1

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script><a class="DiggThisButton DiggCompact"></a>

Digg Large Button Code

This code generates a button like this ↓

1

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script><a class="DiggThisButton DiggMedium"></a>

Reddit Button

The Reddit button is the smart way to get your content submitted to and discussed on Reddit. Below you will find the code snippets fot the most popular buttons, for further options, click here: Reddit Button.

Reddit Compact Button Code

This code generates a button like this ↓

1

<script type="text/javascript" src="http://www.reddit.com/button.js?t=1"></script>

Reddit Large Button Code

This code generates a button like this ↓

1

<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>

StumbleUpon Button

Below you will find the code snippets fot the most popular StumbleUpon buttons, further button options and variations are available here: StumbleUpon Buttons.

StumbleUpon Compact Button Code

This code generates a button like this ↓

1

<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>

StumbleUpon Large Button Code

This code generates a button like this ↓

1

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

Facebook Share Widget

Below you will find the code snippets fot sharing articles and posts via Facebook, for further options, click here: Facebook Share Widgets.

Facebook Compact Widget Code

This code generates a button like this ↓

Share

1

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Facebook Large Widget Code

This code generates a button like this ↓

Share

1

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Mixx Buttons & Badges

Below you will find the code snippets fot sharing with Mixx, for further button options, click here: Mixx Share Widgets.

Mixx Compact Badge Code

This code generates a button like this ↓

1
2

<a href="http://www.mixx.com/" onclick="window.location='http://www.mixx.com/submit?page_url='+window.location; return false;">
<img src="http://www.mixx.com/images/buttons/mixx-button3.png" alt="Add to Mixx!" border="0" /></a>

Mixx Large Badge Code

This code generates a button like this ↓

1
2

<a href="http://www.mixx.com/" onclick="window.location='http://www.mixx.com/submit?page_url='+window.location; return false;">
<img src="http://www.mixx.com/images/buttons/mixx-button8.png" alt="Add to Mixx!" border="0" /></a>

TweetMeme Button – Twitter Share Widget

The TweetMeme Button is by far the most popular Twitter sharing widget, you can click here for further widget options: TweetMeme Buttons & Widgets.

TweetMeme Compact Button Code

This code generates a button like this ↓

1
2
3
4

<script type="text/javascript">
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

TweetMeme Large Button Code

This code generates a button like this ↓

1

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Twittley Button – Twitter Share Widget

The Twittley Button offers many color variations and options, visit here for more: Twittley Buttons & Plugin.

Twittley Large Button Code

This code generates a button like this ↓

1

<script src='http://twittley.com/button/button.js'/></script><noscript>Your browser does not support JavaScript! Instead, you can visit <a href="http://twittley.com/">Twittley.com</a> for all of your <a href="http://twittley.com/">Twitter social networking</a> needs.</noscript>

DZone Buttons

The options of dzone_url, dzone_title, and dzone_blurb are optional. If you leave out the url and title, the widget will pick them up from the page the widget is currently on. For further widget options: DZone Buttons.

DZone Compact Button Code

This code generates a button like this ↓

1
2
3
4
5

<script type="text/javascript">var dzone_url = '[url]';</script>
<script type="text/javascript">var dzone_title = '[title]';</script>
<script type="text/javascript">var dzone_blurb = '[description]';</script>
<script type="text/javascript">var dzone_style = '2';</script>
<script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script>

DZone Large Button Code

This code generates a button like this ↓

1
2
3
4
5

<script type="text/javascript">var dzone_url = '[url]';</script>
<script type="text/javascript">var dzone_title = '[title]';</script>
<script type="text/javascript">var dzone_blurb = '[description]';</script>
<script type="text/javascript">var dzone_style = '1';</script>
<script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script>

DesignBump

Make it easy for your readers to ‘Bump’ your work by including the buttons below next to each article, for further options, click here: DesignBump Buttons.

DesignBump Large Button Code

This code generates a button like this ↓

1

<script type="text/javascript">url_site='<?php the_permalink(); ?>'; </script> <script src="http://designbump.com/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script>

The Web Blend Widget

The Web Blend is a community for designers, developers and tech junkies that keeps you current with a summary of the latest in web related news and trends.

The Web Blend Large Widget Code

This code generates a button like this ↓

1

<script type="text/javascript">url_site='<?php the_permalink(); ?>';</script><script src="http://thewebblend.com/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script>

DesignFloat Tools

“Float” your articles and blog posts with these snippets, you can click here for further widget options: DesignFloat Tools.

DesignFloat Compact Button Code

This code generates a button like this ↓

1
2

<script type="text/javascript">submit_url = '<?php the_permalink() ?>';</script>
<script type="text/javascript" src="http://www.designfloat.com/evb/button.php"></script>

DesignFloat Large Button Code

This code generates a button like this ↓

1
2

<script type="text/javascript">submit_url = '<?php the_permalink() ?>';</script>
<script type="text/javascript" src="http://www.designfloat.com/evb2/button.php"></script>

Delicious Save Buttons

Unlike the rest of the widgets on this page, Delicious to not offer a widget that can display real-time save count. For more information, click here: Delicious Share Link Options.

Delicious Share Button

This code generates a button like this ↓

1
2

<img src="http://static.delicious.com/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('<?php the_permalink() ?>')+'&title='+encodeURIComponent('<?php the_title() ?>'),'delicious', 'toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>